【2026年最新・Dawn対応】Shopify商品ページに配送日カレンダーをアプリ不要で実装する方法｜5デザイン対応・「カートへ入れる」ボタン前に設置

2026年最新版として、実務ベースで厳選しています。

「配送日指定をカートではなく商品ページに入れたい」「アプリの月額費用を払わずに実装したい」「テーマの雰囲気に合わせてデザインを選びたい」——Shopify実務でよく出るこの要望に、コードだけで答えます。

この記事では、こんな疑問・悩みにお答えします：

配送日カレンダーをアプリなしで実装できる？
「カートへ入れる」ボタンの前に設置するにはどうする？
選んだ日付は注文データにどう保存される？
土日・祝日を選択不可にするには？
Dawn以外のテーマでも使える？

1 迷ったらここを見る：クイックガイド
2 実装の全体像
- 2.1 選んだ日付はどこに保存される？
3 5種類のデザイン
4 実装前に必ずやること：2つの準備
- 4.1 準備①：テーマをバックアップする
- 4.2 準備②：カートタイプを「ページ」に変更する（最重要）
5 実装の4ステップ概要
6 カスタマイズできる設定値
7 「そこが知りたかった」：よくある疑問に答えます
8 エンジニア目線のポイント
9 詳細コードはnoteで公開しています
10 まとめ
11 関連記事
12 Shopifyをこれから始める方へ

迷ったらここを見る：クイックガイド

アプリを使いたくない・月額コストを抑えたい → Liquid＋CSS＋JSのみで実装可能
設置場所 → main-product.liquidの buy_buttons 直前に挿入
日付の保存先 → line_item_properties（注文の商品備考）に自動記録
土日・祝日スキップ → JS設定値を変更するだけで対応
実装前の必須作業 → カートタイプを「ドロワー」から「ページ」に変更
コードをすぐ見たい → 5デザイン分の完全コードはnoteで公開中（¥980）

実装の全体像

配送日カレンダーの仕組みは3つのパーツで成り立っています。

① カレンダーUI

CSS + JavaScriptで描画。土日・祝日を自動でグレーアウト。月ナビゲーション対応。

→

② 日付をinputに保存

クリックした日付を hidden input にセット。name属性で注文データに紐付け。

→

③ 注文に自動記録

「配送希望日：〇月〇日」がカート・注文管理・メール通知に自動で表示される。

選んだ日付はどこに保存される？

Shopifyには line_item_properties（ラインアイテムプロパティ）という仕組みがあります。商品ごとにカスタム情報を付けてカートに追加できる機能で、カレンダーで選択した配送希望日をこのプロパティとして保存します。

注文管理画面・注文確認メール・CSVエクスポートに以下のように自動表示されます：

商品名 ×1

　配送希望日：2026年5月10日（日）

エンジニア目線で重要なのは、このデータが受注管理システムのCSVインポートにも自動で含まれる点です。「Lineitem property 配送希望日」列としてエクスポートされるため、ネクストエンジン・GoQSystem等との連携にも使えます。

5種類のデザイン

テーマや取り扱い商材に合わせて選べる5デザインを用意しています。

デザイン名	雰囲気・配色	向いている商材	クラス名
①アパレルスタイル	モノトーン・直線・スタイリッシュ	ファッション・アパレル・バッグ	style-apparel
②ソリッドスタイル	グレー系・角丸・ビジネスライク	食品・家電・日用品・雑貨	style-solid
③カワイイスタイル	ピンク系・丸み・パステルカラー	コスメ・スイーツ・ギフト・ベビー	style-cute
④ミニマルスタイル	余白多め・色を使わない・洗練	インテリア・ハイエンド・アート	style-minimal
⑤ナチュラルスタイル	グリーン・ベージュ・温かみ	食品・ハンドメイド・植物・アウトドア	style-natural

※クラス名はLiquidコードに1箇所だけ書くだけで切り替え完了です。

実装前に必ずやること：2つの準備

準備①：テーマをバックアップする

コードを編集する前に、現在のテーマを必ず複製してバックアップを取ってください。失敗してもすぐに元に戻せます。

管理画面 →「オンラインストア」→「テーマ」→ 現在のテーマの「…」メニュー →「複製」

準備②：カートタイプを「ページ」に変更する（最重要）

Dawnのデフォルトは「ドロワーカート」（画面右からスライドして出るカート）です。ドロワーカートのままでは line_item_properties がうまく送信されないため、カートをページタイプに変更する必要があります。

⚠️ これを忘れると「カートに配送日が表示されない」という最多エラーが発生します。必ず先に完了させてください。

変更手順：管理画面 →「オンラインストア」→「テーマ」→「カスタマイズ」→ 上部の「設定」（歯車アイコン）→「カート」→「カートタイプ」→「ページ」→ 保存

実装の4ステップ概要

詳細なコードと手順はnoteで公開していますが、全体の流れを把握しておきましょう。

CSSファイルを作成する（約10分）

assetsフォルダに delivery-calendar.css を新規作成。共通CSS＋好みのデザインCSSを貼り付けて保存。

JavaScriptファイルを作成する（約15分）

assetsフォルダに delivery-calendar.js を新規作成。設定値（最短日数・休日リスト）を自分のストアに合わせて変更して保存。

main-product.liquidを編集する（約15分）

sections/main-product.liquid を開き、{%- when 'buy_buttons' -%} の直前にカレンダーのLiquidコードを挿入して保存。

動作確認（約5分）

商品ページでカレンダー表示確認 → 日付を選択 → カートへ追加 → カートページで「配送希望日：〇月〇日」が表示されていれば完成。

カスタマイズできる設定値

JavaScriptファイルの冒頭にある設定値を変更するだけで、ストアに合わせた調整ができます。コードの知識がなくても設定変更だけなら対応できます。

設定項目	デフォルト値	変更例
最短配送日数	2日後	翌日配送対応なら1・受注生産なら7など
最長選択可能日数	30日先	ギフト需要が高ければ60〜90など
土曜を除外	true（除外する）	土曜配送OKならfalse
日曜を除外	true（除外する）	日曜配送OKならfalse
祝日・休業日リスト	2026年祝日15日分	年末年始・夏季休暇を追加
日付フォーマット	日本語（2026年5月10日）	isoに変更で2026-05-10形式

「そこが知りたかった」：よくある疑問に答えます

Q. Dawn以外のテーマでも使える？
基本的な仕組みは同じです。ただし挿入箇所のファイル名・コードの構造がテーマによって異なります。Horizonも同様の手順で対応可能です。有料テーマ（Prestige等）はmain-product.liquidの構造が独自なため、挿入箇所を確認してから作業してください。
Q. カートではなくチェックアウト画面で選ばせることはできる？
Shopify Plusプラン＋Checkout UI Extensionsを使えば可能です。ただしLiquidだけでは実現できず、Functionsを使ったカスタムアプリの開発が必要になります。本記事の実装（商品ページ）が最も手軽で現実的な選択肢です。
Q. 配送日の選択を必須にしたい（選ばないとカートに入れられないようにしたい）
JavaScriptでフォーム送信時のバリデーションを追加することで対応できます。コードはnoteの有料部分で公開しています。
Q. 年末年始・お盆の休業日の設定はどうする？
JavaScriptの設定値にある「HOLIDAYS」配列に日付を追加するだけです。例：'2026-12-29' のように書き加えると、その日はカレンダーでグレーアウト（選択不可）になります。毎年1回、年始に祝日リストを更新するだけで維持できます。
Q. 複数商品を買ったとき、それぞれ別の配送日を指定できる？
できます。配送日はline_item_propertiesとして商品ごとに保存されるため、カートに異なる商品を入れてそれぞれ別の日を指定することが可能です。
Q. テーマを更新したらカレンダーが消えてしまった
assetsのCSS・JSファイルはテーマ更新で消えません。消えるのはmain-product.liquidへの挿入コードだけです。STEP 3の作業を再度行えば5分で復旧できます。更新前にコードをテキストファイルにコピーしておくと安心です。

エンジニア目線のポイント

カレンダーUIはすべてVanilla JavaScript（ライブラリなし）で実装しています。jQueryやDatepickerプラグインを使わないため、他のアプリ・スクリプトとの競合リスクが最小限です。ShopifyのCDNにホストされるassetsファイルとして読み込むため、パフォーマンスへの影響も軽微です。

line_item_propertiesに保存した配送希望日は、Shopify Admin APIのOrders APIで line_items[].properties[] として取得できます。外部の受注管理システムとAPIで連携する場合も、この値を読み取って処理を自動化できます。

デザインの切り替えはCSSクラス名1つの変更だけです。同一ストア内で商品コレクションごとにデザインを変えたい場合は、Liquidの条件分岐で product.collections を参照してクラスを動的に切り替えることも可能です。