메인 콘텐츠로 건너뛰기
Banner 블록은 장바구니 내부에 표시되는 메시지 스트립으로, 프로모션, 배송 안내, 또는 무료 배송 알림, 세일 공지, “장바구니 예약” 안내 같은 긴급성 메시지에 유용해요. 실시간 카운트다운 타이머를 포함할 수 있어요.
예약 카운트다운 메시지를 보여주는 Aftersell 장바구니 드로어의 배너 블록

동작 방식

  • 카운트다운은 세 가지 조건이 모두 충족될 때만 작동해요: 타이머가 활성화되어 있고, 텍스트에 {{timer}} 토큰이 포함되어 있으며, 지속 시간이 0보다 커야 해요. 그렇지 않으면 배너는 정적 텍스트로 표시돼요.
  • 타이머는 MM:SS 형식으로 카운트다운되며 구매자의 탭에 기억돼요(세션 동안 스토어 내 페이지 이동에도 유지됨). 따라서 페이지마다 다시 시작되지 않아요.
  • 타이머가 00:00에 도달하면 배너 전체가 사라져서, 구매자가 0이 된 시계를 보는 일이 없어요.
  • 에디터 미리보기에서는 타이머가 반복되고 배너가 숨겨지지 않으므로 계속 스타일을 다듬을 수 있어요.

설정

텍스트는 번역할 수 있어요.

배치 및 제한

  • 영역: 모든 위치(상단, 본문, 하단).
  • 최대 개수: 장바구니 상태별 3개 — 채워진 장바구니와 빈 장바구니에 각각 별도의 허용량이 있어요.
  • 상태: 채워진 장바구니와 빈 장바구니 모두.
  • 새 장바구니에는 기본적으로 추가돼요. 잠겨 있지 않으므로 제거하거나 숨길 수 있어요.

커스텀 템플릿

Code 탭에서 커스텀 템플릿을 지원하며, 이 블록의 기본 마크업을 여러분의 JSX로 대체해요. 다음은 템플릿이 받는 props예요. 별도의 timer prop은 없어요. 카운트다운이 text에 자동으로 삽입되므로 text를 렌더링하는 것만으로 충분해요.
이 조기 반환(early return)이 중요해요. 이것이 없으면 타이머가 만료된 후에도 배너가 계속 렌더링되고, 토큰이 이미 대체된 상태이므로 구매자에게 멈춰 있는 00:00이 표시돼요.

디자인

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

텍스트

Design의 Text 섹션에서 배너 메시지의 타이포그래피를 제어할 수 있어요. 굵기와 텍스트 색상은 (Settings 탭의) 위쪽 리치 텍스트 에디터에서 설정하며, 이곳에서 설정하지 않아요.

스타일

디자인 설정이 무엇인가요? 자세한 내용은 여기에서 알아보세요: 디자인 설정.