配送希望日時セレクター（営業日計算つき）— 「いつ届く？」の不安を購入の後押しに

📅「いつ届くかわからないから、今日はやめておこう」——配送日が選べないだけで、買い物は止まる

贈答品、生鮮品、冷蔵・冷凍商品、受け取り日時を合わせたい大型商品——「届く日が読めない」というだけで、購入を翌週に先延ばしされたり、別のストアに流れてしまうことは珍しくありません。注文時に「最短でいつ届くか」「自分が受け取れる日を指定できるか」が明確になるかどうかは、購入を後押しする決定的な情報です。

このセクションは、注文締切時刻・発送業務の休業日・商品ごとのリードタイムを踏まえて「最短お届け日」を自動で計算し、カレンダー形式で配送希望日と時間帯を受け付けます。顧客が選んだ日時はカート属性として保存され、そのまま注文情報に引き継がれます。配送日指定アプリは月額9〜37ドルが相場ですが、本セクションはテーマに直接組み込まれた買い切り型のため、追加コストなくストアに装着できます。

🛠️ 主な機能・特徴

⏰ 締切時刻と営業日を踏まえた「最短お届け日」を自動算出

「本日 12:00 までのご注文で、最短 6月3日（火）にお届け予定」——このようなアナウンスを、設定だけで自動生成・自動更新します。締切時刻を過ぎると「翌営業日基準」に切り替わり、休業曜日・休業日も自動でスキップします。

• 注文締切時刻（HH:MM、日本時間）を設定するだけで、本日締切／翌営業日締切の表示を自動切り替え
• 標準リードタイム（0〜30営業日）に基づき最短お届け日を算出
• 締切時刻の到来時には、カレンダーの最短日・締切ラベルが自動で再描画
• 「最短日表示」の前後文言（例：「最短」「にお届け予定」）は自由にカスタマイズ可能

📦 商品別・コレクション別のリードタイム設定（最大50ブロック）

「通常商品は2営業日、受注生産品は7営業日、冷凍商品は3営業日」——カート内の商品ごとに異なるリードタイムを持つストアでも、ブロック追加だけで対応できます。複数商品が混在する場合は、最も長いリードタイムが自動で採用されます。

• 商品別リードタイム：特定商品にだけ独自のリードタイム（営業日数）を適用
• コレクション別リードタイム：コレクション単位でリードタイムを一括指定（生鮮・受注生産・大型商品など）
• カートに複数のリードタイム対象商品がある場合は、最長のリードタイムで自動算出
• 1セクションあたり最大50ブロックまで追加可能

🚫 商品別・コレクション別の「日時指定不可」ルール

定期便商品、メーカー直送品、一部の冷蔵商品など、「この商品が含まれるカートでは配送日時を選べない」というケースにも対応します。指定不可商品がカートに入った瞬間、セクション全体が指定不可メッセージに切り替わります（配送を伴わないデジタル商品だけのカートは、設定不要で自動的に対象外となります）。

• 商品別指定不可ブロック：対象商品とカスタムメッセージを設定
• コレクション別指定不可ブロック：対象コレクション内の全商品に一括適用
• 指定不可商品がカートに入ると、自動的に専用メッセージに切り替わり、誤った日時指定を防止

🕒 時間帯選択にも対応・選択肢も自由に編集

• 時間帯選択のON/OFFをワンクリック切り替え
• 「指定なし／午前中／12:00〜14:00」など、選択肢を1行1つで自由に編集
• 日付が未選択のうちは時間帯セレクトが自動でグレーアウト（順序通りの入力を誘導）
• 選択肢の文言を変更したときは、保存済みの選択肢が無効化されると自動でクリア＆再案内

🔄 カート操作に追従して自動で再計算

商品の追加・数量変更・削除があるたびに、セクションがカート状態を再取得して最短お届け日・指定可否を再計算します。ページ遷移なしで、常に最新の条件が表示されます。

• カート変更APIをフック（fetch / XMLHttpRequest 両対応）して即時再描画
• Dawn 系の cart:update / cart:added / cart:refresh イベントにも対応
• ブラウザの戻る（pageshow）でも自動再取得して整合性を維持
• 配送が不要な商品しかカートにない場合は「配送商品なし」メッセージに自動切り替え
• カート変更でリードタイムが伸びて選択済みの日付が範囲外になった場合は、自動でクリアして再選択を案内

📆 発送業務の休業曜日・休業日を細かく設定

• 休業曜日（日曜〜土曜）を個別にON/OFF — リードタイムの営業日数からは除外、ただしお届け希望日としては選択可
• 休業日（特定日・毎年同日）を1行1日でテキスト入力（例：2026-08-13 または 01-01）
• 年末年始・お盆・GWなど、毎年繰り返す休業日は MM-DD 形式で一度登録すれば翌年以降も自動適用

💾 カート属性に保存・チェックアウトと注文画面に引き継ぎ

• 選択した配送希望日時はカート属性（お届け希望日 / お届け希望時間帯）として保存
• そのままチェックアウト・注文情報・管理画面の注文詳細に表示されるため、受注処理の動線がそのまま使える
• 選択解除ボタンで一括クリアが可能
• 保存完了・保存失敗・日付再選択など、状態別のメッセージを自由にカスタマイズ

📅 日本語対応の使いやすいカレンダー入力

• 軽量で実績ある flatpickr カレンダーを採用（日本語ローカライズ済）
• 表示形式は「2026年6月3日（火）」のように日本語の和暦表記
• 最短お届け日より前の日付は自動でグレーアウト
• 最短日から選択できる日数は10〜180日の範囲で調整可能

🎨 ストアのトーンに合わせて細部まで調整できる（63の設定項目）

• パネル：背景色・枠線色・枠線太さ（0〜5px）・角丸（0〜40px）・余白（PC/モバイル別）
• 入力欄：背景色・文字色・枠線色・枠線太さ・角丸を個別指定
• 本文色・最短お届け日強調色・ラベル色・保存メッセージ色を個別指定
• 本文サイズ・最短日サイズ・ラベルサイズ（PC/モバイル別）
• 各種文言（最短日前後・補足注釈・配送商品なし・指定不可・保存完了・再選択案内・保存失敗）を完全カスタマイズ
• 見出しテキスト・色・サイズ（PC/モバイル別）
• PC/モバイルの余白（上下左右）を個別調整
• 背景色・最大幅（px）

📱 どの画面サイズでも違和感なく溶け込む

• PC/モバイルレスポンシブ。ブレイクポイント750px（PC：日付と時間帯を2カラム、モバイル：1カラム）
• カレンダーはタップ操作にも最適化、入力欄は readonly で誤入力を防止
• ステータスメッセージは aria-live="polite" 対応でスクリーンリーダーにも配慮

📍 「カート画面で最後のひと押し」を生むための専用設計

本セクションは、購入を最終決定する直前の「カートページ」に配置することを前提に設計されています。最短お届け日と配送希望日選択を、購入意思決定の直前のタイミングで明示することで「いつ届くか分からない」という最後の不安を解消し、カート離脱の抑制と即時購入の後押しを狙う構成です。

• 配置先：カートテンプレート（cart.json）専用
• テーマエディターの「カート」テンプレートにブロックとして追加してご利用ください
• 商品ページ・コレクションページ・トップページなど他テンプレートへの配置は仕様上できません

💰 料金の考え方 — アプリと比べてください

※ $1=150円換算の概算です。アプリのインストール・権限付与は不要で、デモ確認用オプションも内蔵しているため、配送不要な商品ストアでも事前に表示確認ができます。

制作を請け負う方へ: 営業日計算・商品別リードタイム・カート連動まで含めてゼロから実装すると8〜15時間の工数です。本セクションなら導入は10分ほど。クライアント様のストアでもそのままお使いいただけます。

🔧 開発・検証について

Copilifyのセクションは、Shopify Plusパートナー企業に所属する現役エンジニアが開発しています。
月商5,000万円超のECサイト構築を手がける実案件と同じ基準で、コードの品質・表示速度・テーマエディタの使いやすさまで検証済みです。

• Shopify標準のLiquid・CSS・JavaScriptのみで構築し、特定テーマの専用機能に依存しない設計。Online Store 2.0対応テーマであれば基本的にご利用いただけます
• 開発・表示確認はDawn系テーマで実施。世の中すべてのテーマでの検証はできているわけではないため、ご不安な場合はご購入前にテーマ名を添えてお問い合わせください
• 設定画面はすべて日本語ラベル、導入手順は動画付きガイドでご案内
• 導入でつまずいた場合は無料サポートで解決まで対応