Shopifyでデジタル商品と物理商品の同時購入を防ぐには？カート内の商品タイプを判定し、「ご購入手続きへ」ボタンを無効化するシンプルなLiquidカスタマイズを解説。配送トラブル防止に最適な実装方法をご紹介。
近年、Shopifyを活用したオンラインショップでも、デジタルコンテンツの取り扱いが増えてきました。PDF形式のガイドブックや動画教材、ライブ配信のチケットなど、物理的な発送を伴わない商品は、ユーザーにとっても購入しやすく、運営者にとっても在庫管理の負担が少ないメリットがあります。
私自身が運営するストアでも、ここ最近でデジタル商品(例えば、公演チケット)の割合が急増しました。しかし、それに伴って発生したのが「フィジカル商品との同時購入による混乱」です。
たとえば、注文単位で配送情報を物流センターに自動連携しているのですが、デジタル商品がカートに含まれていると、センター側で「何を発送すればいいのか？」と混乱を招いてしまうケースがありました。
こうした事態を防ぐには「1つの注文の中でデジタル商品と物理商品を同時に購入させない」という制御が必要です。今回は、Shopifyのテーマファイル（Liquid）を少しだけ修正するだけで実現できる、シンプルな「カート内同時購入制限」の方法をご紹介します。
こんなイメージ
仕組みとしてはとてもシンプルです。
まず、Shopifyの商品管理画面で、それぞれの商品に「商品タイプ（product.type）」を設定します。たとえば、動画やPDFといった無形の商品には「デジタルコンテンツ」、Tシャツやグッズなど発送を伴う商品には「フィジカル商品」といった具合に分類します。
次に、カートページでその商品タイプをチェックします。Liquidコードを使えば、カート内の商品をひとつずつ確認し、「デジタル」と「フィジカル」の両方が混在しているかどうかを判定することができます。
そして両方が同時に入っていた場合は、「ご購入手続きへ」ボタンを無効化したり、注意メッセージを表示したりして、ユーザーに対して注文を分けるよう促します。
どのファイルをカスタマイズするの？
では実際に、どのテンプレートファイルをカスタマイズすればいいのでしょうか？
今回の目的は、「カートに特定の組み合わせが入っている場合に、“ご購入手続きへ”ボタンを無効化すること」です。そのため、編集すべきファイルは「sections/main-cart-footer.liquid」になります。
この「main-cart-footer.liquid」は、カートページの下部に表示される合計金額や「ご購入手続きへ」ボタンなどのパーツを描画しているファイルです。カート画面の最終ステップとして、購入に進むための重要な操作エリアを構成しているため、今回のような「購入制御のロジック」を加えるには最適な場所といえます。
次は、このファイルに追加する具体的なLiquidコードをご紹介します。
挿入するLiquidコード
では、実際にどんなLiquidコードを挿入すればよいのかをご紹介します。カートページ下部の「main-cart-footer.liquid」 内であれば、基本的にどこに書いてもOKです。
処理の前後関係を気にする必要はなく、テンプレートの上部にまとめて記述しておくのが見通しとしては良いでしょう。
{% assign hasDigital = false %}
{% assign hasPhysical = false %}
{% for item in cart.items %}
{% if item.product.type == 'デジタルコンテンツ' %}
{% assign hasDigital = true %}
{% else %}
{% assign hasPhysical = true %}
{% endif %}
{% endfor %}
{% if hasDigital and hasPhysical %}
<p class="cart-error">⚠️ デジタル商品と物理商品は同時に購入できません。</p>
<style>
button[name="checkout"] {
opacity: 0.5;
pointer-events: none;
}
</style>
{% endif %}ここで使われているのが、Liquidでよく用いられる「フラグ（真偽）」という考え方です。hasDigitalや hasPhysicalという変数を「true / false」で切り替え、カート内の状態に応じて処理を分岐しています。
このようなフラグの考え方はShopifyカスタマイズにおいて非常に便利なので、初心者の方にもおすすめです。詳しく学びたい方は、以下の記事もぜひチェックしてみてください。
【Shopify Liquid】ループの記録係！1回のみ実行に有用な「フラグ(Flag)」サンプルコード
このコードの動きはとてもシンプルです。
まず、カート内の商品を1つずつチェックしていき、商品タイプが「デジタルコンテンツ」である商品が1つでも入っていれば、変数「hasDigital」という変数が「真（true）」になります。
一方で、「デジタルコンテンツ」ではない商品（＝フィジカル商品など）が1つでも含まれていれば、変数「hasPhysical」が「真」になります。
この2つのフラグを使って、「デジタルコンテンツ」と「非デジタルコンテンツ」が同時にカートに含まれている状態を判定します。条件分岐の部分がこちらです。
{% if hasDigital and hasPhysical %}この条件に一致した場合は、エラーメッセージを表示し、同時に以下のようなCSS制御を加えます。
button[name="checkout"] {
opacity: 0.5;
pointer-events: none;
}つまり、「ご購入手続きへ」ボタンが半透明になり、クリックできなくなるというわけです。見た目と機能の両面から、ユーザーに「このままでは購入できない」ことを直感的に伝える、非常にシンプルで効果的な実装です。
まとめ
いかがでしょうか？
今回ご紹介した方法は、商品タイプに応じてカート内の商品構成をチェックし、「デジタルコンテンツ」と「フィジカル商品」が同時に含まれていた場合に、購入ボタンを無効化するというシンプルなLiquidカスタマイズです。
特別なアプリを使うことなく、Shopifyの標準機能とわずかなコードで実装できるため、配送や自動処理の混乱を防ぎたい方にはとても有効な手法といえるでしょう。
ただし、この方法には1つ注意点があります。Liquidはページの再読み込み時にしか反映されないため、ユーザーがカート内の商品を削除しても、その場では状態が更新されません。そのため、カートの状態を正しく判定させるには、「リロード」ボタンを設置する、もしくは商品削除時に自動でページをリロードさせるなどの工夫が必要です。
また、この方法が適用されるのはカートページ上での制御に限られます。商品ページ上でのカート通知（スライドダウン表示）、いわゆるカート通知モーダル（cart notification）やドロワーカート(cart drawer)での同様の制御については以下のページをチェックしてみてください。
カートのノーティフィケーションやドロワーで1注文での同時購入を防ぐ方法は可能？
今回の方法、ぜひあなたのショップにも取り入れてみてください！
