Shopify のカウントダウンタイマー、どこに置くと効くのか

上げるプランはなく、その外にある4つ

Shopify はコードエディタとテーマエディタ、カスタム Liquid のセクションを、プラン条件を挙げずに文書で説明しています。Basic のプランページは、Basic にオンラインストアが含まれていて、それを "through Shopify's built-in theme editor"、つまり Shopify に組み込まれたテーマエディタで手直しすると書いています。だから Basic から上では買うものがありません。いまある9つのプランのうち4つはこの話の外で、理由が2つに分かれます。

4つのうち2つは、ストアの表側がありません。Lite のプランページは "The Lite plan doesn't include the online store sales channel" と書いてオンラインストア販売チャネルが外れていることを示し、Agentic のプランページは "aren't available with the Agentic plan" の一覧の先頭に "Online Store" を置いています。テーマも商品ページも無いので、タイマーが描かれる場所がありません。残りの2つはストアはあるのに、手を入れる余地がほとんどありません。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 は不可ではなく未確認です。

貼る前に、締め切りをどこへ出すか決める

カウントダウンは機能が1つ増えることではなく、置き場所を決めることです。購入ボタンの下にあれば、買い物客がすでに抱いている問いに答えます。ストア上部の帯にあれば、まだ商品を選ばずコレクションを眺めている人に届きます。カートのページにあれば、選び終えて迷っている人に話しかけます。1つだけ選んでください。ひとつの道のりに時計が3つあると、情報だったものが圧力に変わります。

カートの行で驚かれます。Shopify はマーケットプレイスのテーマに対して、顧客アカウントとギフトカード、チェックアウトを除くすべてのテンプレートでセクションを扱えることを求めているので、カートのページも商品ページと同じようにカスタム Liquid のセクションを受け取ります。本当の壁はチェックアウトで、テーマ側のコードはそこには届きません。

このページで動いている時計

コードのファイルを開かず、テーマエディタから入れる

1. Shopify の住所2つを同じサイト ID にまとめる

   Shopify のストアにはウェブの住所が2つあり、ウィジェットにはそれが同じ店だと分かりません。1つはプライマリドメインに指定した独自ドメインです。Shopify はこの住所を "to customers as they browse your online store"、つまり買い物客がストアを見て回るあいだ表に出す住所として扱い、ほかの住所はここへ転送します。もう1つはストアを作ったときに付いてきた .myshopify.com の住所で、Shopify が名前を変えてくれるのは1度きり、そのあとは二度と変えられません。BootSignal ダッシュボードで両方を追加してください。ウィジェットは location.hostname を1つのサイト ID に登録された住所と照らし合わせるので、登録し忘れたほうで配信されたページでは何も描きません。その1度の変更を使うときは、切り替える前に新しい住所を登録しておきます。

2. テーマエディタを開いて商品テンプレートへ切り替える

   Shopify 管理画面で「オンラインストア」（Online Store）に進み、テーマを見つけて「テーマを編集」（Edit theme）を押します。上部メニューの中央にあるテンプレートのドロップダウンで商品テンプレートに切り替え、トップページではなく、買い物客が商品で見る画面を編集している状態にします。

3. カスタム Liquid のセクションを足して2行を貼る

   左のサイドバーでセクションのアイコンを押し、「セクションを追加」（Add section）、既存のセクションの中なら「ブロックを追加」（Add block）からカスタム Liquid を選びます。Dawn の日本語表示なら、追加するときの一覧に出る名前は「カスタムLiquid」、追加したあとのセクション一覧では「カスタマイズされたLiquid」、貼り付ける欄は「Liquidコード」です。時計を置きたい場所、ふつうは価格やカートに追加のボタンのすぐ下へドラッグします。欄にローダーとマウント要素を貼り、YOUR_SITE_ID をダッシュボードがドメインの横に見せている値へ置き換えて「保存」（Save）します。数字の下に出る単位の言語は data-lang が決め、下のスニペットは ja に合わせてあります。

   コードコピー

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="ja" 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 に、時計がゼロになったあとページに残る文を書きます。下の値は例なので、買い物客に見せる文は日本語で書き直します。

   コードコピー

   <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 は、パーサーを止めるスクリプトをストアが遅くなる原因として指摘します。

締め切りであって、ダークパターンではない

急かす言葉は、本当のときだけ値打ちがあります。日曜の夜中にセールが終わり、時計がそう言い、月曜に戻ってきた人が予想どおりの価格を見ます。もう一方のタイマーは、いつ入っても5時間残っていて、ブラウザを開き直すと最初に戻り、ストアのどんな出来事とも関係がありません。気づいた買い物客はその提案を飛ばすだけでなく、ページの残りも信じなくなります。

BootSignal は前者しかやりません。data-target は固定の時刻なので、全員が同じ瞬間へ向かって数え、ゼロにも一緒に届きます。訪問者ごとのモードも、やり直しもありません。セールを延ばすなら時刻を書き換えて保存します。それはウィジェットが勝手に回す繰り返しではなく、自分が下した判断です。

カタログ全体が同じ規則で動いています。ソーシャルプルーフ通知はサイトがすでに記録した活動しか出せず、起きていない購入を作り出す方法がありません。ストアでは、そこが社会的証明と小道具を分ける線です。

テーマにカスタム Liquid のセクションが無いとき

カスタム Liquid は Shopify Theme Store の要件であって、プラットフォームの保証ではありません。自作のテーマ、マーケットプレイス外のテーマ、古い vintage テーマは省いていることがあり、そのときに残るのがコードエディタです。Shopify 管理画面で「オンラインストア」を開いてテーマを探し、横並びの「...」メニューから「コードを編集」（Edit code）を選びます。戻れる場所を作るため、先にテーマを複製してください。

ここでは2つの部品を分けます。ローダーは Layout（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（sections）のフォルダを開き、商品ページを描いているセクションを編集してください。Dawn ならそのファイルは sections/main-product.liquid で、日本語表示のテーマエディタでは「商品情報」と並んでいます。表示名はテーマの翻訳ファイル次第なので、別のテーマでは違う名前です。ブログ記事も同じ規則で、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>

バーと時計は言うことを合わせておきます。上が日曜と言い、下の時計が土曜を数えている状態は、どちらも無いよりたちが悪いです。

動かし続けるのにかかる費用

セールの週はアクセスが跳ねる週で、使った分だけ課金するウィジェットでは請求も一緒に跳ねる週です。ここで計るのはドメインのほうです。登録ドメイン1つあたり 月 $20 または年 $200、すべてのウィジェット込みで、アクセスやページビューで数える項目はありません。だから商品ページの時計も、その上の帯も、静かな火曜と1年でいちばん大きい日で同じ値段です。その値段の後ろにあるカタログは有料ウィジェット38個と無料のブラウザツール33個で、あとから出るウィジェットも含まれます。ストアをもう1つ持てばドメインがもう1つ、値段はダッシュボードで付きます。料金の全体に詳しく、値段を並べた比較は比較のセクションにあります。

ゼロになったときに残る一文を自分で書く

多くの人は data-target を慎重に決めて、data-expired には記憶に残らない言葉を打ち込みます。順番が逆です。期限切れの文は、セールが終わった瞬間から自分が気づくまで商品ページに座り続け、忙しいストアではそれが何日にもなります。

その一文に仕事を与えてください。セールが終わりましたという文は、遅かったという事実しか伝えません。セール価格は終わりましたが送料無料は続いていますという文は、すでに開いているページにとどまる理由を渡します。

タイマーが出てこないとき

1. アドレスバーのホスト名を登録済みのドメインと突き合わせます。独自ドメインと .myshopify.com の両方で応答するストアは、両方が登録されている必要があります。
2. ローダーがそのページにちょうど1つあるか確かめます。カスタム Liquid のセクションと theme.liquid の両方に貼ると、1つの商品ページに複製が2つ載ります。
3. 自分が貼ったものではなく、欄に保存された中身を見ます。閉じていないタグは保存のときに代わりに閉じられるので、閉じる </div> を失ったスニペットは形が変わって戻ってきます。
4. マウントが、いま見ているそのテンプレートにあるか確かめます。トップページのテンプレートに足したセクションは商品には出てこず、これがいちばん時間を食います。
5. 貼ったあとにテーマが更新されたかを疑います。Shopify はコードの変更がテーマの更新と互換性を欠く場合、更新されたコピーからその変更がすべて削除されると警告していて、カスタム Liquid のセクションがどうなるかまでは書いていません。更新のたびに商品ページを1つ開いてください。

テーマに残る設定は貼り付けたものだけです。セクションを足し直して時刻を書き直せば同じ時計が戻るので、テーマの更新は損失ではなく手間です。