Shopifyの配送日指定をアプリなしで実装（月額0円・テーマ直組み込み）

Shopifyに配送日指定を追加する方法【アプリなし・月額0円】

Shopifyのカートに「お届け希望日」を追加したい。でも、そのためだけに月額アプリを契約するのは気が引ける——この記事は、そんな方に向けて書いています。

結論からお伝えすると、Shopifyの配送日指定はアプリなしで実装できます。Shopify標準の「カート属性」という仕組みを使って、テーマに直接組み込む方法です。

筆者はShopify Plusパートナー企業に所属する現役エンジニアで、月商5,000万円超のECサイト構築にも携わってきました。この記事では、まず判断材料としてアプリを使う場合との違いを整理し、そのうえでテーマ直実装の具体的な仕組みと、最短10分で済ませる方法まで解説します。

Shopifyで配送日指定を実現する方法は2つ

① 配送日指定アプリ ② テーマに直接実装
費用 月額 $9〜37 が相場（年間 約¥16,000〜67,000） 実装コストのみ（以後の月額なし）
導入の速さ 速い（インストールするだけ） 自作なら工数大 / 既製セクションなら10分程度
解約・サービス終了時 機能ごと消える テーマ内のコードなので使い続けられる
サイト表示速度 外部スクリプトの読み込みが発生 テーマ直組み込みで影響ほぼなし
カスタマイズ アプリの提供範囲まで テーマエディタやコードで自由

アプリの強みは「とにかく早く導入できて、サポートも受けられる」こと。一方で、配送日指定のような一度設定したらほぼ触らない機能に毎月課金し続けるのはもったいない、というのが率直なところです。

さらに見落とされがちなのが解約リスクです。アプリを解約したり、アプリ自体のサービスが終了したりすると、カートから配送日指定欄はまるごと消えます。運用が長期になるほど、テーマに直接組み込むメリットは大きくなります。

自分で実装する場合の考え方

💡 コードを書かずに済ませたい方へ: ここからは自作する方向けの技術解説です。読み飛ばして、導入10分の既製セクションの紹介へ進んでいただいて大丈夫です。

「テーマに直接実装」と聞くと難しそうですが、仕組み自体はシンプルです。全体像を知っておくと、アプリや既製セクションを選ぶときの判断にも役立つので、順に解説します。

仕組みの全体像: カート属性（cart attributes）を使う

Shopifyには、注文に任意の付加情報を持たせるカート属性（cart attributes）という標準機能があります。カートページに日付入力欄を置き、選ばれた値を attributes[お届け希望日] としてカートに保存すれば、その内容はチェックアウトを経て管理画面の注文詳細まで自動で引き継がれます（注文確認メールにも、通知テンプレートに変数を1行追加すれば記載できます）。

つまり最小構成は次の3点だけです。

  1. カートページに日付（＋時間帯）の入力欄を表示する
  2. 入力値をカート属性として保存する（Cart APIの /cart/update.js にPOST）
  3. 受注処理では注文詳細に表示された希望日を見て出荷する

追加のデータベースも外部サービスも不要で、Shopifyの標準機能だけで完結します。これが「アプリなしで実装できます」の根拠です。

「最短お届け日」の計算が実装の本丸

ただし、実務でそのまま使えるものにするには、日付入力欄だけでは足りません。「選べてはいけない日を選べなくする」制御が必要で、ここが実装の本丸です。

  • リードタイム: 注文から出荷まで2営業日なら、明日の日付は選べてはいけない
  • 注文締切時刻: 「12:00までの注文は当日出荷扱い、以降は翌営業日起算」の切り替え
  • 休業日: 土日や年末年始は営業日のカウントから除外する
  • 商品ごとの違い: 通常商品は2営業日でも、受注生産品は7営業日。カートに混在したら長い方に合わせる

これらを踏まえて「最短お届け日」をJavaScriptで算出し、カレンダー（flatpickrなどの軽量ライブラリが定番です）でそれより前の日付をグレーアウトする、というのが基本設計になります。

見落としやすいハマりどころ

自作する場合、以下は高確率でハマるので先に知っておいてください。

  • カートの変動に追従する必要がある: 最近のテーマはカートページでも商品の追加・削除・数量変更がAjaxで行われます。カートが変わればリードタイムも変わるため、cart:update などのテーマ側イベントやCart APIの呼び出しをフックして、最短お届け日を再計算する仕組みが必要です
  • 選択済みの日付が無効になるケース: リードタイムの長い商品が後から追加されると、保存済みの希望日が「選べないはずの日」になります。検知して自動クリアし、再選択を促す処理まで入れないと、実現できない日付の注文が入ります
  • 毎年繰り返す休業日: 年末年始やお盆を毎年手で設定し直すのは現実的でないため、「MM-DD形式で毎年適用」のような設計にしておくと運用が楽です

ここまで作り込むと、ゼロからの実装で8〜15時間程度の工数になります。Liquid・JavaScriptに慣れている方であれば、十分挑戦する価値のある内容です。

最短で済ませたい方へ: 導入10分の既製セクション

「仕組みは分かったが、そこに8〜15時間はかけられない」という方向けに、Copilifyで配送希望日時セレクターを提供しています。上で解説した内容を、すべて設定画面から日本語で調整できる形にした買い切り型のセクションです。

  • 締切時刻・営業日・商品別/コレクション別リードタイムから最短お届け日を自動算出
  • 日本語カレンダーで希望日＋時間帯を受け付け、カート属性として注文詳細まで自動引き継ぎ
  • カートの追加・削除・数量変更にリアルタイム追従して再計算
  • 定期便やメーカー直送品など「日時指定不可」の商品ルールにも対応（配送不要のデジタル商品だけのカートは自動で対象外）
  • 63の設定項目で色・文言・余白をテーマエディタから調整（コード編集不要）

導入は3ステップです。

  1. 購入後、Liquidファイルをダウンロード
  2. Shopify管理画面からテーマの sections フォルダにアップロード（動画ガイドあり）
  3. テーマエディタでカートページにセクションを追加して設定

ギフト配送で受け取り日を指定したいストア、生鮮・冷凍食品で鮮度を保つために配達日を絞りたいストア、受注生産で商品ごとにリードタイムが異なるストアなど、「配送日が読めないと購入をためらわれる」業態ほど効果を感じやすい機能です。

▼ デモと詳しい機能はこちら
配送希望日時セレクター（営業日計算つき） の商品ページ

よくある質問

Q. どのテーマでも使えますか？
カート属性はShopifyの標準機能なので、仕組み自体はどのテーマでも動きます。Copilifyのセクションは特定テーマの専用機能に依存しない設計で、Online Store 2.0対応テーマであれば基本的に利用できます（開発・検証はDawn系テーマで実施。不安な場合はテーマ名を添えて事前にお問い合わせください）。

Q. コードの知識は必要ですか？
自作する場合はLiquidとJavaScriptの知識が必要です。既製セクションを使う場合は、ファイルをアップロードしてテーマエディタで設定するだけなので、コードを書く必要はありません。

Q. 商品ページにも配送日指定を置けますか？
配送日指定は「カート全体の内容」でリードタイムが決まるため、カートページに置くのが正しい設計です。Copilifyのセクションもカートページ専用になっています（購入直前に「いつ届くか」を明示することで、カゴ落ち抑制の効果も狙えます）。

Q. 制作代行の案件でも使えますか？
Copilifyのセクションはクライアント様のストアでもそのまま利用できます。営業日計算まわりをゼロから実装する工数と比べて、大幅な時短になります。

まとめ

  • Shopifyの配送日指定は、カート属性を使えばアプリなしで実装できる
  • 実装の本丸は「最短お届け日の営業日計算」と「カート変動への追従」
  • 自作なら8〜15時間、既製セクションなら10分。時間を優先するなら配送希望日時セレクターをどうぞ

配送日指定のほかにも、領収書発行・購入制限・送料無料バーなど「アプリでしかできない」と思われがちな機能をテーマ直組み込みのセクションとして揃えています。まとめて導入したい方はオールアクセスパックもご覧ください。

ブログに戻る