Skip to main content
장바구니의 레이아웃은 블록의 스택이에요: 카트 에디터에서 추가하고, 순서를 바꾸고, 스타일을 지정하고, 커스터마이징할 수 있는 구성 요소죠. 어떤 블록을 어떤 순서로 포함하는지가 구매자가 보는 장바구니를 결정해요. 블록이 **상태(state)**와 섹션(section) 안에 어떻게 배치되는지는 장바구니는 어떻게 작동하나요?를 참고하세요.

​
블록과 하위 블록

블록에는 두 가지 종류가 있어요:
  • 블록은 장바구니의 세 섹션(Header, Body, Footer) 중 하나에 직접 배치돼요. 각 섹션은 서로 다른 블록 세트를 제공해요.
  • 하위 블록은 다른 블록 안에 중첩돼요. 현재는 Cart items만 하위 블록을 가질 수 있어요: Product 행(라인 아이템 행 자체), Subscription upgrade, Custom code예요.

​
블록 추가, 순서 변경, 제거

  • Add block 선택기로 블록을 추가하세요. 추가하려는 위치에 배치할 수 없거나 제한에 도달한 경우 블록이 회색으로 표시돼요(선택기에 count/max 배지가 표시돼요).
  • 섹션 내에서 블록을 드래그해 순서를 변경하세요.
  • 휴지통 아이콘으로 제거할 수 있어요. 단, 잠긴 블록은 예외예요(아래 참조).
  • 눈 모양 토글로 대부분의 블록을 표시/숨기기할 수 있으며, 이는 블록을 삭제하지 않고 구매자에게만 숨겨요. 일부 구조 블록은 숨길 수 없어요: Cart items, Checkout button, Product 행이에요.

​
잠긴 블록

일부 블록은 순서 변경은 가능하지만 삭제할 수 없어서, 핵심 장바구니 기능(예: 체크아웃)이 실수로 제거되지 않아요:
  • Cart items
  • Checkout button

​
기본 블록

새 장바구니는 바로 작동하는 기본 레이아웃으로 시작해요:
  • 채워진 장바구니: Header, Banner, Cart items, Summary, Checkout button
  • 빈 장바구니: Header, Empty cart 블록
빈 장바구니 상태는 빈 레이아웃 전체를 의미해요. Empty cart 블록은 그 안의 블록 하나예요. 차이점은 장바구니는 어떻게 작동하나요?를 참고하세요.

​
각 블록을 몇 개까지 추가할 수 있나요

제한은 장바구니 단위가 아니라 장바구니 상태 단위로 계산돼요. 채워진 장바구니와 빈 장바구니에 각각 별도의 허용량이 있으므로, 하나의 장바구니가 채워진 레이아웃에 배너 3개, 빈 레이아웃에 3개를 더 가질 수 있어요. 대부분의 블록은 상태당 1개로 제한돼요. 예외는 다음과 같아요:

​
Content, Design, Code

각 블록은 에디터에서 최대 세 가지 영역을 통해 구성돼요:
  • Content: 블록의 설정(텍스트, 상품 선택, 임계값 등)이에요. Custom code 블록만 예외인데, 블록 자체가 코드이기 때문에 Content 패널이 없어요.
  • Design: 전역 디자인 설정 위에 적용되는 블록별 스타일이에요. 설정 패널이 아예 없는 Custom code를 제외한 모든 블록에 있어요.
  • Code: 커스텀 템플릿으로 블록의 기본 렌더링을 재정의해요. 대부분의 블록이 지원하지만 일부는 지원하지 않아요.

​
마켓, 국가, 통화별 표시 또는 숨기기

일부 블록은 구매자에 따라 다른 설정을 표시하거나 완전히 숨길 수 있어요. 이는 모든 사람에게 블록을 켜거나 끄는 사이드바 눈 모양 토글과는 별개예요. 현재 지원되는 조건 유형: Shopify 마켓, 고객 국가, 고객 통화(각각 In 또는 Not in 선택 가능). 장바구니 총액과 장바구니 내용물은 조건 유형이 아니에요. 지출/수량 진행률에는 Rewards의 티어 임계값을 사용하고, 에디터로 표현할 수 없는 규칙이 필요하면 Cart SDK를 사용하세요. 조건은 순서가 있는 목록이에요: 가장 먼저 일치하는 조건이 적용돼요. 구체적인 규칙을 All buyers 포괄 조건 위에 배치하세요. 아무것도 일치하지 않으면 해당 구매자에게 블록이 아무것도 렌더링하지 않아요. 현재 에디터에서 전체 조건 UI는 Rewards 블록에 제공돼요: 마켓, 국가, 통화별로 다른 티어 세트를 설정할 수 있어요. 다른 블록은 단일 “모든 구매자” 구성을 사용하거나 아직 이 시스템에 참여하지 않아요. 에디터 미리보기는 실제 구매자를 평가하지 않아요. 패널에서 조건을 선택하면 해당 변형을 미리 볼 수 있어요.

​
모든 블록

구조
  • Header: 제목, 아이템 수, 로고, 닫기 컨트롤이 상단에 고정돼요.
  • Cart items: 고객이 장바구니에 추가한 아이템으로, 라인별로 반복돼요.
  • Subscription upgrade: 라인을 구독으로 전환하도록 제안하는 하위 블록이에요.
  • Summary: 총액, 절약 금액, 적용된 할인이에요.
  • Checkout button: 체크아웃으로 이어지는 기본 클릭 유도 버튼이에요.
  • Empty cart: 장바구니가 비어 있을 때 표시되는 콘텐츠예요.
  • Express payments: 장바구니 내 빠른 결제 버튼(Shop Pay, PayPal 등)이에요.
머천다이징
  • Upsells: 전략에 따라 선택된 상품 추천이에요.
  • Product add-on: 애드온으로 제공되는 특정 상품 하나예요.
  • Rewards: 무료 배송이나 사은품 같은 티어형 리워드예요.
  • Shipping protection: 선택형 배송 보호 애드온이에요.
구매자 입력
  • Discount code: 할인 코드를 적용하는 필드예요.
  • Notes: 주문 메모 필드예요.
콘텐츠
  • Banner: 메시지 배너로, 선택적으로 카운트다운 타이머를 포함해요.
  • Image: 단일 이미지 또는 결제 아이콘 같은 호스팅된 프리셋이에요.
  • Custom code: 장바구니 어디에나 넣을 수 있는 커스텀 HTML 또는 React예요.
확장

​
각 섹션에서 사용 가능한 블록

각 섹션마다 사용 가능한 블록 세트가 달라요. 이렇게 하면 레이아웃이 명확해지고 복잡함이 줄어들어요. 이 중 일부 블록은 특정 상태에서만 사용할 수 있어요(예: Empty cart는 빈 상태에서만). 장바구니는 어떻게 작동하나요?를 참고하세요.

​
블록 유효성 검사 오류

블록 설정에 잘못된 값이 있으면 사이드바에서 해당 블록 이름 옆에 작은 빨간 점이 표시돼요. 이 점은 문제를 해결할 때까지 사라지지 않아요. 닫을 수 있는 알림이 아니에요. 어떤 블록에든 오류가 있는 동안에는 저장이 차단돼요. Save 버튼은 클릭할 수 있지만, 선택하면 오류 토스트(“Fix the errors in your cart blocks before saving”)가 표시되고 문제가 있는 첫 번째 블록으로 이동해 설정을 열어 강조된 필드를 수정할 수 있게 해요. Publish는 저장되지 않은 변경 사항이 없어야 하므로, 정상적인 저장이 완료될 때까지 사용할 수 없어요. 잘못된 필드를 수정하면 점이 저절로 사라지고 저장이 정상적으로 진행돼요.
숨겨진 블록도 유효성 검사 대상이에요. 숨긴 블록도 잘못된 설정을 가질 수 있고, 오류 점을 표시하며, 보이는 블록과 똑같이 저장을 차단해요. 따라서 저장이 차단됐는데 보이는 블록이 모두 정상이라면 숨겨진 블록을 확인하세요.