カート・カートドロワー・商品ページへの設置

配送日時に関する設定を行っても、それだけではストアに何も表示されません。カートページと商品ページはアプリブロック、カートドロワーはアプリ埋め込みをテーマエディタで有効にします。

なぜ自動で設置されないの？：ブロックをどの位置に表示するかはテーマのデザインによって異なるため、意図しない場所に自動追加されないよう、設置は手動で行っていただく仕様になっています。

ブロックを追加しようとすると「Liquid templates don't support sections and blocks.」のようなエラーが出る場合は、お使いのテーマが旧形式のため、テーマエディタからは追加できない可能性があります。「テーマエディタでブロックを追加できない場合（コードによる手動設置）」をご覧ください。

1. カートページ：「配送日時選択」ブロック

お客様が配送希望日・時間帯を選ぶためのブロックです。

TimePort ヤマト運輸の左メニュー「配送日時設定」（上部の「基本設定」タブ）にある「テーマエディタを開く」ボタンを押します（カートページのテーマエディタが開きます）。
テーマエディタの左サイドバーで、設置したいセクションを開き「ブロックを追加」、または左サイドバー下部の「セクションを追加」を選びます。
「Apps」タブから「配送日時選択」を選びます。
表示したい位置にドラッグで移動します。
「保存」を押して完了です。

注意：このブロックはカートページ専用です。 カートドロワーは、次の専用アプリ埋め込みを使用します。

見た目の調整

ブロックを選択した状態で、右側の設定パネルからアクセントカラー・フォントサイズ・見出しや最短ご指定可能日/注釈の色・サイズ・背景色・フォームの枠線カラー/角丸などを調整できます。文言（ラベルなど）自体の変更は、TimePort ヤマト運輸側の「表示・非表示カスタマイズ」画面で行います。

2. カートドロワー：「配送日時選択（カートドロワー）」アプリ埋め込み

画面の端からスライド表示されるカートドロワーへ配送日時選択を表示できます。

TimePortの「配送日時設定」にある「カートドロワーを有効にする」ボタンを押します。
テーマエディタの「アプリ埋め込み」で「配送日時選択（カートドロワー）」をオンにします。
対象商品をカートへ追加し、カートアイコンを押して表示位置を確認します。
「保存」を押して完了です。

通常は設定変更不要です

「カートの表示形式」は「自動判定（推奨）」のままご利用ください。この設定は、テーマのカート表示形式自体を変更するものではありません。

次の画像のように「自動判定（推奨）」が選択され、「購入ボタンのCSSセレクター」が空欄であれば、通常の設定状態です。CSSセレクターは、後述する自動検出ができない場合だけ入力します。

カートドロワーを開いても配送日時選択が表示されない場合だけ、次の順で確認します。

「カートの表示形式」を「カートドロワーを使用」へ変更します。
カートドロワーを閉じてから、もう一度開きます。
それでも表示されない場合は、次の「自動検出できない場合」の手順へ進みます。

カートドロワーを使用しないテーマでは、アプリ埋め込みをオフにしてください。アプリ埋め込みを残したままドロワー機能を停止したい場合は、「カートページを使用」を選択します。

主要テーマではカートドロワー内の購入ボタンを自動検出します。テーマエディタのプレビュー左下には、確認結果が表示されます。

自動検出できない場合

先にカートドロワーを開き、プレビュー左下に表示された候補を次の順で確認します。

「対象を確認」を押し、購入ボタンが緑色の枠で表示されることを確認します。
「この候補を試す」を押し、配送日時選択の表示位置を確認します。
問題がなければ「コピー」を押し、アプリ埋め込み設定の「購入ボタンのCSSセレクター」へ貼り付けます。
カートドロワーを再度開いて表示を確認し、テーマを保存します。

数量変更・削除・閉じるボタンなどは候補から除外されます。候補が表示されない場合は、購入ボタンのCSSセレクターを手動で入力できます（例：#CartDrawer-Checkout）。

カートページ用ブロックとカートドロワー用アプリ埋め込みを両方有効にした場合も、選択した配送日時はカート属性を通じて共有されます。

3. 商品ページ：「最短お届け日時」ブロック

商品ページに、その商品の最短お届け目安日を表示するブロックです。

TimePort ヤマト運輸の左メニュー「配送日時設定」（上部の「商品詳細ページ」タブ）で、「商品詳細ページに最短お届け日時を表示する」がオンになっていることを確認します（オフのままだと、ブロックを設置しても何も表示されません）。
同じ画面の「テーマエディタを開く」ボタンから、商品ページのテーマエディタを開きます。
カートページと同様の手順で「Apps」タブから「最短お届け日時」を選び、設置します。

見出しの文言・表示テンプレート・注釈文言はTimePort ヤマト運輸側の「商品詳細ページの設定」画面で設定します。テーマエディタ側では、配色・フォントサイズ・余白・枠線/背景の表示など、見た目のみを調整します（表示位置は中央寄せに固定されています）。

うまく表示されない場合

ブロックを設置したのに何も表示されない場合は、まずテーマエディタの「デザインモード」（プレビュー中）で確認してみてください。表示されない理由（該当する配送日時設定がない、商品タグが一致しない、など）が案内文として表示されます。
実際のストア（プレビューではない本番の画面）では、該当する配送日時設定がない場合、ブロックは非表示になります。表示されないこと自体が「その商品には配送日時設定が紐づいていない」というサインです。「配送日時設定の基本」を確認し、該当商品のタグに合う設定があるかご確認ください。

次に読む記事

注文完了後の画面にも配送日時の確認・変更機能を設置したい場合は「注文完了画面の設定」へ進んでください。