첫 카운트다운 만들기

이 안내에서는 가장 일반적인 카운트다운 하나를 완성합니다. 제품 페이지에서 고정된 종료일까지 카운트다운하고, 끝나면 사라지는 세일 타이머입니다. 고급 옵션은 사용하지 않고 콘텐츠, 시간 설정, 디자인, 표시까지 빌더의 모든 부분을 다룹니다.

먼저 앱 임베드를 켜 두세요. 그렇지 않으면 여기서 만든 카운트다운이 스토어프런트에 렌더링되지 않습니다.

1. 새 카운트다운 시작하기

   앱을 엽니다. 대시보드의 두 번째 설정 카드에서 Create countdown을 클릭하세요. (Countdowns 페이지에서는 Create countdown 버튼이 같은 역할을 합니다.)

   

   대시보드의 Create a countdown 카드에서 카운트다운을 시작하세요.

2. 템플릿 선택하기

   Countdown templates 페이지가 열리며, 상단에 Countdown timer, Delivery date, Stock countdown, Cart countdown의 네 가지 유형 탭이 있습니다. Countdown timer를 그대로 두세요.

   디자인을 둘러보거나 이름 또는 시즌으로 검색할 수 있습니다. black friday를 입력하면 Onyx, Ribbon 같은 이름이어도 해당 시즌의 디자인이 검색됩니다. 마음에 드는 디자인을 찾았다면 카드의 Select를 클릭하세요.

   

   템플릿 그리드에서 디자인을 선택하세요. 나중에 모든 부분을 변경할 수 있습니다.

3. 카운트다운 이름 정하기

   빌더가 열리면 선택한 디자인이 미리 보기에 이미 표시되어 있습니다. 상단에서 카운트다운 이름을 정하세요. “Spring sale timer” 같은 이름이면 됩니다. 이 이름은 본인만 확인하는 용도이며 방문자에게는 표시되지 않습니다.

4. 타이머 텍스트 작성하기

   Settings 탭에서 Content 섹션을 열고 타이머에 표시할 내용을 설정하세요.

   • Title — 큰 글씨로 표시되는 줄. 예: 🔥 Hurry up! 🔥
   • Subtitle — 숫자 위에 표시되는 줄. 예: Sale ends in:
   • Timer — 각 숫자 아래에 표시되는 라벨: Days, Hours, Min, Sec

   

   Content 섹션에서 타이머의 모든 텍스트를 설정합니다.

5. 종료일 설정하기

   계속 Settings 탭에서 Setting timer 섹션을 엽니다. Time type은 기본값인 Countdown to a date로 두세요. 이 예시에 필요한 모드입니다.

   Date between에서 End를 세일이 끝나는 시점으로 설정하세요. 타이머가 지금부터 작동하도록 하려면 Start를 비워 두고, 세일이 실제로 시작될 때까지 타이머를 숨기려면 Start를 입력하세요.

   

   Countdown to a date가 기본 Time type입니다. End 날짜를 마감 시점으로 설정하세요.

6. 0이 되었을 때의 동작 선택하기

   날짜 아래에서 When countdown timer end를 Hide countdown block으로 설정하세요. 마감 시간이 지나면 타이머가 00:00:00에 멈춰 있지 않고 사라집니다.

   나머지 두 가지 옵션은 타이머 종료 시 동작에서 설명합니다.

7. 표시 위치 선택하기

   Display 탭으로 이동하세요. Show countdown on에서 Product page를 선택합니다. 그러면 모든 제품 페이지의 장바구니에 담기 영역 바로 아래에 타이머가 배치됩니다.

   

   Product page를 선택하면 모든 제품 페이지에 타이머가 표시됩니다.

8. 적합한 제품으로 제한하기 (선택 사항)

   표시 위치 위의 Conditions 섹션에서 어떤 제품에 타이머를 표시할지 정합니다. All Products로 두면 전체 카탈로그에 적용되며, 컬렉션, 특정 제품, 고객 그룹을 대상으로 바꿀 수도 있습니다. 표시 조건을 참고하세요.

9. 활성 상태로 저장하기

   Save를 클릭하세요. 상태 컨트롤이 Draft가 아니라 Active로 되어 있는지 확인하세요. 초안은 저장만 되고 렌더링되지 않습니다.

   

   상태를 Active로 설정하고 카운트다운을 저장하세요.

10. 스토어프런트에서 확인하기

    새 탭에서 라이브 스토어프런트의 아무 제품 페이지나 열어 보세요. 대시보드의 Open my store 버튼으로 바로 이동할 수 있습니다. 장바구니에 담기 버튼 아래에 타이머가 카운트다운되는 모습이 보여야 합니다.

    휴대폰에서도 확인하거나 브라우저 창 크기를 줄여 보세요. 테마마다 작은 화면에서 제품 페이지를 다르게 배치하므로, 대부분의 방문자가 보게 될 화면에서 타이머가 어떻게 보이는지 확인해 볼 만합니다.

    

    라이브 제품 페이지에 표시된 완성된 타이머

팁

제품 페이지에 타이머가 나타나고 초가 줄어들고 있다면 모든 것이 올바르게 연결된 것입니다. 임베드가 켜져 있고, 카운트다운이 활성 상태이며, 조건이 일치합니다.

참고

타이머가 보이지 않나요? 카운트다운이 표시되지 않을 때를 확인해 보세요. 짧은 체크리스트이며 앞의 두 항목만으로 대부분 해결됩니다.

다음 단계

• 카운트다운 작동 방식
• 카운트다운 디자인하기
• 표시 조건
• 카운트다운 유형