카운트다운 작동 방식
모든 카운트다운을 구성하는 세 가지 요소인 콘텐츠와 시간 설정, 표시, 디자인을 설명합니다.
Countdown Timer Bar Samita의 모든 카운트다운은 네 가지 유형 중 어떤 것을 선택하든 같은 요소로 구성됩니다. 이 요소들을 이해하고 나면 나머지 문서는 그중 하나에 대한 세부 설명일 뿐입니다.
1. 표시할 내용과 실행 시점 — Settings 탭
섹션 제목: “1. 표시할 내용과 실행 시점 — Settings 탭”Settings 탭에는 카운트다운의 콘텐츠와 시간 설정이 있습니다.
콘텐츠는 방문자가 읽는 텍스트입니다. 타이머에서는 제목과 부제목, 배송 날짜에서는 배송 메시지, 재고 바에서는 재고 메시지가 해당합니다. 텍스트 필드에는 {stock_number} 또는 {delivered_max_date} 같은 변수를 넣을 수 있으며, 앱이 페이지를 불러올 때 실제 값으로 바꿔 줍니다.
시간 설정이 카운트다운을 카운트다운답게 만듭니다. 유형에 따라 다음과 같이 달라집니다.
| 유형 | 시간 설정은… |
|---|---|
| Countdown timer | Time type: 고정된 종료일, 방문자별 분 단위, 또는 일일 반복 시간대 |
| Estimated delivery date | 발송 및 배송 일수 범위, 영업일, 휴일, 마감 시간 |
| Stock countdown | 시계가 없음. 시간이 아니라 재고를 카운트합니다 |
| Cart countdown | 방문자의 장바구니가 확인된 시점부터 시작하는 분 단위 Countdown duration |
2. 표시되는 위치 — Display 탭
섹션 제목: “2. 표시되는 위치 — Display 탭”Display 탭에서는 카운트다운을 누구에게 보여 주고 어디에 배치할지 정합니다.
Conditions로 제품, 컬렉션, 페이지 유형, 고객, 언어, 국가별로 대상을 좁힐 수 있습니다. 목록의 모든 조건은 All conditions 또는 Any condition으로 연결되며, 현재 페이지가 조건을 충족할 때만 카운트다운이 렌더링됩니다.
Display position은 페이지에 배치하는 설정입니다. Product page를 선택하면 앱이 장바구니에 담기 영역 바로 아래에 카운트다운을 자동으로 배치합니다. 홈페이지 섹션, 컬렉션 배너, 사용자 지정 템플릿 같은 다른 위치에는 Shortcode를 복사해서 테마 앱 블록에 붙여넣으세요.
Device targeting으로 데스크톱 또는 모바일에만 표시하도록 제한할 수도 있습니다.
전체 내용은 표시 개요를 참고하세요.
3. 보이는 모양 — Design 탭
섹션 제목: “3. 보이는 모양 — Design 탭”Countdown timer와 Estimated delivery date에는 색상, 글꼴, 배경, 테두리, 패딩, 요소별 스타일을 설정할 수 있는 Design 탭이 있습니다. Stock countdown과 Cart countdown은 (더 간단한) 디자인 옵션이 Settings 탭 안에 있습니다.
모든 유형의 마지막에는 컨트롤로 설정할 수 없는 부분을 위한 Custom CSS (Developer Zone) 상자가 있습니다. 카운트다운 디자인하기를 참고하세요.
Active 또는 Draft
섹션 제목: “Active 또는 Draft”위 설정과는 별개로, 각 카운트다운에는 상태가 있습니다.
- Active — 스토어프런트에 게시된 상태이며 시간 설정과 조건에 따라 표시됩니다.
- Draft — 저장되어 편집할 수 있지만 렌더링되지는 않습니다.
저장하기 전에 빌더에서 설정하며, 나중에 카운트다운 목록에서 바꿀 수도 있습니다.
스토어프런트에서 실제로 일어나는 일
섹션 제목: “스토어프런트에서 실제로 일어나는 일”방문자가 페이지를 불러오면 앱 임베드 스크립트가 활성 카운트다운 중 해당 페이지와 일치하는 것을 확인하고, 방문자의 브라우저에서 남은 시간을 계산한 뒤 일치하는 카운트다운을 렌더링합니다. 테마에 미리 반영되는 것은 없으므로 앱에서 저장한 변경 사항은 테마를 다시 게시하지 않아도 바로 나타납니다.
자세한 내용은 작동 방식을 참고하세요.