Skip to main content
빈 장바구니(Empty cart) 블록은 장바구니에 상품이 없을 때 표시되는 콘텐츠로, 일반적으로 메시지와 쇼핑 계속하기 버튼으로 구성되어 있어 빈 드로어도 여전히 유용하고 브랜드에 어울리게 유지해 줘요. 이 블록은 장바구니의 빈 상태에서만 나타나며, 다른 블록(예: 헤더)도 같은 상태에서 함께 배치할 수 있어요.
빈 상태 메시지와 쇼핑 계속하기 콜투액션을 보여주는 빈 장바구니 블록

​
동작 방식

  • 이 블록은 장바구니가 비어 있을 때만 나타나요. 쇼핑객이 상품을 추가하는 즉시 장바구니가 채워진 상태로 전환되고, 이 블록은 채워진 장바구니 레이아웃으로 대체돼요.
  • 에디터에서는 CTA 링크가 비활성화되어 있어, 디자인 중에 클릭해도 다른 페이지로 이동하지 않아요.

​
설정

​
배치 및 제한

  • 영역: 본문(body).
  • 최대: 장바구니 상태당 1개.
  • 상태: 빈 장바구니 전용. 이 블록은 채워진 상태에서는 나타나지 않아요. 새 장바구니에는 기본적으로 빈 상태에 헤더도 포함돼요. 자세한 내용은 장바구니는 어떻게 작동하나요?를 참고하세요.
  • 새 장바구니에 기본으로 추가돼요. 잠겨 있지 않으므로 제거하거나 숨길 수 있어요.

​
커스텀 템플릿

코드(Code) 탭에서 커스텀 템플릿을 지원하며, 이 블록의 기본 마크업을 여러분의 JSX로 대체해요. 이 블록이 받는 props는 다음과 같아요.
이 블록은 장바구니가 비어 있을 때만 렌더링되므로 props에 cart 객체가 없어요. href는 스크립트 기반 내비게이션 대신 실제 <a> 요소로 렌더링하고, text는 이미 살균 처리된 HTML이므로 dangerouslySetInnerHTML로 렌더링하세요.

​
디자인

설정 패널의 Design 섹션에서 이 블록의 스타일을 지정하세요. 이는 전역 디자인 위에 적용되는 블록별 재정의이며, 비워 두면 전역 디자인으로 대체돼요.

​
텍스트

Design의 Text 섹션에서 두 요소의 타이포그래피를 제어할 수 있어요. Text element 선택기로 두 요소를 전환하세요. Message — 빈 상태 메시지 텍스트예요. 굵기와 텍스트 색상은 (Settings 탭의) 위쪽 리치 텍스트 에디터에서 설정하며, 이곳에서 설정하지 않아요. Button label — 쇼핑 계속하기 버튼의 텍스트예요. 텍스트 색상은 Design의 Button 섹션에서 설정해요.

​
버튼

Button 섹션에서는 CTA 버튼을 전역 버튼 디자인과 별도로 스타일링할 수 있어요. Default / Hover 토글을 사용해 두 상태를 전환하세요. 디자인 설정이 무엇인가요? 자세한 내용은 여기에서 확인하세요: 디자인 설정.