カウントダウンタイマー

発売開始や販売終了までの残り時間をカウントダウン表示する方法を説明します。

カウントダウンタイマーは、販売開始や販売終了までの残り時間を商品ページに表示する機能です。期間限定販売やセールの告知など、購買意欲を高める演出に活用できます。

動作は「[デモ]カウントダウンタイマー」のデモ商品で確認できます。

  • 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) 「保存」を選択する