Skip to main content
Checkout button 블록은 구매자를 체크아웃으로 안내하는 장바구니 푸터의 기본 클릭 유도 버튼으로, 장바구니에서 체크아웃까지 명확하고 눈에 띄는 경로를 제공해요. 필수 블록이에요.

​
동작 방식

  • 버튼은 현지화된, 마켓에 맞는 체크아웃 URL을 결정하므로 구매자가 올바른 마켓의 체크아웃으로 이동해요. 결정할 수 없는 경우 표준 /checkout 링크로 대체돼요.
  • Go to cart page instead of checkout이 활성화되면 버튼이 대신 /cart로 연결돼요.
  • 클릭 시 JavaScript로 이동하므로 테마 자체의 장바구니 처리가 가로챌 수 없으며, 새 탭 열기 의도(Cmd/Ctrl 클릭, 휠 클릭)는 그대로 존중해요.
  • 클릭 시 SDK checkout 이벤트가 발생하며, 이를 구독할 수 있어요.

​
설정

​
배치 및 제한

  • 영역: 하단.
  • 최대 개수: 장바구니 상태당 1개.
  • 상태: 채워진 장바구니에서만.
  • 잠겨 있으며 기본으로 추가돼요. Checkout button은 제거하거나 숨길 수 없고, 푸터 내에서 위치만 변경할 수 있어요.

​
커스텀 템플릿

Code 탭에서 커스텀 템플릿을 지원하며, 이 블록의 기본 마크업을 여러분의 JSX로 대체해요. 다음은 템플릿이 받는 props예요.
커스텀 체크아웃 버튼은 체크아웃 추적 기능을 잃어요. 기본 버튼에는 SDK checkout 이벤트를 발생시키고 장바구니 분석을 위한 전환을 기록하는 클릭 핸들러가 연결되어 있어요. 이 핸들러는 커스텀 템플릿에 전달되지 않으므로, href만으로 이동하면 두 가지 모두 생략돼요.이벤트가 필요하면 이동 전에 onClick에서 직접 발생시키세요. 귀속(attribution) 리포팅은 이 방법으로도 복구할 수 없으므로, 정말 다른 마크업이 필요한 경우가 아니라면 디자인 설정이나 커스텀 CSS로 기본 버튼의 스타일을 변경하는 것을 권장해요.
href에 기본값을 넣지 말고 그대로 렌더링하세요. href가 없는 <a>는 비활성 상태이며, 이것이 에디터에서 올바른 동작이에요.

​
디자인

설정 패널의 Design 섹션에서 이 블록의 스타일을 지정하세요. 이는 전역 디자인 위에 적용되는 블록별 재정의이며, 비어 있으면 전역 디자인으로 대체돼요. 디자인 설정이 무엇인가요? 자세한 내용은 여기에서 알아보세요: 디자인 설정.