カウントダウンタイマーとは、販売開始や終了までの残り時間を商品ページに表示する機能です。期間限定販売やセールの告知など、購買意欲を高める演出に活用できます。
デモ商品で動作を確認できます→ [デモ]カウントダウンタイマー
Online Store 2.0対応のShopifyテーマのみご利用いただけます
商品詳細ページのメイン商品にのみ表示されます。商品一覧内の商品には表示されません
カウントダウンが0になると自動的に非表示になります
テーマにアプリブロックを追加する必要があります（ステップ1参照）
カウントダウンの時刻
設定場所 | カウントダウンする時刻 | 表示条件 |
|---|---|---|
アクション（予約販売時） | 現時刻から終了日時までの時刻 | 終了日が設定されている場合のみ表示 |
アクション（開始日前） | 現時刻から開始日時までの時刻 | 開始日が設定されている場合のみ表示 |
(1) Shopify管理画面の「オンラインストア」→「テーマ」を開く(2) 使用中のテーマの「カスタマイズ」をクリックする
(3) テーマエディタで商品ページのテンプレートを開く(4) 左側のブロック追加から「アプリ」タブを選択し、「カウントダウンタイマー」を追加する(5) 表示位置を任意の場所に調整する(6) 「テーマエディターでデモを表示」を有効にしてデザインを確認・調整する
テーマエディタ上の設定項目
項目 | 説明 |
|---|---|
背景色 | タイマーの背景色 |
文字色 | タイマーのテキスト色 |
ボーダー色 | 枠線の色 |
ボーダー幅 | 枠線の太さ |
角丸 | 角の丸み |
フォントサイズ | 文字の大きさ |
日単位ラベル | 「日」のテキスト（多言語対応） |
時間単位ラベル | 「時間」のテキスト（多言語対応） |
分単位ラベル | 「分」のテキスト（多言語対応） |
秒単位ラベル | 「秒」のテキスト（多言語対応） |
(7) 「保存」をクリックする
(1) 対象の予約販売ルールを開く(2) 「アクション」セクションの「予約販売時」または「開始日前」タブを開く
(3) 「カウントダウンタイマーを表示する」にチェックを入れる(4) 下記の項目を設定する
項目 | 説明 |
|---|---|
カウントダウンタイマーのタイトル | タイマー上部に表示するテキスト（例：カウントダウン） |
カウントダウンタイマーの説明 | タイマー下部に表示する補足テキスト（例：販売終了まで:） |
(5) 「保存」をクリックする
(1) 対象の予約販売ルールを開く(2) 右上の「翻訳」をクリックする
(3) 翻訳する言語を選択する(4) 「カウントダウンタイマーのタイトル」「カウントダウンタイマーの説明」に翻訳後のテキストを入力する(5) 「保存」をクリックする
単位ラベル（「日」「時間」「分」「秒」）はShopifyの「Translate & Adapt」アプリから変更します。
(1) Shopify管理画面の「アプリ」から「Translate & Adapt」を開く(2) テーマ > テンプレートをクリック
(3) 「Product」を選択
(4) Countdown Timerの項目に翻訳データを入力
(5) 「保存」をクリック