【徹底解説】Shopify アプリ「シンプル追従カウントダウンタイマー｜お手軽あと何日表示」でできること

【徹底解説】Shopify アプリ「シンプル追従カウントダウンタイマー｜お手軽あと何日表示」でできること

セールを告知しても、お客様が「あとで買えばいいか」とページを閉じてしまえば売上にはつながりません。締め切りがあることを知っていても、商品一覧やカートを見ているうちに忘れてしまうのはよくあることです。そこで効くのが、どのページを見ていても視界に入る「残り時間」の表示です。

この記事では、UnReact が提供する Shopify アプリ「シンプル追従カウントダウンタイマー｜お手軽あと何日表示」を、管理画面の画面ごと、テーマエディタの設定項目ごとに 1 つ残らず解説します。どの設定を変えるとストアの見え方がどう変わるのか、画面には書かれていない動きの決まり（バーを閉じたお客様にいつまた表示されるのか、タイマーはどの時計で数えるのか）まで、実装に沿って説明します。

後半では、同じ仕組みを Liquid と JavaScript で自作する場合のコード例も紹介します。アプリを入れるか、自分で作るかを判断する材料にしてください。

シンプル追従カウントダウンタイマーとは

シンプル追従カウントダウンタイマーは、ストアの画面の上部または下部にカウントダウンバーを固定表示する Shopify アプリです。バーには「セール終了まで」のような説明テキスト、残り時間のタイマー、セール会場へ案内する CTA ボタン、閉じるボタンが横一列に並びます。お客様がページをスクロールしてもバーは画面の端に付いてくるので、締め切りが常に目に入ります。

アプリの管理画面では、テーマへの追加と管理画面の言語切り替えだけを行います。バーの位置・色・タイマーの種類・文言といった見た目と動きは、すべて Shopify のテーマエディタで設定します。テーマエディタの右側にプレビューが出るので、設定を変えながらその場で仕上がりを確認できます。

アプリは Shopify App Store から入れられます。管理画面の左のメニューでは、英語のアプリ名「UR: Countdown Timer Bar」で表示されます。

画面の上下に貼り付くバーの仕組み

このアプリのバーは、テーマの「埋め込みアプリ」（App Embed）として動きます。商品ページやコレクションページに 1 つずつブロックを置く方式ではなく、ストアのすべてのページの body に 1 本のバーが差し込まれます。そのため、一度オンにすればトップページ・商品ページ・コレクション・カート・固定ページのどこにでも同じバーが出ます。

バーは position: fixed で画面の端に固定され、テーマのほかの要素より前面に表示されます。さらに、アプリはバーの高さを測り、その分だけページ全体の余白（body の上か下の padding）を足します。上部に出すとヘッダーがバーの下にずれ、下部に出すとフッターの下にバーの分の余白ができます。バーがヘッダーのロゴやフッターのリンクを隠してしまう事故が起きにくいのはこのためです。

画面幅が変わったときも余白を測り直します。スマートフォンを横に向けたり、ブラウザの幅を変えたりしてバーの高さが変わっても、ずれたまま残ることはありません。

固定タイマーとエバーグリーンタイマー

タイマーには 2 種類あります。

• 固定タイマー … 決めた日時に向けて全員同じ残り時間を表示します。「12 月 31 日 23 時 59 分でセール終了」のように、締め切りが決まっているキャンペーン向けです。
• エバーグリーンタイマー … お客様が初めてストアに来た時点から、決めた時間（初期値は 24 時間）のカウントダウンを始めます。締め切りはお客様ごとに違います。日付を決めない「初回訪問から 24 時間限定のクーポン」のような使い方ができます。

エバーグリーンの開始時刻は、お客様のブラウザ（localStorage）に保存されます。ページを移動しても、ブラウザを閉じて翌日にまた来ても、最初に来た時刻から数え続けます。

シンプル追従カウントダウンタイマーのメリット

コードを書かずに全ページへ出せる

設置に必要なのは、アプリの画面でテーマを選んでボタンを 1 回押すことと、開いたエディタで保存することの 2 つだけです。Liquid や CSS のファイルには一切手を入れないため、あとでテーマを新しい版に乗り換えても、自分で足したコードが消えて表示が止まる、といった事故が起きません。

ヘッダーやフッターに重ならない

自作の固定バーでよく起きるのが、ヘッダーのメニューやカートアイコンがバーの下に隠れてしまう問題です。このアプリはバーの高さに合わせてページ全体を自動でずらすので、上部に出してもヘッダーは押し下げられて見える位置に残ります。下部に出した場合も、ページの最後までスクロールすればフッターのリンクがバーに隠れずに見えます。

お客様ごとの締め切りを作れる

エバーグリーンタイマーを使えば、日付の決まったセールがない時期でも「今買う理由」を作れます。たとえば「初回限定クーポンの期限まで」と書いて 24 時間のカウントダウンを出せば、初めて来たお客様それぞれに 24 時間の締め切りが生まれます。期限が過ぎたお客様には、そのブラウザではバーが出なくなります。

初期値のままなら閲覧言語に合わせて文言が訳される

バーの文言のうち、説明テキスト・単位ラベル・CTA ボタンテキストは、変更せずにおくとお客様が見ている言語で表示されます。英語のページでは「Sales End In.」「Shop now」、日本語のページでは「セール終了まで」「今すぐ購入」という具合に、言語ごとに用意された訳へ自動で切り替わります。

越境 EC で複数言語を出しているストアでも、翻訳アプリでバーの文言を個別に訳す必要はありません。ただし、文言を自分で書き換えた場合は、書いた文言がどの言語でもそのまま表示されます。多言語のストアでは、初期値の文言で足りるかどうかを先に検討すると手間が減ります。

閉じるボタンとクールダウンでしつこさを調整できる

常に表示されるバーは、人によっては邪魔に感じます。このアプリでは閉じるボタンを出して、閉じたお客様にいつまた見せるかを分単位で決められます。売り込みの強さを、ストアの客層に合わせて調整できるのは運用上の大きな利点です。

シンプル追従カウントダウンタイマーのデメリット

ページや商品ごとに出し分ける設定はない

バーは埋め込みアプリとして全ページに 1 本だけ出ます。「この商品ページだけ」「このコレクションだけ」のように表示するページを絞る設定はありません。また、同時に出せるバーも 1 本だけなので、商品ごとに違う締め切りを並べる用途には向きません。商品ごとの締め切りを出したい場合は、後半の「使い分け」の章を参考にしてください。

設定はテーマに保存される

バーの設定は、アプリのサーバーではなくテーマ側に保存されます。テーマを切り替えたり、新しいテーマを公開したりすると、設定は引き継がれません。新しいテーマで改めて埋め込みアプリをオンにし、同じ設定を入れ直す必要があります。テーマを切り替える前に、色や文言をメモしておくと安心です。

固定タイマーはお客様の端末の時計で数える

固定タイマーの終了日時は、タイムゾーンを持たない「年-月-日-時-分」で入力し、お客様の端末の時計を基準に数えます。日本のストアで日本のお客様が見る分には問題ありませんが、海外のお客様が見ると、その国の現地時刻の 23 時 59 分が締め切りになります。海外販売をしていて、全世界で同じ瞬間にセールを終えたい場合は注意が必要です。

無料プランがない

料金は有料プランのみで、7 日間の無料体験の後は課金が必要です。プランが有効でないと、ストアフロントにバーは表示されません。

料金プラン

料金プランは Basic Plan の 1 種類です。

• 月額 … $4.99/月
• 年額 … $49.99/年（月額で 12 か月払うより 2 か月分お得）
• 無料体験 … 7 日間

最新の料金は Shopify App Store のアプリページで確認してください。無料体験の 7 日間で、実際のテーマに入れたときの見え方や、エバーグリーンタイマーの動きを確かめてから続けるかどうかを決められます。

インストール

まずはアプリを入れるまでの流れです。手順そのものは数クリックで終わります。

Shopify 管理画面の左下にある「設定」を開きます。

設定のメニューで「アプリ」を選び、右上にあるアプリストアを開くボタンを押します。

検索窓に「シンプル追従カウントダウンタイマー」と入れると、アプリが見つかります。

アプリの詳細ページで「インストール」を押します。

権限の確認画面が出ます。このアプリが求める権限は、テーマの一覧を読むためのもの（read_themes）だけです。商品・注文・顧客のデータには触れません。内容を確認して「インストール」を押せば完了です。

アプリ管理画面の構成

インストールが終わると、管理画面の左のメニューの「アプリ」の下に「UR: Countdown Timer Bar」が加わります。開くと「設定」の画面が表示されます。管理画面にあるのは、この設定画面 1 枚です。

設定画面は、上から次の 4 つのカードで構成されています。

• テーマに追従カウントダウンタイマー機能を追加
• 自動追加がうまくいかないときの案内バナー（管理画面を日本語で表示しているときだけ）
• 言語設定
• おすすめアプリ

バーの見た目や時間を決める項目は、この画面にはありません。管理画面は「テーマに入れる入口」、テーマエディタは「バーを作り込む場所」と役割が分かれています。なお、よくある質問のページも用意されていて、Q&A が登録されていて管理画面が日本語表示のときにだけ、メニューにリンクが出ます。

各画面の説明

テーマに追従カウントダウンタイマー機能を追加

設定画面のいちばん上のカードです。ここでバーをどのテーマに入れるかを選び、テーマエディタを開きます。

• テーマを選択 … ストアにあるテーマの一覧から、バーを入れるテーマを選びます。公開中のテーマには「（公開中のテーマ）」と付きます。デモ用のテーマは一覧に出ません。開いた時点では公開中のテーマが選ばれているので、公開前のテーマに入れたいときだけ選び直します。
• テーマに追加 … 選んだテーマのテーマエディタを新しいタブで開きます。開いた時点で、埋め込みアプリの「シンプル追従カウントダウンタイマー」がオンになっています。右上の「保存」を押すまでストアには反映されません。
• テーマをプレビュー … 選んだテーマのプレビューを新しいタブで開きます。公開前のテーマにバーを入れて、ストアに出す前に見え方を確かめたいときに使います。

カードの説明にもあるとおり、テーマのバージョンによっては選択欄が空になることがあります。そのときはテーマエディタから手動でオンにします（後述の「テーマへの追加」で手順を説明します）。

自動追加がうまくいかないときの案内バナー

テーマ追加のカードのすぐ下に出る黄色いバナーです。「テーマに追加」を押してもアプリブロックが自動で追加されなかった場合に、ご利用ガイドを見て手動で追加するよう案内しています。操作する項目はありません。

このバナーは、管理画面を日本語で表示しているときにだけ出ます。英語など他の言語に切り替えているときは表示されません。手順の詳細は Shopifyで画面に追従するカウントダウンタイマーを表示できるアプリについて徹底解説｜ご利用ガイド にまとまっています。

言語設定

アプリの管理画面を何語で表示するかを選ぶカードです。

• 言語を選択 … 管理画面の表示言語を選びます。日本語・英語を含む 20 言語から選べます。
• 変更する … 押すと、選んだ言語で管理画面が表示し直されます。

ここで変わるのはアプリの管理画面の表示だけです。ストアフロントのバーの言語には影響しません。バーの文言は、前の章で説明したとおりお客様の閲覧言語に合わせて切り替わります。選んだ言語はブラウザに保存されるので、別のパソコンで管理画面を開くと初期の言語に戻ることがあります。

おすすめアプリ

設定画面のいちばん下には、UnReact のほかの Shopify アプリが並びます。カウントダウンと組み合わせやすい離脱防止のポップアップなども紹介されています。右上の「×」で閉じられます。

テーマへの追加

管理画面の「テーマに追加」を押すと、次のようにテーマエディタが開きます。左側の「埋め込みアプリ」の一覧で、シンプル追従カウントダウンタイマーのスイッチがオンになっています。プレビューにバーが出ていることを確かめて、右上の「保存」を押します。

テーマを切り替えたときや、選択欄が空で自動追加が使えないときは、テーマエディタから手動でオンにします。Shopify 管理画面の「オンラインストア」から、公開中のテーマの「テーマを編集」を開きます。

テーマエディタの左上に並ぶアイコンのうち、「埋め込みアプリ」のアイコンを押します。

一覧にあるシンプル追従カウントダウンタイマーのスイッチをオンにします。

プレビューの端にバーが出たら「保存」を押します。埋め込みアプリは、オンにして保存しない限りストアに何も表示されません。実装が正しくてもバーが出ないときは、まずここを疑ってください。

ストアフロントの見た目を変える

埋め込みアプリの一覧でシンプル追従カウントダウンタイマーの名前を押すと、設定が開きます。設定は「レイアウト設定」「タイマー設定」「テキスト設定」「CTA ボタン」「その他の設定」の 5 つのグループに分かれていて、項目は全部で 24 個です。どの項目にもおすすめの初期値が入っているので、最初はタイマーの種類と説明テキストだけ決めれば使い始められます。

この章の画像のうち、テーマエディタの画面は主言語が英語のデモストアで撮っています。そのため、説明テキストなどの欄に英語の初期値が入っています。

レイアウト設定

バーをどこに出し、どんなデザインにするかを決めるグループです。

• 表示位置（既定: 上部）… バーを画面の「上部」と「下部」のどちらに固定するかを選びます。上部はページを開いた瞬間に目に入るので、セールの告知のように最初に気づいてほしい内容に向いています。下部はヘッダーのメニューやロゴの周りを広く使いたいとき、スマートフォンで親指の届きやすい位置に CTA ボタンを置きたいときに向いています。どちらを選んでも、ページの余白はバーの高さ分だけ自動で調整されます。
• 要素の配置（PC）（既定: 均等）… パソコン表示で、説明テキスト・タイマー・CTA ボタンを横にどう並べるかを選びます。「均等」は 3 つの要素の間と両端の余白をそろえ、「両端揃え」は左端と右端に要素を寄せ、「中央」は 3 つを中央にまとめて 30px 間隔で並べます。画面が広いパソコンで要素が離れすぎると視線が散るので、まとまって見せたいなら「中央」が扱いやすいです。この設定は幅 768px 以上の画面にだけ効き、スマートフォンでは常に縦に積んだ並びになります。
• 閉じるボタンを表示（既定: オン）… バーの右端に「×」ボタンを出します。オフにするとお客様はバーを消せなくなります。期間の短いセールで確実に見せたいときはオフ、常設のオファーで印象を柔らかくしたいときはオンが目安です。
• クールダウン時間（分）（既定: 0）… お客様がバーを閉じてから、もう一度表示するまでの時間を分で決めます。0 のままだと、閉じたお客様にはそのブラウザで二度と表示されません。60 にすれば 1 時間後、1440 にすれば翌日の同じ時刻以降にまた表示されます。閉じた時刻はお客様のブラウザに記録されるので、別の端末やシークレットウィンドウでは改めて表示されます。
• カウントダウンバーのスタイル（既定: スタイル 1）… 「スタイル 1」から「スタイル 5」の 5 種類から、数字の見せ方とバーのデザインを選びます。違いは次の節で画像付きで紹介します。
• メインカラー（既定: #000000）… バーの背景など、面積の大きい部分の色です。ブランドカラーを入れると、ストアの雰囲気になじみます。
• アクセントカラー（既定: #ffffff）… 説明テキスト・数字・ボタンなど、メインカラーの上に乗る部分の色です。スタイル 1 では、CTA ボタンの背景がアクセントカラー、ボタンの文字がメインカラーになります。メインカラーとの明るさの差が小さいと文字が読みにくくなるので、濃い背景には白や明るい色、明るい背景には黒や濃い色を合わせます。

表示位置を「下部」にすると、スマートフォンでは次のようにバーが画面の下に固定されます。トップページのメインビジュアルをバーで隠したくないときに選ぶと効果的です。

カウントダウンバーのスタイルと配色の例

スタイルとメインカラー・アクセントカラーの組み合わせで、バーの印象は大きく変わります。ここでは 5 つのスタイルを、実際の配色例と一緒に並べます。どれも同じアプリの同じバーで、変えているのはスタイルと 2 つの色だけです。

スタイル 1 は、太字の数字をコロンで区切り、数字の下に単位を置く基本形です。メインカラー #0f1a14、アクセントカラー #7ee2b8 の組み合わせでは、落ち着いた深緑の背景にミントグリーンの文字が乗ります。

スタイル 2 は、細い数字の右下に小さく単位を添える、余白の多いデザインです。白の背景に濃いグレーの文字を合わせると、アパレルやインテリアのような上品なストアに合います。

スタイル 3 は、タイマー全体を一段濃い角丸の枠で囲み、等幅の数字で見せるデザインです。赤の背景に白の文字を合わせると、タイムセールらしい強い印象になります。

スタイル 4 は、細い数字を縦線で区切り、CTA ボタンを枠線だけで表現するデザインです。紺の背景に金色の文字を合わせると、高級感のある見た目になります。

スタイル 5 は、日・時間・分・秒をそれぞれ独立した角丸のタイルに収めるデザインです。数字が 1 つずつ目立つので、残り時間をはっきり印象づけたいときに向いています。青の背景に白の文字で、明るく親しみやすい印象になります。

同じスタイルでも、色を変えるだけで用途が変わります。スタイル 1 に黄色の背景と濃い赤の文字を合わせると、スーパーのチラシのような分かりやすい売り出し感が出ます。

スタイル 3 をダークグレーと白で組むと、赤の場合よりも控えめで、モノトーンのテーマになじみます。

スタイル 5 を紫の背景と黄色の文字で組むと、補色どうしの組み合わせで遠くからでも目に留まります。

8 つの配色を一覧にすると次のとおりです。迷ったら、ストアのロゴやボタンに使っている色をメインカラーにして、文字が読みやすい白か黒をアクセントカラーにするところから始めてください。

タイマー設定

締め切りの決め方と、数字の見せ方を決めるグループです。このアプリの中心になる設定です。

• タイマータイプ（既定: エバーグリーン）… 「固定」と「エバーグリーン」から選びます。固定は全員に同じ締め切り、エバーグリーンはお客様ごとの締め切りです。セールの終了日が決まっているなら固定、常設のオファーならエバーグリーンを選びます。
• カウントダウン終了日時（固定タイマー）（既定: 空欄）… タイマータイプが固定のときの締め切りです。「YYYY-MM-DD-HH-MM」の形で、年・月・日・時・分をハイフンでつないで入力します。2026 年 12 月 31 日 23 時 59 分なら 2026-12-31-23-59 です。区切りが 5 つそろっていないとカウントが始まらず、数字が 00 のまま表示されるので、入力したらプレビューで数字が動いているかを必ず確かめてください。時刻はお客様の端末の時計を基準に数えます。
• エバーグリーンの期間（分）（既定: 1440）… エバーグリーンのカウントダウンの長さを分で入力します。1440 は 24 時間です。3 日間なら 4320、1 時間なら 60 を入れます。
• タイマーサイズ（PC）（既定: 24）… パソコン表示での数字の大きさ（px）です。バーの高さもこの数字に合わせて変わります。
• タイマーサイズ（モバイル）（既定: 16）… 幅 768px 以下の画面での数字の大きさ（px）です。スマートフォンではバーが縦に積まれるので、大きくしすぎると画面の上部をバーが大きく占めます。
• 単位ラベル（既定: 言語ごとの初期値）… 数字の下や横に出る単位を、カンマ区切りで入力します。日本語なら「日,時間,分,秒」、英語なら「DAYS,HOURS,MINUTES,SECONDS」が初期値として用意されています。「Day,Hr,Min,Sec」のように短くしたり、空欄にして単位を消したりできます。
• 表示フォーマット（既定: DD : HH : MM : SS）… 「DD : HH : MM : SS」「DD : HH : MM」「HH : MM : SS」の 3 つから選びます。

単位ラベルの初期値にどの言語の値が入るかは、テーマエディタの表示言語では決まりません。主言語が英語のデモストアでは、日本語表示のテーマエディタで開いても英語の初期値が入りました。とはいえ、初期値のまま保存すれば、ストアフロントではお客様の閲覧言語に合わせた単位で表示されます。

表示フォーマットには、画面からは分からない動きがあります。

• DD : HH : MM を選ぶと秒が表示されません。数字が毎秒動かないので、落ち着いた見た目になります。締め切りまで何日もある長期のキャンペーンに向いています。
• HH : MM : SS を選ぶと日の欄がなくなり、残りの日数は時間にまとめて表示されます。残りが 2 日なら「48 : 00 : 00」のように出ます。
• HH : MM : SS で単位ラベルを 4 つ入れている場合は、先頭の 1 つ（日）が自動で外れます。フォーマットを切り替えるたびに単位ラベルを書き直す必要はありません。

固定タイマーが終了日時を迎えたとき、エバーグリーンの期間が終わったときは、バーが自動で消えます。消えた後に終了日時を書き換えて保存すると、アプリは「新しいキャンペーンが始まった」と判断して、バーを再び表示します。エバーグリーンの場合は、期間か説明テキストのどちらかを変えると新しいキャンペーン扱いになり、開始時刻も記録し直されます。

この仕組みは、閉じるボタンにも同じように効きます。キャンペーンを切り替えると、以前のキャンペーンでバーを閉じたお客様にもまた表示されます。逆に、エバーグリーンで説明テキストの誤字だけを直した場合も新しいキャンペーン扱いになり、全員の残り時間が最初からになる点は覚えておいてください。

テキスト設定

タイマーの横に出る呼びかけの文言を決めるグループです。

• 説明テキスト（既定: 言語ごとの初期値。日本語は「セール終了まで」）… タイマーの横（スマートフォンでは上）に出る文章です。リッチテキストなので、太字や斜体、リンクも使えます。「新作発売まで」「送料無料キャンペーン終了まで」「初回限定クーポンの期限まで」のように、キャンペーンに合わせて書き換えます。空欄にすると説明テキストは表示されません。
• 説明テキストサイズ（PC）（既定: 14）… パソコン表示での説明テキストの大きさ（px）です。
• 説明テキストサイズ（モバイル）（既定: 12）… 幅 768px 以下の画面での説明テキストの大きさ（px）です。

説明テキストは、お客様が「何の締め切りか」を理解するための唯一の手がかりです。「残り時間」だけでは何が終わるのか分からないので、「全品 20% OFF 終了まで」のように、得られるものを具体的に書くと反応が変わります。スマートフォンでは横幅が狭いので、15 文字前後に収めると 1 行で読めます。

多言語のストアで説明テキストを書き換えると、どの言語のお客様にも書き換えた文言がそのまま出ます。日本語と英語の両方で販売しているなら、「SALE 終了まで」のように両方の言語のお客様に伝わる言い回しにするか、初期値のまま使うかを検討してください。

CTA ボタン

バーからセール会場へお客様を連れていくボタンの設定です。

• CTA ボタンテキスト（既定: 言語ごとの初期値。日本語は「今すぐ購入」）… ボタンに出る文言です。空欄にするとボタンそのものが表示されなくなります。告知だけでよいときは空欄にします。
• CTA リンク（既定: 空欄）… ボタンを押したときに開くページです。テーマエディタのリンク選択から、コレクション・商品・ページなどを選べます。空欄のままだと押しても移動しないので、ボタンを出すときは必ず設定してください。セール対象のコレクションを指定すると、バーから直接買い物に進んでもらえます。
• CTA ボタン文字サイズ（PC）（既定: 14）… パソコン表示でのボタンの文字の大きさ（px）です。
• CTA ボタン文字サイズ（モバイル）（既定: 12）… 幅 768px 以下の画面でのボタンの文字の大きさ（px）です。
• CTA ボタン角丸（既定: 4）… ボタンの角の丸み（px）です。0 で四角になり、数字を大きくするほど丸くなります。テーマのほかのボタンの形に合わせると、バーがストアの一部としてなじみます。
• CTA ボタンアニメーション（既定: なし）… ボタンの動きを 8 種類から選びます。

アニメーションの選択肢は次のとおりです。

• なし … 動きません。上品に見せたいときの基本です。
• パルス … ボタンがゆっくり拡大と縮小を繰り返します。
• シェイク … ボタンが小刻みに左右へ傾くように揺れます。強く注意を引きます。
• リフト … 普段は動かず、カーソルを乗せたときにボタンが浮き上がって影が付きます。パソコンで控えめに反応させたいときに向いています。
• シマー … ボタンの表面を光が横切ります。
• ポップ … ボタンが弾むように一回り大きくなる動きを繰り返します。
• グロー … ボタンの周りが光ります。
• リップル … ボタンから波紋が広がります。

動きは目を引く反面、多用するとストア全体が騒がしく見えます。セールの最終日だけ「パルス」や「グロー」に切り替え、普段は「なし」にしておく、という使い分けがおすすめです。

カートページにもバーとボタンは出ます。カートに商品を入れたまま迷っているお客様に、締め切りを思い出してもらう最後の一押しになります。

コレクションページでも同じバーが出ます。CTA リンクにセール対象のコレクションを入れておけば、別のコレクションを見ているお客様をセール会場に誘導できます。

その他の設定

設定項目にない調整を、CSS で行うためのグループです。

• カスタム CSS（既定: 空欄）… バーに追加する CSS を書きます。CSS が分かる方向けの項目です。

ここに書いた内容は、バーの外枠（.ur-countdown）に対する指定として読み込まれます。たとえば font-family: serif; letter-spacing: 0.05em; と書けば、バー全体の書体と字間が変わります。外枠の中の要素を個別に変えたいときは、CSS の入れ子の書き方（& .ur-cta { font-weight: 700; } のような形）が使えるブラウザなら指定できます。ストアの他の部分には影響しないので、テーマ側の見た目を壊す心配はありません。

目的別の設定例

ここまでの設定を、よくある目的ごとに組み合わせると次のようになります。

• 終了日が決まった週末セール … タイマータイプは固定、終了日時に日曜 23 時 59 分、表示位置は上部、CTA リンクにセール対象のコレクション。最終日だけ CTA ボタンアニメーションをパルスに変えます。
• 初回訪問者向けのクーポン … タイマータイプはエバーグリーン、期間は 1440、説明テキストは「初回限定クーポンの期限まで」、CTA リンクにクーポンの案内ページ。閉じるボタンはオン、クールダウン時間は 0。
• 新商品の発売までの予告 … タイマータイプは固定、終了日時に発売日時、表示フォーマットは DD : HH : MM、説明テキストは「新作発売まで」。CTA ボタンテキストを空欄にして、ボタンは出しません。
• 控えめに知らせたい常設のお知らせ … 表示位置は下部、スタイル 2、閉じるボタンはオン、クールダウン時間は 1440。閉じたお客様には翌日まで出しません。
• とにかく目立たせたいタイムセール … スタイル 5、メインカラーに赤や紫、アクセントカラーに白や黄色、CTA ボタンアニメーションはグロー。

表示されないときの確認ポイント

バーが出ないときは、次の順に確かめます。どれもエラーメッセージが出ないので、知っていないと原因にたどり着けません。

• 埋め込みアプリがオンで、保存されているか … テーマを切り替えた後は、新しいテーマでオンにし直す必要があります。
• タイマーが終わっていないか … 固定タイマーの終了日時を過ぎている、またはエバーグリーンの期間が終わっていると、バーは消えます。
• 一度閉じていないか … 自分で「×」を押していると、クールダウン時間が 0 の場合はそのブラウザでは出ません。シークレットウィンドウでストアを開くと、初めて来たお客様と同じ状態で確認できます。
• 終了日時の形式が正しいか … 区切りのハイフンが足りないと、バーは出ても数字が 00 のまま止まります。
• プランが有効か … 無料体験が終わっていてプランが有効でないと、ストアフロントにバーは表示されません。

コードで自作する場合

ここからは、同じような追従カウントダウンバーを、アプリを使わずにテーマのコードで作る方法を紹介します。仕組みを知っておくと、アプリの設定項目の意味もつかみやすくなります。

まず、テーマに新しいスニペット snippets/my-sticky-countdown.liquid を作り、バーの HTML を書きます。終了日時はタイムゾーン付きの ISO 形式（+09:00）で持たせています。こうすると、海外のお客様が見ても日本時間の締め切りで数えられます。

{% comment %} snippets/my-sticky-countdown.liquid {% endcomment %}
<div
  id="my-countdown"
  class="my-countdown"
  data-end="2026-12-31T23:59:00+09:00"
  hidden
>
  <p class="my-countdown__text">年末セール終了まで</p>
  <p class="my-countdown__timer" aria-live="polite">--:--:--:--</p>
  <a class="my-countdown__cta" href="{{ routes.collections_url }}/sale">今すぐ購入</a>
  <button class="my-countdown__close" type="button" aria-label="閉じる">&times;</button>
</div>

hidden を付けておき、JavaScript で残り時間を計算できたときだけ表示します。終了済みの締め切りが一瞬見えてしまうのを防ぐためです。リンク先の /sale は、セール対象のコレクションのハンドルに置き換えてください。

次に、バーを画面の上部に固定する CSS を書きます。セレクタは必ず .my-countdown の配下に閉じ込め、テーマのほかの要素に影響しないようにします。

.my-countdown {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 10px 48px;
  background: #111;
  color: #fff;
}
.my-countdown__timer { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.my-countdown__cta { padding: 8px 20px; border-radius: 4px; background: #fff; color: #111; text-decoration: none; }
.my-countdown__close { position: absolute; right: 12px; background: none; border: 0; color: inherit; font-size: 20px; cursor: pointer; }
@media (max-width: 768px) {
  .my-countdown { flex-direction: column; gap: 4px; }
  .my-countdown__timer { font-size: 16px; }
}

font-variant-numeric: tabular-nums は、数字の幅をそろえる指定です。これがないと、毎秒数字が変わるたびに文字の幅が変わり、バー全体が小刻みに揺れて見えます。スマートフォン向けには、要素を縦に積んで数字を小さくしています。

最後に、残り時間を数える JavaScript です。閉じたことをブラウザに覚えさせ、バーの高さの分だけページの上に余白を足す処理も入れています。

(() => {
  const bar = document.getElementById('my-countdown');
  if (!bar) return;
  const CLOSED_KEY = 'my_countdown_closed:' + bar.dataset.end;
  const end = new Date(bar.dataset.end).getTime();
  const timer = bar.querySelector('.my-countdown__timer');
  const pad = (n) => String(n).padStart(2, '0');

  // 閉じた記録があるか、すでに終了していれば何もしない
  if (localStorage.getItem(CLOSED_KEY) || Number.isNaN(end) || end <= Date.now()) return;

  // バーの高さの分だけ body の上に余白を足し、ヘッダーが隠れないようにする
  const offset = () => { document.body.style.paddingTop = bar.hidden ? '' : bar.offsetHeight + 'px'; };

  const tick = () => {
    const left = Math.max(0, Math.floor((end - Date.now()) / 1000));
    if (left === 0) { bar.hidden = true; offset(); clearInterval(id); return; }
    const d = Math.floor(left / 86400);
    const h = Math.floor((left % 86400) / 3600);
    const m = Math.floor((left % 3600) / 60);
    timer.textContent = `${pad(d)}日 ${pad(h)}:${pad(m)}:${pad(left % 60)}`;
  };

  bar.querySelector('.my-countdown__close').addEventListener('click', () => {
    localStorage.setItem(CLOSED_KEY, '1');
    bar.hidden = true;
    offset();
  });

  bar.hidden = false;
  tick();
  const id = setInterval(tick, 1000);
  offset();
  window.addEventListener('resize', offset);
})();

閉じた記録のキーに終了日時を含めているのがポイントです。次のセールで data-end を変えればキーも変わるので、前のセールでバーを閉じたお客様にも新しいバーが表示されます。アプリの「終了日時を変えると再表示される」動きを、最小限の形で再現したものです。

作ったスニペットは、layout/theme.liquid の </body> の直前で読み込みます。

  {% render 'my-sticky-countdown' %}
</body>

theme.liquid に書くことで、すべてのページにバーが出ます。JavaScript はスニペットの末尾に <script> で書くか、assets にファイルを置いて読み込みます。

この自作版には、アプリにある次の機能が入っていません。

• テーマエディタで色・位置・文言を変える設定項目（変えるたびにコードを編集する必要があります）
• お客様ごとの締め切りを作るエバーグリーンタイマー
• 閉じた後に一定時間で再表示するクールダウン
• 20 言語の自動翻訳
• 5 種類のスタイルと 8 種類のボタンアニメーション
• 下部表示とフッターの余白の調整

これらを足していくと、コードは数百行になります。さらに、テーマを更新すると theme.liquid の編集が上書きされることがあり、セールのたびに誰かがコードを触る運用になります。タイムゾーンを固定したい、ブランドに合わせて完全に作り込みたいといった理由がなければ、アプリでテーマエディタから設定するほうが、日々の運用は楽になります。

商品ページ埋め込み型のカウントダウンとの使い分け

Shopify のカウントダウンアプリには、このアプリのような「ストア全体に 1 本の追従バーを出す型」のほかに、「商品ページの価格の近くなどにブロックとして置く型」もあります。2 つは競合というより役割が違うので、組み合わせ方を考えると効果が上がります。

• 追従バー型（このアプリ） … ストア全体のキャンペーンを、どのページにいても知らせる役割です。「全品セール」「送料無料キャンペーン」「初回限定クーポン」のように、ストア全体で 1 つの締め切りを伝えるのに向いています。
• ブロック型 … 特定の商品の締め切りを、その商品ページの中で知らせる役割です。「この商品の予約受付は○日まで」のように、商品ごとに違う締め切りを出すのに向いています。

両方を入れる場合は、締め切りを二重に見せて混乱させないことが大切です。次の順で設定すると、お客様にとって分かりやすい組み合わせになります。

• まず、ストア全体で伝えたい締め切りを 1 つに決め、それをこのアプリの追従バーに入れます。説明テキストには「全品」「ストア全体」など、対象が分かる言葉を入れます。
• 次に、商品固有の締め切りがある商品だけ、ブロック型のタイマーを商品ページに置きます。追従バーと同じ締め切りを商品ページに重ねて出す必要はありません。
• 追従バーを上部に出しているなら、商品ページのタイマーは価格の近くに置き、画面の上下で役割を分けます。両方が同じ場所に固まると、どちらの数字が何の締め切りか分からなくなります。
• 色は、追従バーをストアのブランドカラー、商品ページのタイマーを価格表示に近い控えめな色にすると、主従がはっきりします。

どちらを先に入れるか迷ったら、まず追従バーから始めるのがおすすめです。ストア全体のキャンペーンは毎月のように発生し、1 回の設定でどのページにも効果が出るからです。商品ごとの締め切りが必要になった段階で、ブロック型を追加で検討すれば十分です。

まとめ

シンプル追従カウントダウンタイマーは、締め切りを「ストアのどこにいても見える場所」に置くためのアプリです。管理画面は「テーマに追加」だけのシンプルな作りで、バーの位置・5 種類のスタイル・2 つのカラー・2 種類のタイマー・文言・CTA ボタン・アニメーションまで、24 個の設定をすべてテーマエディタで仕上げられます。

• 画面の上部か下部に固定され、ヘッダーやフッターを隠さないようにページの余白を自動で調整する
• 固定タイマーで全員共通の締め切り、エバーグリーンタイマーでお客様ごとの締め切りを作れる
• 閉じるボタンとクールダウン時間で、見せる強さをストアに合わせて調整できる
• 初期値の文言は 20 言語に自動で訳される
• 設定はテーマに保存されるので、テーマを切り替えたときは入れ直しが必要

料金は Basic Plan の $4.99/月（年額 $49.99）で、7 日間の無料体験があります。次のセールの告知から試し、バーを出す前と後でセール会場への流入がどう変わるかを見てみてください。

アプリは Shopify App Store からインストールできます。設定手順を画面付きで確認したい場合は、Shopifyで画面に追従するカウントダウンタイマーを表示できるアプリについて徹底解説｜ご利用ガイド も参考にしてください。

おすすめ Shopify アプリ

カウントダウンバーと一緒に使うと、購入の後押しをさらに強められる UnReact のアプリを紹介します。

• シンプル追従画像バナー｜フローティング画像バナー … ストアに追従する画像バナーを表示できるアプリです。セールの告知を画像で見せたいときに、文字中心のカウントダウンバーと組み合わせられます。
• シンプル送料無料バー｜あといくらで送料無料表示 … 送料無料まであといくらかを表示するバーです。カウントダウンで「いつまで」、送料無料バーで「あといくら」を伝えると、買い足しのきっかけが増えます。
• シンプル在庫数表示｜お手軽残りわずか表示 … 商品の残りわずかを表示するアプリです。時間の締め切りと在庫の少なさの両方を見せられます。
• シンプル最後に売れた時間表示｜お手軽直近購入時刻表示 … 商品が最後に売れた日時を表示するアプリです。ほかのお客様も買っていることが伝わり、セール中の購入をもう一段後押しします。