앱도 코드 편집기도 없이 붙이는 Shopify 카운트다운

올릴 요금제는 없고, 그 밖에 있는 넷

Shopify 는 코드 편집기와 테마 편집기, 사용자 지정 Liquid 섹션을 요금제 조건 없이 문서로 설명합니다. Basic 요금제 페이지는 Basic 에 온라인 스토어가 들어 있고 그것을 "through Shopify's built-in theme editor", 곧 Shopify 에 내장된 테마 편집기로 손본다고 적습니다. 그러니 Basic 이상에서는 살 것이 없습니다. 지금 있는 아홉 요금제 중 넷은 이 이야기 밖이고, 이유가 둘로 갈립니다.

넷 중 둘은 스토어 지면이 아예 없습니다. Lite 요금제 페이지는 "The Lite plan doesn't include the online store sales channel" 이라고 적어 온라인 스토어 판매 채널이 빠져 있음을 밝히고, Agentic 요금제 페이지는 "aren't available with the Agentic plan" 목록의 첫 줄에 "Online Store" 를 올려 둡니다. 테마도 상품 페이지도 없으니 타이머가 그려질 자리가 없습니다. 나머지 둘은 스토어는 있는데 손댈 여지가 거의 없습니다. Starter 는 "Other themes and customization options aren't available on the Starter plan" 이라 적고, Retail 은 "You can't use any other theme with the Retail plan" 과 "Further customization options aren't available on the Retail plan" 을 함께 적습니다. 둘 다 쓸 수 있는 테마를 Spotlight 하나로 제한하고, 코드 편집기에 닿을 수 있는지는 어느 페이지도 말하지 않으며, 둘 다 신규 스토어에는 닫혀 있습니다. 그래서 Starter 와 Retail 은 불가가 아니라 확인 안 됨입니다.

붙여넣기 전에 마감을 어디에 둘지 정한다

카운트다운은 기능 하나가 아니라 배치 결정입니다. 구매 버튼 아래에 있으면 쇼퍼가 이미 하고 있는 질문에 답합니다. 스토어 상단 띠에 있으면 아직 상품을 고르지 않고 컬렉션을 훑는 사람에게 닿습니다. 장바구니 페이지에 있으면 고르고 나서 망설이는 사람에게 말을 겁니다. 하나만 고르세요. 한 여정에 시계가 셋이면 정보로 읽히던 것이 압박으로 읽힙니다.

장바구니 줄에서 사람들이 놀랍니다. Shopify 는 마켓플레이스 테마에 고객 계정과 기프트카드, 체크아웃을 뺀 모든 템플릿에서 섹션을 지원하라고 요구하므로, 장바구니 페이지도 상품 페이지처럼 사용자 지정 Liquid 섹션을 받습니다. 진짜 벽은 체크아웃이고, 테마 수준의 코드는 거기에 닿지 않습니다.

이 지면에서 지금 돌고 있는 시계

코드 파일을 열지 않고 테마 편집기에서 넣는다

1. Shopify 주소 두 개를 같은 site id 에 올린다

   Shopify 스토어에는 웹 주소가 둘이고, 위젯은 그 둘이 같은 가게라는 걸 알 방법이 없습니다. 하나는 기본 도메인으로 지정한 커스텀 도메인이고, Shopify 는 고객이 스토어를 둘러볼 때 이 주소를 보여 주면서 나머지 주소는 여기로 넘깁니다. 다른 하나는 스토어를 만들 때 받은 .myshopify.com 주소인데, Shopify 가 딱 한 번 바꿔 주고 그다음에는 다시 바꿀 수 없습니다. BootSignal 대시보드에 둘 다 추가하세요. 위젯은 location.hostname 을 한 site id 아래 등록된 주소들과 맞춰 보고, 빠뜨린 주소로 열린 페이지에서는 아무것도 그리지 않습니다. 그 한 번의 이름 변경을 쓸 일이 생기면, 바꾸기 전에 새 주소를 먼저 등록해 두세요.

2. 테마 편집을 열고 상품 템플릿으로 바꾼다

   Shopify 관리자에서 온라인 스토어(Online Store)로 들어가 테마를 찾고 테마 편집(Edit theme)을 누릅니다. 위쪽 메뉴 가운데의 템플릿 드롭다운에서 상품 템플릿(templates/product.json)으로 바꾸세요. 첫 페이지가 아니라 쇼퍼가 상품에서 보는 화면을 편집하고 있어야 합니다.

3. 사용자 지정 Liquid 섹션을 더하고 두 줄을 붙여넣는다

   왼쪽 사이드바에서 섹션(Sections) 아이콘을 누르고 섹션 추가(Add section)를, 이미 있는 섹션 안이라면 블록 추가(Add block)를 눌러 사용자 지정 Liquid 를 고릅니다. 시계가 있어야 할 자리, 보통 가격이나 장바구니 담기 버튼 바로 아래로 끌어다 놓으세요. Liquid 코드 칸에 로더와 마운트 요소를 붙여넣고 YOUR_SITE_ID 를 대시보드가 도메인 옆에 보여 주는 값으로 바꾼 다음 저장(Save)합니다. 숫자 아래 단위 이름의 언어는 data-lang 이 정하고, 아래 스니펫은 ko 로 맞춰 두었습니다.

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="ko" defer></script>
   
   <div data-bootsignal="countdown"
        data-target="2026-12-31T23:59:59"
        data-expired="This sale has ended."></div>

   복사

4. data-target 에 진짜 마감 시각을 적는다

   자리표시 시각을 할인이 실제로 끝나는 순간으로 바꾸고 모양은 그대로 둡니다. 그다음 data-expired 에는 시계가 0에 닿은 뒤 지면에 남을 문장을 적습니다. 아래 값은 예시라서, 쇼퍼에게 보일 문장은 우리말로 다시 쓰면 됩니다.

   <div data-bootsignal="countdown"
        data-target="2026-09-01T23:59:59"
        data-expired="Sale pricing has ended. Free shipping is still on."></div>

   복사

5. 숫자가 실제로 줄어드는지는 라이브에서 본다

   테마 편집기는 섹션 내용 위에 자기 오버레이를 그리므로 배치를 보는 도구이고 동작을 보는 도구가 아닙니다. 저장한 뒤 실제 상품 페이지를 평범한 탭에서 열어 숫자가 줄어드는지 보세요. 아무것도 그려지지 않으면 호스트네임을 등록된 도메인과 먼저 맞춰 봅니다.

• 사용자 지정 Liquid 설정은 내용을 50kb 로 끊습니다. 위젯 스니펫은 그 근처에도 가지 않습니다.
• 잘못된 Liquid 는 저장에서 오류를 내고, 닫히지 않은 HTML 태그는 자동으로 닫힙니다. 반쯤 복사된 스니펫은 구조가 바뀔 수 있으니 닫는 </div> 와 </script> 까지 함께 붙여넣으세요.
• 이 설정에서는 {% javascript %} 나 {% stylesheet %} 태그를 쓸 수 없습니다. 그래서 저장을 통과하는 모양은 평범한 HTML 과 <script src> 뿐인데, 로더가 정확히 그 모양입니다.
• 스크립트 태그의 defer 는 그대로 두세요. Shopify 의 Theme Check 는 파서를 막는 스크립트를 스토어가 느려지는 원인으로 지적합니다.

마감이지 다크패턴이 아니다

급하다는 말은 사실일 때만 제 값을 합니다. 일요일 자정에 세일이 끝나고, 시계가 그렇게 말하고, 월요일에 다시 온 사람이 예상한 가격을 봅니다. 다른 종류의 타이머는 언제 들어가도 다섯 시간이 남아 있고, 브라우저를 새로 열면 처음으로 돌아가며, 스토어의 어떤 사건과도 관계가 없습니다. 알아챈 쇼퍼는 그 제안만 건너뛰는 게 아니라 지면의 나머지도 믿지 않게 됩니다.

BootSignal 은 앞쪽만 합니다. data-target 은 고정 시각이라 모두가 같은 순간을 향해 세고 0에도 함께 닿습니다. 방문자별 모드도, 재시작도 없습니다. 세일을 연장하려면 시각을 고쳐 저장하는데, 그건 위젯이 알아서 도는 반복이 아니라 내가 내린 결정입니다.

카탈로그 전체가 같은 규칙을 따릅니다. 소셜 프루프 토스트는 사이트가 이미 기록한 활동만 다시 보여 주고, 일어나지 않은 구매를 만들어 낼 방법이 없습니다. 스토어에서는 그게 사회적 증거와 소품을 가르는 선입니다.

테마에 사용자 지정 Liquid 섹션이 없다면

사용자 지정 Liquid 는 Shopify Theme Store 요구사항이고 플랫폼의 보장은 아닙니다. 직접 만든 테마, 마켓플레이스 밖에서 받은 테마, 오래된 vintage 테마는 이 섹션을 빼놓을 수 있고, 그럴 때 남는 것이 코드 편집기입니다. Shopify 관리자에서 온라인 스토어(Online Store)를 열어 테마를 찾고 가로 메뉴("...") 아이콘에서 코드 편집(Edit code)을 고릅니다. 돌아갈 곳을 만들어 두려면 테마를 먼저 복제하세요.

여기서는 두 조각을 갈라 둡니다. 로더는 레이아웃(Layout) 폴더의 theme.liquid, 닫는 </body> 태그 앞으로 갑니다. 모든 페이지에서 한 번씩 불려야 하니까요. 마운트 요소는 아닙니다. theme.liquid 는 전역 레이아웃이라 거기 붙인 카운트다운은 정책 페이지와 검색 결과에까지 나옵니다.

그러니 찾을 것은 템플릿이 아니라 섹션 파일입니다. Online Store 2.0 이나 Horizon 세대 테마의 상품 템플릿은 templates/product.json 이고, Shopify 는 "If you're using a JSON template, then any HTML or Liquid code needs to be included in a section" 이라고 적어 두었습니다. JSON 에 마크업을 넣으면 파일이 깨지고 저장이 실패합니다. 섹션(Sections) 폴더를 열어 상품 페이지를 그리는 섹션을 편집하세요. Dawn 이라면 테마 편집기의 섹션 목록에 제품 정보 로 보입니다(섹션 이름은 테마마다 자기 번역을 쓰므로 다른 테마는 다르게 보일 수 있습니다). 블로그 글도 같은 규칙이고, Dawn 의 파일은 sections/main-article.liquid 입니다.

<div data-bootsignal="countdown"
     data-target="2026-09-01T23:59:59"
     data-expired="Sale pricing has ended."></div>

theme.liquid 에 들어가도 되는 마운트 하나

스토어 전체에 알리는 메시지는 예외입니다. 모든 페이지의 모든 쇼퍼가 세일이 일요일에 끝난다는 것을 알아야 한다면 전역 레이아웃이 제자리이고, 공지 바가 그 일을 하려고 만들어졌습니다. theme.liquid 의 로더 옆, 닫는 </body> 태그 앞에 붙여넣고, 새 공지마다 data-id 를 새로 주세요.

<div data-bootsignal="announce"
     data-message="Summer sale ends Sunday at midnight"
     data-link="/collections/sale"
     data-link-text="Shop the sale"
     data-id="summer-2026"></div>

바와 시계는 말을 맞춰 두세요. 위에서는 일요일이라고 하고 아래 시계는 토요일을 세는 상태라면 둘 다 없는 편이 낫습니다.

돌리는 데 드는 값

세일 주간은 트래픽이 튀는 주간이고, 사용량으로 값을 매기는 위젯에서는 청구서도 같이 튀는 주간입니다. 여기서 계량기는 도메인입니다. 등록 도메인 하나에 월 $20 또는 연 $200, 모든 위젯 포함이고 트래픽이나 페이지뷰로 세는 항목이 없습니다. 그래서 상품 페이지의 시계와 그 위의 공지 바는 조용한 화요일과 1년 중 가장 큰 날에 같은 값입니다. 그 값 뒤의 카탈로그는 유료 위젯 31개와 무료 브라우저 도구 31개이고, 나중에 나오는 위젯도 포함입니다. 스토어를 하나 더 열면 도메인이 하나 더이고 값은 대시보드에서 매겨집니다. 요금 전체에 자세히 있고, 값을 나란히 놓고 본 글은 비교 지면에 있습니다.

0에 닿았을 때 남는 문장을 직접 쓴다

대부분은 data-target 은 신중하게 정하고 data-expired 에는 기억에 남지 않는 말을 적습니다. 순서가 뒤바뀐 것입니다. 만료 문구는 세일이 끝난 순간부터 내가 알아차릴 때까지 상품 페이지에 앉아 있고, 바쁜 스토어에서는 그게 며칠입니다. 가장 오래 걸려 있는 문장이라는 뜻입니다.

그 문장에 일을 주세요. 세일이 끝났다는 말은 늦었다는 사실만 알려 줍니다. 세일가는 끝났지만 무료 배송은 그대로라는 말은, 이미 열어 둔 페이지에 머물 이유를 줍니다.

타이머가 안 보일 때

1. 주소창의 호스트네임을 등록된 도메인과 맞춰 봅니다. 커스텀 도메인과 .myshopify.com 양쪽으로 응답하는 스토어는 둘 다 등록되어 있어야 합니다.
2. 로더가 그 페이지에 딱 한 번 있는지 확인합니다. 사용자 지정 Liquid 섹션과 theme.liquid 에 각각 붙여넣으면 한 상품 페이지에 사본이 둘입니다.
3. 내가 붙여넣은 것이 아니라 Liquid 코드 칸에 저장된 것을 봅니다. 닫히지 않은 태그는 저장할 때 대신 닫히므로, 닫는 </div> 를 잃은 스니펫은 구조가 바뀐 채로 돌아옵니다.
4. 마운트가 지금 보고 있는 그 템플릿에 있는지 확인합니다. 홈페이지 템플릿에 더한 섹션은 상품에 나오지 않고, 이 항목이 사람들의 시간을 가장 많이 먹습니다.
5. 붙여넣은 뒤 테마가 업데이트됐는지 물어봅니다. Shopify 는 코드 수정이 테마 업데이트와 호환되지 않으면 업데이트된 사본에서 수정분이 전부 제거된다고 경고하고, 사용자 지정 Liquid 섹션은 어떻게 되는지까지는 밝히지 않으니, 업데이트마다 상품 페이지를 한 번 열어 보세요.

테마에 남는 설정은 붙여넣은 것 자체뿐입니다. 섹션을 다시 더하고 시각을 다시 적으면 같은 시계가 돌아오니, 테마 업데이트는 손실이 아니라 번거로움입니다.