商品ページに配送日時指定を表示する設定

商品ページに配送希望日ウィジェット(メインカレンダー)を設置している場合、配送可能日は通常カートに入っている商品から計算されます。そのため、カートが空の状態で商品ページを開くと、表示中の商品の グループ化 設定がカレンダーに反映されません。

本設定をONにすると、商品ページのカレンダーは**「表示中の商品をカートに入れた時」と同じ状態**で配送可能日を計算するようになります。カートに既に他の商品が入っている場合は、それらと表示中の商品を合算した状態で計算されます。

設定方法

設定はアプリ管理画面ではなく、Shopify テーマエディタ(テーマカスタマイズ画面)から行います。

  1. Shopify 管理画面 → オンラインストア → テーマ → カスタマイズ を開きます。
  2. 商品ページのテンプレートを開き、「配送日指定」セクション(“Delivery Date” / id: cart-dellivery-1988)を選択します。
  3. 「配送日時指定ウィジェットモード」 から 「商品ページに表示して商品の個別設定を反映」 を選択します。
  4. 必要に応じて 「商品ページ注記文」 を編集します(後述の「合算時の自動注記」参照)。
  5. 保存します。

テーマエディタのセクション設定

ウィジェットモード(3 つから選択)

動作
カートに入れるボタンに追従(デフォルト)既存の動作。「カートに入れる」ボタン付近に自動表示
この場所に配送日時指定を表示セクションを設置した場所に固定表示
商品ページに表示して商品の個別設定を反映本機能。商品ページに表示し、表示中の商品をカートに加えた状態で計算

動作

  • 商品ページのカレンダーは、カート内の商品 + 表示中の商品(在庫切れ含む) で配送可能日を計算します。
  • variantを切り替えると、自動的に再計算されます。
  • 表示中の商品が既にカートに入っている場合は、二重に加算しません。
  • ドロワーカート(オーバーレイ)を開いた時もカレンダーの計算結果は一貫します(カート + 表示中商品)。

商品ページに表示されるカレンダー

なお、商品ごとのグループ化(商品ページに表示しない) の対象商品では本設定は適用されず、従来どおりカート内商品のみから計算されます。

合算時の自動注記(v2 新機能)

カートに別グループの商品が入っている場合、合算による最短日が「表示中の商品単体の最短日」より後ろにずれることがあります。本機能は、このずれが発生した時のみ配送日入力欄の下に自動で注記を表示します(ずれがない時は表示されません)。

注記文はテーマエディタの 「商品ページ注記文」 で編集できます。次の変数が利用可能です:

変数
[product.shortestDate]表示中商品単体での最短日
[cart.shortestDate]合算後(カート+表示中商品)の最短日

デフォルト文言(日本語):

他の商品がカートに含まれているため、本来の最短日 [product.shortestDate] ではなく [cart.shortestDate] からの選択となります。

優先順位グループ配送希望指定可能日適用商品
1グループ11-7日商品A
2グループ210-20日商品B

商品Bの商品ページを開いた時のカレンダー:

  • モード「カートに入れるボタンに追従」または「この場所に表示」(カート空): どのグループにも紐付かず、優先順位1のグループ1(1-7日)が表示されます。
  • モード「商品ページに表示して商品の個別設定を反映」(カート空): 表示中の商品Bだけがカートに入った状態で計算されるため、グループ2(10-20日) が表示されます。
  • モード「商品ページに表示して商品の個別設定を反映」(カートに商品Aあり): 商品A + 商品B で計算されます。「複数グループの設定…」がONであれば両グループの交差集合、OFFであれば優先順位の高いグループ1(1-7日)が表示されます。この時、グループ2 の本来の最短日との差分が自動注記で表示されます。

関連設定: 最短日の常時表示

本機能とは独立して、配送日入力欄の下に最短日を常時表示するチェックボックスもあります。

  • 設置場所: テーマエディタの「配送日指定」セクション(または埋め込みブロック)の 「配送日入力欄の下に最短日を表示する」
  • 動作: チェックON時、ずれの有無に関わらず常に最短日を表示
  • 競合時の優先順位: 本機能の自動注記(合算ずれ時)が優先

注記文の変数は [cart.shortestDate] のみ利用可能。デフォルト:

最短の配送日は [cart.shortestDate] です。

注意事項

商品ページとカート画面の関係

商品ページのカレンダーは「この商品をカートに入れた時の配送可能日」を表します。商品をカートに追加すると、商品ページとカート画面のカレンダーは同じ計算結果になります。

ドロワーカート併用時の挙動

ドロワーカート(画面上に重ねて開くカート)の中にメインカレンダーを設置している場合、本機能はドロワー側のカレンダーも同じ計算(カート+表示中商品)を行います。

そのためドロワーカートを商品ページで開くと、見た目(実カート)とカレンダーの計算根拠(実カート + 表示中商品)が食い違って見える場合があります。

例: カートに 商品A が入った状態で 商品B の商品ページ を開き、ドロワーカートを開いた場合

表示要素内容
ドロワーカート内の商品リスト商品A のみ
ドロワーカート内のカレンダー商品A + 商品B で計算(商品B はカートに未追加なのに計算に含まれる)

技術的に「これはドロワーカート内のカレンダーである」と判別する手段がないため、本機能と完全に整合させることはできません。本機能を利用するストアでは、メインカレンダーは 商品ページとカートページのみ に設置することをおすすめします。

スコープ外

  • カート画面・チェックアウト画面の挙動は従来どおりです(カート内のすべての商品で計算)。
  • コレクションページのクイックビュー等、複数商品が同時に表示されるページは対象外です。
インストール
テックブログ