カウントダウンの仕組み
すべてのカウントダウンを構成する3つの要素、コンテンツとタイミング、表示、デザインを説明します。
Countdown Timer Bar Samitaのカウントダウンは、4つのタイプのどれを選んでも、同じ要素で構成されています。これらを理解すれば、残りのドキュメントは、そのうちの1つについての詳細にすぎません。
1. 何を表示し、いつ動作するか - Settingsタブ
Section titled “1. 何を表示し、いつ動作するか - Settingsタブ”Settingsタブには、カウントダウンのコンテンツとタイミングがあります。
Contentは、買い物客が読むテキストです。タイマーでは見出しとサブタイトル、配送日では配送メッセージ、在庫バーでは在庫メッセージです。テキストフィールドには、{stock_number}や{delivered_max_date}などの変数を入れることができ、ページの読み込み時に、アプリが実際の値に置き換えます。
Timingは、カウントダウンをカウントダウンたらしめるものです。タイプによって内容が異なります。
| タイプ | タイミングの内容 |
|---|---|
| Countdown timer | Time type: 固定の終了日、訪問者ごとの分数、または毎日繰り返す時間枠 |
| Estimated delivery date | 発送と配送の日数範囲、稼働日、祝日、締め切り時刻 |
| Stock countdown | 時計はありません。時間ではなく在庫をカウントします |
| Cart countdown | 買い物客のカートが表示された時点から始まる、分単位のCountdown duration |
2. どこに表示されるか - Displayタブ
Section titled “2. どこに表示されるか - Displayタブ”Displayタブでは、誰にカウントダウンを表示し、どこに配置するかを決めます。
Conditionsでは、商品、コレクション、ページタイプ、顧客、言語、国で絞り込めます。リスト内のすべての条件はAll conditionsまたはAny conditionで結合され、現在のページが条件を満たした場合にのみ、カウントダウンが表示されます。
Display positionで、ページ上の配置を決めます。Product pageにチェックを入れると、アプリがカートに追加エリアのすぐ下に、カウントダウンを自動で配置します。それ以外の場所(ホームページのセクション、コレクションのバナー、カスタムテンプレートなど)には、Shortcodeをコピーして、テーマのアプリブロックから貼り付けます。
Device targetingで、デスクトップのみ、またはモバイルのみに限定することもできます。
全体像は、表示の概要をご覧ください。
3. どのように見えるか - Designタブ
Section titled “3. どのように見えるか - Designタブ”Countdown timerとEstimated delivery dateには、色、フォント、背景、枠線、余白、要素ごとのスタイル設定があるDesignタブがあります。Stock countdownとCart countdownでは、(より少ない)デザインオプションが、代わりにSettingsタブ内にあります。
どのタイプにも、設定項目ではカバーできない内容のための**Custom CSS (Developer Zone)**ボックスが最後にあります。カウントダウンのデザインをご覧ください。
ActiveまたはDraft
Section titled “ActiveまたはDraft”上記すべてとは別に、各カウントダウンにはステータスがあります。
- Active - タイミングと条件に従って、ストアフロントで公開されます。
- Draft - 保存済みで編集もできますが、表示されることはありません。
ステータスは、保存前にビルダーで設定し、後からCountdownsリストで切り替えられます。
ストアフロントで実際に起こること
Section titled “ストアフロントで実際に起こること”買い物客がページを読み込むと、アプリの埋め込みのスクリプトが、アクティブなカウントダウンのうちそのページに一致するものを確認し、ブラウザ上で残り時間を計算して、一致するものを表示します。テーマには何も組み込まれていないため、アプリで保存した変更は、テーマを再公開しなくても反映されます。
詳細は、仕組みをご覧ください。