配送予定日を作成する
レイアウトとメッセージの設定から、本番の商品ページでの確認まで、配送日ウィジェットを最初から最後まで作成します。
このガイドでは、実際の配送期間を示すメッセージ、注文の進行バー、そしてそれらの元になる発送と配送のルールまで、配送予定日を一通り作成します。
開始する前に、アプリの埋め込みがオンになっていることを確認してください。オンになっていないと、ストアフロントに表示されません。
-
カウントダウンを作成する
Section titled “カウントダウンを作成する”ダッシュボードまたはCountdownsページでCreate countdownをクリックします。
-
Delivery dateのレイアウトを選ぶ
Section titled “Delivery dateのレイアウトを選ぶ”Countdown templatesページで、タイプタブをDelivery dateに切り替えます。レイアウトは4種類あります。
レイアウト 表示内容 Message and progress bar メッセージが進行バーの上に表示されます Progress bar and message 進行バーがメッセージの上に表示されます Message only 配送のテキストのみ Progress bar only Ordered → Dispatched → Deliveredのバーのみ 使用したいレイアウトのSelectをクリックします。レイアウトは後から、ビルダーのLayoutコントロールで切り替えられます。
-
名前を付ける
Section titled “名前を付ける”「Standard UK delivery」のような名前を付けます。自分だけに表示されます。
-
メッセージを書く
Section titled “メッセージを書く”Settingsタブで、Contentセクションを開きます。Messageフィールドはリッチテキストエディタです。太字、色、改行を使えるほか、アプリが実際の日付に置き換える変数も挿入できます。
新規の配送日には、次のようなメッセージが最初から入っています。
🚚 Free Shipping to {country_flag} {country_name} ✅ Order within the next {cutoff_time} for delivery between {delivered_min_date} - {delivered_max_date}
ストアに合わせて文言を編集し、必要な変数は残します。変数の一覧は配送変数をご覧ください。
Messageフィールドでは、独自の文言と日付変数を組み合わせます。
-
進行バーを設定する
Section titled “進行バーを設定する”引き続きContentで、Progress barセクションを開きます。3つのステージがあり、それぞれに同じ4つのフィールドがあります。
ステージ デフォルトのタイトル Order placement Ordered Order dispatched Order Dispatched Order delivered Order Delivered 各ステージでは、次の項目を設定できます。
- Icon - アプリのアイコンライブラリから選択します
- Title - アイコンの下に表示されるラベルです
- Description - タイトルの下に表示される任意の1行です
- Tooltip - 買い物客がそのステージにカーソルを合わせたときに表示されるテキストです
2ステージのバーにしたい場合は、Order dispatchedステージをオフにできます。
各進行バーのステージには、アイコン、タイトル、説明、ツールチップがあります。
-
発送と配送の期間を設定する
Section titled “発送と配送の期間を設定する”Date range settingセクションを開き、各ステージにかかる日数を設定します。
- Order dispatched days range - 注文が発送されるまでのMin daysとMax days、および発送する曜日。デフォルトは1〜3日、月曜日から金曜日です。
- Order delivered days range - 配送中のMin daysとMax days、および配送が届く曜日。デフォルトは3〜5日、毎日です。
祝日や日付形式を含む詳細は、日付範囲の設定をご覧ください。
発送と配送の期間から、メッセージに表示される配送期間が算出されます。
-
締め切り時刻を設定する
Section titled “締め切り時刻を設定する”引き続きDate range settingで、1日の締め切り時刻を設定します。この時刻を過ぎた注文は、翌日の注文として扱われます。デフォルトは23:59で、実質的に「終日」を意味します。
実際の締め切りが曜日によって異なる場合は、曜日ごとに設定できます。締め切り時刻をご覧ください。
-
日付と時刻の形式を選ぶ
Section titled “日付と時刻の形式を選ぶ”Date & time settingsで、Date formatとTime formatを選択します。
日付形式は、
MMM DD(デフォルト、「Mar 14」)からDD/MM/YYYY、dddd, MMMM DD, YYYY(「Friday, March 14, 2026」)までさまざまです。時刻形式は{cutoff_time}のカウントダウンの表記を決めるもので、Hrs, Mins, SecsからH, M, Sまであります。お客様が慣れている表記を選んでください。
DD/MMとMM/DDは、国によって意味が異なります。 -
Designタブでスタイルを調整する
Section titled “Designタブでスタイルを調整する”Designに切り替えて、メッセージウィジェットと進行ウィジェットのフォント、色、サイズ、余白を調整します。カウントダウンのデザインをご覧ください。
-
表示場所を選ぶ
Section titled “表示場所を選ぶ”DisplayタブのShow countdown onでProduct pageにチェックを入れるか、Shortcodeをコピーして好きな場所に配置します。
Conditionsで表示を絞り込みます。あるコレクションで正しい配送の約束が、別のコレクションでは正しくないことがよくあります。表示条件をご覧ください。
-
Activeで保存する
Section titled “Activeで保存する”ステータスをActiveに設定して、Saveをクリックします。
-
ストアフロントで確認する
Section titled “ストアフロントで確認する”本番のストアフロントで、該当する商品ページを開きます。次の点を確認してください。
- 日付が妥当であること。過去の日付や、極端に先の日付になっていないこと。
- 国名と国旗が、閲覧している地域と一致していること。
- 締め切りまでのカウントダウンが動いていること。
その後、締め切り時刻を過ぎてからもう一度確認します。配送期間が1日先に進んでいるはずです。