メインコンテンツへスキップ
デザインとカスタマイズ

カウントダウンタイマーを追加する方法

カウントダウンタイマーは、バンドルオファーの横に時計を表示します。固定時間、現地時間の午前0時、カスタム期限から選択でき、数字ブロックを並べる全幅レイアウトまたはコンパクトバーを使用できます。タイマーは視覚的な機能であり、0になっても割引が無効になったり、購入者が割引を受けられなくなったりすることはありません。プロモーションを終了する必要がある場合は、割引を別途管理し、実際のオファー内容に合った文言を使用してください。

カウントダウンタイマーを有効にする

コンパクトレイアウト、ウィジェットの上、15分の時間、タイマーのプレビュー横に期限切れ時の動作として「メッセージを表示」が設定されたカウントダウンタイマーの設定。
(1)アドオンでカウントダウンタイマーを有効にし、レイアウトと位置を選択します。(2)時間を選択します。(3)期限切れ時の状態を設定します。この例では、タイマー終了後もオファーを利用できる設定になっています。

カウントダウンタイマーはバンドルエディターでバンドルオファーごとに設定するため、そのバンドルのウィジェットが表示される場所にのみ表示されます。

  1. 編集するバンドルオファーを開きます。
  2. アドオンタブを開き、カウントダウンタイマーセクションを見つけます。
  3. カウントダウンタイマーのタイトル横にあるスイッチをオンにします。
  4. バンドルを保存します。

他のウィジェット機能と同様に、ストアフロントにタイマーを表示するには、アプリ埋め込み(またはアプリブロック)をオンにし、商品に一致する公開済みバンドルが必要です。

レイアウトを選択

カウントダウンレイアウト設定では、タイマーの表示方法を指定します:

  • フル - 日、時、分、秒を個別の数字で表示する大きなブロックで、タイトルとサブタイトルも追加できます。
  • コンパクト - コンパクトタイトルフィールドを使用して、短いメッセージと時間を1行にまとめたスリムな表示です。

位置を設定

位置設定では、タイマーの表示場所を指定します:

  • ウィジェットの上 - 商品ページ内のバンドルのすぐ上に表示します。
  • ウィジェットの下 - 商品ページ内のバンドルのすぐ下に表示します。
  • スティッキーバー(上部) - ブラウザウィンドウの上部に固定します。この位置はコンパクトレイアウトでのみ使用できます。

スティッキーバーを選択した状態でフルレイアウトに切り替えると、位置は自動的にウィジェットの上に戻ります。

タイマータイプを選択

タイマータイプで、カウントダウンの動作を選択します:

  • 固定時間 - 訪問者ごとに設定した分数をカウントダウンします。
  • 午前0時に終了(ユーザーの現地時間) - 各購入者のタイムゾーンで午前0時までカウントダウンし、翌日にページを読み込むと新しい期限が設定されます。
  • カスタム終了日時 - 設定した特定の日時までカウントダウンします。

固定時間

固定時間を選択した場合は、時間を分単位で設定します。値は1分から1440分(24時間)の範囲で指定してください。カウントダウンはブラウザのローカル時間を使用するため、ページを更新しても訪問者に新しい時間が最初から与えられるとは限りません。すでに開いているページでは、0になると選択した期限切れ時の動作が適用されます。そのページでタイマーが自動的に再開するとは限りません。公開前に、期限切れ時の動作と、その後のページ読み込みの両方をテストしてください。

カスタム終了日時

カスタム終了日時を選択した場合は、終了日時を指定します。エディターには、フィールドの横に検出されたタイムゾーンが表示されます。特に複数のタイムゾーンで共通の期限を設定する必要がある場合は、対象市場で表示されるカウントダウンを確認してください。このタイマーは、世界中で同時に終了するプロモーションを強制する仕組みではありません。表示された期限を過ぎると、選択した期限切れ時の動作に従います。

タイマー終了時の動作を決める

タイマー終了時を使用して、期限切れ時の状態を設定します:

  • タイマーを非表示 - カウントダウンを非表示にします。
  • ゼロを表示 - カウントダウンを表示したまま、0で停止します。
  • メッセージを表示 - カウントダウンを、入力した期限切れメッセージに置き換えます(例: 「タイマーが終了しました。オファーは引き続き利用できます。」)。

固定時間では、期限切れ時の動作が特に重要です。1分間のテストでは、0になった後もメッセージが表示され続け、カートとチェックアウトでは割引が引き続き適用されました。

{{timer}}変数を使用

コンパクトタイトルフィールドでは、ライブの残り時間を表示したい場所に{{timer}}変数を挿入できます。例:

Routine timer: {{timer}}

アプリは{{timer}}を進行中のカウントダウンに置き換えます。スティッキーバーにカウントダウンを表示を有効にすると、コンパクトタイトルはスティッキーバーにも再利用されるため、短く分かりやすい文言にしてください。フルレイアウトでは、タイトル、サブタイトル、数字ブロックを個別にスタイル設定するため、時間を1行に埋め込むことはありません。そのため{{timer}}は使用されません。ウィジェットのテキストで使用できるその他のプレースホルダーについては、テンプレート変数を参照してください。

タイマーのスタイルを設定

動作設定の下で、ウィジェットに合わせて外観を調整できます:

  • カラープリセットを適用するか、カウントダウンの角をメインウィジェットに合わせるを使用して、バンドルと角の丸みを揃えます。
  • カウントダウンのスタイルを開くと、背景、コンテナ(パディング、境界線、影、配置)、テキストを調整できます。フルレイアウトでは、タイトル、サブタイトル、数字、単位ラベルを個別にスタイル設定できます。

タイマーの位置をスティッキーバーに設定すると、上部に固定されたバーが端まで表示されるため、角が自動的に直角になります。同じカウントダウンをフローティングの追加ボタンバー内に表示する方法については、スティッキー追加ボタンを参照してください。

保存して結果をテスト

タイマー期限切れ後のコスメティックバッグの商品ページ。オファーの上とフローティングスティッキーバー内に期限切れメッセージが表示され、「Buy 2」の価格は$43.20です。
(1)両方のタイマーに期限切れメッセージが表示されています。(2)選択したオファーでは、アイボリーのスモールバッグ2個の価格は引き続き$43.20です。0になった後も、スティッキーな「カートに追加」操作は機能しました。

割引を保存し、割引が有効な対象商品ページを開きます。デスクトップとモバイルでタイマーを確認してください。期限切れをすぐにテストするには、一時的に1分に設定して0になるまで待ち、その後、意図した時間に戻します。期限切れ時の状態を確認し、「カートに追加」とチェックアウトを使用して、実際のオファーの動作を確認してください。

この例では、オファーの上に15分のコンパクトタイマーを表示しています。1分間のテストでは、0になるとタイマーメッセージが変わる一方、$24のバッグ2個には引き続き10%オフが適用され、カートとチェックアウトの商品小計は$43.20になりました。送料は別です。タイマーの文言は、この動作と一致させてください。

この記事は役に立ちましたか?

皆さまからのフィードバックがドキュメントの改善に役立ちます。

ありがとうございます。この記事の改善を続けていきます。

チームにチャットで相談しますか? まだご質問がありますか?

まだサポートが必要ですか?

チームへの連絡はワンクリックで完了します。メッセージをお送りいただければ、折り返しご連絡します。

サイトの動作維持、利用状況の測定、チャットウィジェットを開いた際の機能提供のために、いくつかのCookieを使用しています。詳しくはCookieポリシーをご覧ください。