最初のカウントダウンを作成する

テンプレートの選択から商品ページでのカウントダウン表示まで、実際に動作するセールタイマーを最初から最後まで作成します。

このウォークスルーでは、よく使われるカウントダウンを1つ完成させます。固定の終了日までカウントダウンし、終了すると消える、商品ページのセールタイマーです。高度なオプションは使わずに、ビルダーのすべての部分(コンテンツ、タイミング、デザイン、表示)を一通り扱います。

先にアプリの埋め込みをオンにしてください。オンになっていないと、ここで作成するカウントダウンはストアフロントに表示されません。

新しいカウントダウンを開始する
Section titled “新しいカウントダウンを開始する”

アプリを開きます。ダッシュボードの2番目のセットアップカードで、Create countdownをクリックします。(CountdownsページのCreate countdownボタンでも同じ操作ができます。)

ダッシュボードのCreate a countdownカードから、カウントダウンを開始します。
テンプレートを選ぶ
Section titled “テンプレートを選ぶ”

Countdown templatesページが開き、上部に4つのタイプタブ(Countdown timer、Delivery date、Stock countdown、Cart countdown)が表示されます。Countdown timerのままにします。

デザインを閲覧するか、名前やシーンで検索します。black fridayと入力すると、OnyxやRibbonといった名前であっても、そのシーズンのデザインが見つかります。気に入ったものが見つかったら、そのカードのSelectをクリックします。

テンプレートのグリッドからデザインを選びます。後からすべてを変更できます。
カウントダウンに名前を付ける
Section titled “カウントダウンに名前を付ける”

選択したデザインがすでにプレビューに表示された状態で、ビルダーが開きます。上部でカウントダウンに名前を付けます。「Spring sale timer」のような名前です。この名前は自分だけが使うもので、買い物客に表示されることはありません。
タイマーのテキストを入力する
Section titled “タイマーのテキストを入力する”

SettingsタブでContentセクションを開き、タイマーに表示する内容を設定します。
- Title - 大きな見出しです。たとえば🔥 Hurry up! 🔥
- Subtitle - 数字の上の行です。たとえばSale ends in:
- Timer - 各数字の下のラベルです。Days、Hours、Min、Sec
Contentセクションで、タイマー上のすべてのテキストを管理します。
終了日を設定する
Section titled “終了日を設定する”

引き続きSettingsで、Setting timerセクションを開きます。Time typeはCountdown to a dateのままにします。これがデフォルトで、この例に必要なモードです。

Date betweenのEndに、セールが終了する日時を設定します。タイマーを今から動かすために、Startは空欄のままにします。セールが実際に始まるまでタイマーを非表示にしたい場合は、入力してください。

Countdown to a dateがデフォルトのTime typeです。End dateに期限を設定します。
0になったときの動作を選ぶ
Section titled “0になったときの動作を選ぶ”

日付の下で、When countdown timer endをHide countdown blockに設定します。期限が過ぎると、タイマーは00:00:00のまま残らず、消えます。

ほかの2つのオプションについては、タイマー終了時の動作をご覧ください。
表示場所を選ぶ
Section titled “表示場所を選ぶ”

Displayタブに切り替えます。Show countdown onで、Product pageにチェックを入れます。これで、すべての商品ページのカートに追加エリアのすぐ下に、タイマーが配置されます。

Product pageにチェックを入れると、すべての商品ページにタイマーが表示されます。
対象の商品を絞り込む(任意)
Section titled “対象の商品を絞り込む(任意)”

表示位置の上にあるConditionsセクションで、どの商品にタイマーを表示するかを決めます。カタログ全体を対象にするにはAll Productsのままにするか、コレクション、特定の商品、顧客グループを対象に変更します。表示条件をご覧ください。
Activeで保存する
Section titled “Activeで保存する”

Saveをクリックします。ステータスのコントロールがDraftではなくActiveになっていることを確認してください。Draftは保存されますが、表示されることはありません。

ステータスをActiveに設定して、カウントダウンを保存します。
ストアフロントで確認する
Section titled “ストアフロントで確認する”

本番のストアフロントの商品ページを、新しいタブで開きます。ダッシュボードのOpen my storeボタンがショートカットです。カートに追加ボタンの下に、カウントダウンしているタイマーが表示されるはずです。

スマートフォンでも確認するか、ブラウザのウィンドウを狭めてみてください。小さい画面では、テーマによって商品ページのレイアウトが異なるため、ほとんどの買い物客が見る状態でタイマーを確認しておく価値があります。

本番の商品ページに表示された、完成したタイマー。