Shopifyで画面に追従するカウントダウンタイマーを表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/10/22

はじめに

「シンプル追従カウントダウンタイマー｜お手軽あと何日表示」を入れると、Shopify ストアの画面上部または下部に、セールの終了までをカウントダウンするバーを常に表示できます。お客様がどのページを見ていても「あと何日・何時間」が目に入るので、購入を後回しにされにくくなります。

Shopify は、ネットショップを作って運営できるサービスです。Shopify アプリを追加すると、ストアに機能を足せます。このアプリは、コードを書かずにテーマエディタだけでカウントダウンバーを設定できる Shopify アプリです。

料金: Basic Plan $4.99/月（7日間の無料体験あり。年額プランは2か月分無料）
アプリストア: シンプル追従カウントダウンタイマー｜お手軽あと何日表示

ストアに追従カウントダウンタイマーバーを簡単に追加！

「シンプル追従カウントダウンタイマー｜お手軽あと何日表示」でできること

画面の上か下に固定されるカウントダウンバーで、ストアに「今買う理由」を作れます。商品ページ・コレクション・カートなど、どのページにも同じバーが表示されます。セール、期間限定のオファー、新商品の発売に合わせて使えます。

ストアに追従カウントダウンタイマーバーを簡単に追加！

コーディング不要で、どのページにも追従カウントダウンタイマーを追加
ビジュアルエディタで色・テキスト・レイアウトを簡単にカスタマイズ
セールや新商品の発売、期間限定オファーで緊急性をアピール

スクロールしても付いてくるカウントダウンバーを表示できる

カウントダウンバーは画面の上部または下部に固定され、ページをスクロールしても消えません。バーの高さの分だけページが自動でずれるので、ヘッダーやフッターに重なりません。

ストアに追従（フローティング）カウントダウンタイマーを簡単に追加！

お客様の初回訪問からカウントダウンを始められる

「エバーグリーン」タイマーにすると、お客様がストアに初めて来た時点から、決めた時間（初期値は24時間）のカウントダウンが始まります。日付を決めないキャンペーンでも、お客様ごとに締め切りを作れます。

初回訪問からカウントダウンを自動で開始！

商品ページ・カート・コレクションのどこにでも表示できる

埋め込みアプリとして動くので、一度オンにすればストアの全ページにバーが出ます。ページごとに設置する手間はありません。

追従カウントダウンタイマーをどこにでも表示！

コード不要でバーのデザインを変えられる

5種類のスタイルと、メインカラー・アクセントカラーの組み合わせで、ストアの雰囲気に合うバーを作れます。文字の大きさや CTA ボタンのアニメーションも、テーマエディタで選ぶだけです。

コード不要でカスタマイズ！

ワンクリックでテーマに追加できる

アプリの管理画面で「テーマに追加」を押すと、カウントダウンバーがオンになった状態でテーマエディタが開きます。あとは保存するだけです。

ワンクリックでテーマに追加！

アプリをインストールする

アプリストアのページからインストールできます。料金は Basic Plan $4.99/月で、最初の7日間は無料で試せます。

Shopify 管理画面の左下にある「設定」をクリックします。
設定のメニューで「アプリ」をクリックし、右上の「Shopify App Store」をクリックします。
検索窓に「シンプル追従カウントダウンタイマー」と入力し、表示されたアプリをクリックします。
アプリ詳細画面で「インストール」をクリックします。
権限の確認画面で内容を確認し、「インストール」をクリックして完了します。

カウントダウンバーをストアに表示する

このアプリのバーは、テーマの「埋め込みアプリ」として動きます。ページごとにブロックを置く必要はなく、埋め込みアプリを一度オンにすると全ページに表示されます。

管理画面からワンクリックでオンにできる

Shopify 管理画面の左のメニューで、「アプリ」の下にある「UR: Countdown Timer Bar」をクリックします（管理画面のメニューでは英語のアプリ名で表示されます）。
「テーマを選択」でバーを表示したいテーマを選び、「テーマに追加」をクリックします。
テーマエディタが開き、埋め込みアプリの「シンプル追従カウントダウンタイマー」がオンになっています。右上の「保存」をクリックします。

保存する前に見た目を確かめたいときは、管理画面の「テーマをプレビュー」から、選んだテーマのプレビューを開けます。

テーマエディタから手動でオンにできる

「テーマに追加」で開いた画面でオンになっていないとき、またはテーマを切り替えたときは、次の手順でオンにします。

Shopify 管理画面で「オンラインストア」を開き、公開中のテーマの「テーマを編集」をクリックします。
テーマエディタの左上にあるアイコンのうち、「埋め込みアプリ」のアイコンをクリックします。
「シンプル追従カウントダウンタイマー」のスイッチをオンにします。
プレビューにバーが出たことを確かめ、「保存」をクリックします。

設定はテーマに保存されます。テーマを切り替えると設定は引き継がれないので、新しいテーマでもう一度オンにして設定してください。

管理画面でできること

管理画面は、テーマへの追加と言語の切り替えが中心です。カウントダウンバーの見た目や時間は、すべてテーマエディタで設定します（次の章）。

設定画面でテーマに追加・プレビューできる

設定画面には次のセクションがあります。

テーマに追従カウントダウンタイマー機能を追加: 「テーマを選択」でテーマを選び、「テーマに追加」でテーマエディタを開きます。「テーマをプレビュー」で、選んだテーマのプレビューを開けます。テーマのバージョンによっては選択欄が空になることがあります。その場合は前の章の「テーマエディタから手動でオンにできる」の手順で追加してください。
注意のバナー（日本語表示のとき）: 「テーマに追加」で自動追加がうまくいかないときは、ご利用ガイドを見て手動で追加するよう案内しています。
言語設定: 「言語を選択」でアプリの管理画面の言語を選び、「変更する」で切り替えます。変わるのは管理画面の表示だけで、ストアフロントのバーの言語には影響しません。
おすすめアプリ: ほかのアプリの紹介です。

シンプル追従カウントダウンタイマーの設定画面全体

カウントダウンバーの見た目と時間を設定する

テーマエディタの「埋め込みアプリ」で「シンプル追従カウントダウンタイマー」を開くと、設定が5つのグループ（レイアウト・タイマー・テキスト・CTA ボタン・その他）に分かれて並んでいます。最初はおすすめの初期値が入っているので、まずはタイマーの種類と説明テキストを決めれば使い始められます。

※ この章の画像は、主言語が英語のデモストアの画面です。説明テキストなどの欄に英語の文言が入っていますが、主言語が日本語のストアでは「セール終了まで」などの日本語の初期値が入ります。

レイアウト設定でバーの位置とデザインを決められる

表示位置: バーを画面の「上部」か「下部」に固定します（初期値: 上部）。上部はページを開いた瞬間に目に入るので、セールの告知におすすめです。下部はヘッダーのメニューを邪魔したくないときに向いています。
要素の配置（PC）: パソコン表示で、説明テキスト・タイマー・ボタンをどう並べるかを選びます。「均等」「両端揃え」「中央」から選べます（初期値: 均等）。要素をまとめて見せたいなら「中央」が使いやすいです。
閉じるボタンを表示: バーの右端に「×」ボタンを出します（初期値: オン）。お客様がバーを閉じられるので、しつこい印象を避けられます。
クールダウン時間（分）: バーを閉じてから、もう一度表示するまでの時間を分で決めます（初期値: 0）。0 のままだと、閉じたお客様にはそれ以降表示されません。たとえば 60 にすると、1時間後にまた表示されます。
カウントダウンバーのスタイル: 「スタイル 1」〜「スタイル 5」から選びます（初期値: スタイル 1）。スタイルによって、数字の区切り方や枠の付き方が変わります。
メインカラー: バーの背景など、主になる色です（初期値: #000000）。
アクセントカラー: 文字や数字など、メインカラーの上に乗る色です（初期値: #ffffff）。ストアのブランドカラーをメインに、読みやすい白か黒をアクセントにすると見やすくなります。

テーマエディタのレイアウト設定

タイマー設定で締め切りを決められる

タイマータイプ: 「固定」か「エバーグリーン」を選びます（初期値: エバーグリーン）。
- 固定: 決めた日時に向けてカウントダウンします。セールの終了日が決まっているときに使います。
- エバーグリーン: お客様がストアに来た時点からカウントダウンします。終了すると、そのお客様には再表示されません。エバーグリーンの期間か説明テキストを変えると、また表示されるようになります。
カウントダウン終了日時（固定タイマー）: タイマータイプが「固定」のときの終了日時です。「YYYY-MM-DD-HH-MM」の形で入力します。たとえば 2026年12月31日 23時59分なら 2026-12-31-23-59 です。時刻はお客様の端末の時計で数えるので、ストアと同じ地域のお客様を想定した時刻にしてください。
エバーグリーンの期間（分）: エバーグリーンのカウントダウン時間を分で決めます（初期値: 1440 = 24時間）。3日間なら 4320 です。
タイマーサイズ（PC）: パソコン表示での数字の大きさです（初期値: 24）。
タイマーサイズ（モバイル）: スマートフォン表示での数字の大きさです（初期値: 16）。
単位ラベル: 数字の下に出る単位を、カンマ区切りで入力します（初期値: 日,時間,分,秒）。空欄にすると単位は表示されません。
表示フォーマット: 「DD : HH : MM : SS」「DD : HH : MM」「HH : MM : SS」から選びます（初期値: DD : HH : MM : SS）。残りが1日未満のキャンペーンなら「HH : MM : SS」が見やすいです。「HH : MM : SS」で単位ラベルを4つ入れているときは、先頭の「日」は自動で外れます。

固定タイマーが終了日時になったとき、エバーグリーンが終わったときは、バーが自動で消えます。終了日時を変えると、新しいキャンペーンとしてまた表示されます。

テーマエディタのタイマー設定

テキスト設定で呼びかけの文言を変えられる

説明テキスト: タイマーの横に出る文章です（初期値: 「セール終了まで」）。「新作発売まで」「送料無料キャンペーン終了まで」など、キャンペーンに合わせて書き換えられます。空欄にすると説明テキストは表示されません。
説明テキストサイズ（PC）: パソコン表示での説明テキストの大きさです（初期値: 14）。
説明テキストサイズ（モバイル）: スマートフォン表示での説明テキストの大きさです（初期値: 12）。

説明テキスト・単位ラベル・CTA ボタンテキストの3つは、初期値のままにしておくと、ストアフロントの表示言語に合わせて自動で訳されます。たとえば英語で見ているお客様には「Sales End In.」「Shop now」と表示されます。自分で文言を書き換えた場合は、その文言がどの言語でもそのまま表示されます。

テーマエディタのテキスト設定

CTA ボタンでセール会場へ案内できる

CTA ボタンテキスト: バーに出るボタンの文言です（初期値: 「今すぐ購入」）。空欄にするとボタンは表示されません。
CTA リンク: ボタンを押したときに開くページです（初期値: なし）。セール対象のコレクションや商品ページを指定すると、そのまま買い物に進んでもらえます。ボタンを出すときは必ず設定してください。
CTA ボタン文字サイズ（PC）: パソコン表示でのボタンの文字の大きさです（初期値: 14）。
CTA ボタン文字サイズ（モバイル）: スマートフォン表示でのボタンの文字の大きさです（初期値: 12）。
CTA ボタン角丸: ボタンの角の丸みです（初期値: 4）。数字を大きくするほど丸くなります。
CTA ボタンアニメーション: ボタンの動きを「なし」「パルス」「シェイク」「リフト」「シマー」「ポップ」「グロー」「リップル」から選びます（初期値: なし）。目立たせたいときは「パルス」や「グロー」、控えめにしたいときは「なし」がおすすめです。

テーマエディタの CTA ボタン設定

カスタム CSS で細かく調整できる

カスタム CSS: 設定項目にない見た目の調整を CSS で書けます（初期値: なし）。CSS がわかる方向けの項目です。

テーマエディタのその他の設定（カスタム CSS）

目的別のおすすめ設定

終了日が決まったセール: タイマータイプ「固定」、終了日時を入力、表示位置「上部」、CTA リンクにセール対象のコレクション。
常設の初回限定オファー: タイマータイプ「エバーグリーン」、期間 1440（24時間）、説明テキスト「初回限定クーポンの期限まで」。
とにかく目立たせたい: スタイルを変えてメインカラーにブランドカラー、CTA ボタンアニメーション「パルス」。
控えめに知らせたい: 表示位置「下部」、閉じるボタンをオン、クールダウン時間 0。

カウントダウンバーが表示されないときは

埋め込みアプリがオンか確かめる: テーマエディタの「埋め込みアプリ」で「シンプル追従カウントダウンタイマー」がオンになっていて、保存されているか確認してください。テーマを切り替えた場合は、新しいテーマでオンにし直す必要があります。
タイマーが終わっていないか確かめる: 固定タイマーの終了日時が過ぎている、またはエバーグリーンの期間が終わっていると、バーは消えます。
一度閉じていないか確かめる: 「×」で閉じると、クールダウン時間が 0 の場合、そのブラウザでは表示されなくなります。確認するときは、ブラウザのシークレットウィンドウでストアを開いてみてください。
プランが有効か確かめる: アプリのプランが有効でないと、ストアフロントにバーは表示されません。