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