こんにちは。FRACTAのResearch & Implementation（RI）局です。
ECでよく目にする商品の販売方法として、「会員限定商品（会員の方のみが購入できる商品）」や「セット販売（同時に購入が必要な商品）」があります。また反対に、配送の都合などで、特定の商品同士を同時に購入できない、単品のみ購入可能とするなどの販売方法もあります。
これらを実現するにあたり、共通して必要な機能となるのが「購入制限」です。「購入制限」には重要な要素が2つあります。
1つは、設定した制限が漏れなく動作すること。（例えば、会員限定商品にも関わらず非会員のお客様に購入されてしまう、ということがない）2つ目は、お客様が制限から外れる購入手続きを行おうとしたときに発生するエラーの表示タイミングです。
1つ目はそもそもの機能として重要ですが、2つ目が重要である理由は、カート離脱を発生しにくくするためです。
例えば、商品AとBを同時に購入が必要な商品として設定したとします。商品Aのみカートに入れたお客様が配送先住所の入力や決済方法の選択まで完了し、最後の「購入完了」ボタンを押したときに、「この商品は単品で購入できません」とエラーが表示され購入できなかったとしたら、その時点で離脱してしまうかもしれません。
お客様の期待感を損なわないよう適切なタイミングで案内できれば、一転してアップセル・クロスセルに繋げられる可能性もあるため、「購入制限」においてエラーの表示タイミングは重要な要素と言えます。
前置きが長くなってしまいましたが、今回は2つの重要な要素を勘案し、Shopifyにおける「購入制限」について、“FRACTAが考える最適解”をご紹介したいと思います。
FRACTAが考える「購入制限」の最適解とは？
結論からお伝えすると、
「Plusプランである」かつ「アプリ開発経験がある（または外注も考えられる）」場合は、今年7月のアップデートで登場した「Cart and Checkout Validation Function API」を使用してカスタムアプリを開発する。
もしくは、
「Plusプランでない」または「アプリ開発経験がない」場合は、既存の購入制限系アプリのアップデートを待つ、もしくは新しいアプリがリリースされるのを待つ。
上記のどちらかとなります。
アップデート内容については以下の記事でご紹介しています。
【Shopify Changelog】Shopify Editions Summer‘23 特集 - 02. 世界で最も優れたチェックアウト
しかしながら、この新しいAPIがアプリストアから配信されるアプリに使用できるのは、2023年11月時点で「2023年12月予定」となっています。
Shopify開発者向けドキュメント - ロードマップ
執筆時点では、カスタムアプリを開発するしか方法がありませんので、この方法で「購入制限」を実装しているストアはまだ少ないはずです。
今現在もShopifyでの「購入制限」はよく見る機能ですが、現状はどのように実装しているのでしょうか？
従来の「購入制限」実装方法
1.アプリを使用
Shopifyで「購入制限」と言うと、まず一番最初に思い付くのはアプリを導入する方法かと思います。アプリストアには多くの「購入制限」アプリが存在しています。
アプリ費用は発生しますが、手軽に「購入制限」をストアに実装できるのが特徴です。アプリの仕様によって、設定できる制限内容やエラー表示のタイミング・表示形式が異なりますが、カートページからチェックアウトページへの進行をブロックするタイプがメジャーです。
2.フロントコーディングで制御（HTML／CSS／JavaScript／liquid）
「管理画面＞オンラインストア＞ソースコード編集」からコーディングにて実装する方法です。エラーのタイミング・表示形式はアプリと比較して自由に表現することができます。
［会員限定商品をカートに入れて非ログイン状態で「ご購入手続きへ」ボタンをクリックした場合に、エラー表示している例］
［非ログイン状態で会員限定商品のページにアクセスした場合に、「カートに追加」ボタンを非表示にしている例］
3.チェックアウトページで制御（Script Editor）
Plusプラン専用のShopify公式アプリ「Script Editor」（※現在はインストール不可）を使用する方法です。本来はお客様のチェックアウトフローをパーソナライズする目的で使用されるアプリですが、制限から外れる購入を防ぐための使い方も可能です。エラー表示タイミングはお客様が配送先住所を入力した後となるため、フロントコーディングとの併用が基本です。
なお、「Script Editor」は、2025年8月28日に廃止が予定されています。（2023/11現在）
［同時購入不可の商品2つをカートに入れてチェックアウトページにアクセスした場合に、配送方法の選択肢を全て非表示にしている例］
それぞれの問題点
上記で3つの実装方法を挙げました。これらの方法は、現在Shopifyで「購入制限」を実装するにあたり、メジャーな方法ではありますが、前述した2つの重要な要素に対しては問題となる点があります。
1.アプリを使用
2.フロントコーディングで制御（HTML／CSS／JavaScript／liquid）
実はこの2つの方法は、特定の操作を行うことで制限外の購入をすることができてしまいます。（例：会員限定商品を非ログイン状態からも購入できる）またコーディングの場合、実装方法によってはブラウザのデベロッパーツールを操作することで制限が無効化されてしまう懸念もあります。
そのためこの2つの方法による制御効果は、あくまでフロントレベルということになります。
3.チェックアウトページで制御（Script Editor）
フロントコーディングの制御を突破されてしまった場合も、例にあげた通り、チェックアウトページにて全ての配送方法を非表示にすることで制限外の購入を防ぐことができます。コーディングにより適切なタイミングでエラーを表示させ、「Script Editor」で最終的に購入を防ぐことで2つの重要な要素を担保できていると思われますが、この方法にも問題があります。
それは「Script Editor」が2025年8月に廃止予定であることに加え、代替となるアプリと「Script Editor」とで制限可能な範囲が異なるからです。
また、代替となるアプリはShopify公式から配信しているものではなく、サードパーティ製となります。
例：
BeSure Checkout Rules
Checkout Buddy: Customizations
※Plusプラン以外も利用可能
制限可能な範囲がどのように異なるかは以下のキャプチャとともにご覧ください。
- Script Editor：制限内容をソースコードで記述
- アプリ「BeSure Checkout Rules」：通常のアプリと同様に手動で設定
「Script Editor」はソースコード記述による設定となるため、代替アプリと比べて制限可能な範囲の自由度が高く、フロントコーディングと合わせて希望の制限内容をストアに実装することができます。一方代替アプリは、アプリの仕様によって制限可能な条件が異なるため、フロントコーディングでは実装できても、アプリ側では実装できない可能性があります。執筆時点で例にあげた2つの代替アプリでは、会員限定商品を非ログインで購入しようとしたときに、全ての配送方法を非表示とする設定ができませんでした。
代替アプリと同様のカスタムアプリを開発することも可能ですが、その場合は次に紹介する、「Cart and Checkout Validation Function API」を使用する方がよいでしょう。
FRACTAが考える「購入制限」の最適解
前述したように、FRACTAが考える最適解は、
「Plusプランである」かつ「アプリ開発経験がある（または外注も考えられる）」場合、「Cart and Checkout Validation Function API」を使用してカスタムアプリを開発する
「Plusプランでない」または「アプリ開発経験がない」場合、2023年12月以降に既存の購入制限系アプリのアップデートを待つ、もしくは新しいアプリがリリースされるのを待つ
のどちらかになります。
それぞれ詳しくみていきましょう。
「Cart and Checkout Validation Function API」を使用したカスタムアプリ
※「Cart and Checkout Validation Function API」を使用したカスタムアプリの開発はPlusプランのみ対応
「購入制限」の例
カスタムアプリを開発して、下記のような「購入制限」を設定することが可能です。
- セット商品（同時に購入が必要な商品）
- ロット商品（〇個単位で購入が必要な商品）
- 同梱不可商品（同時に購入が不可な商品）
- 購入数量による制限（1回の注文で〇個まで、1アカウントで〇個まで）
- 最小・最大合計金額による制限（最小〇〇円以上の購入、最大〇〇円以下の購入が必要）
- 会員可否による制限（会員の方のみが購入できる商品）
- 会員ランクによる制限（会員の中でも特定の顧客タグのある方のみが購入できる商品）
- 購入者の年齢による制限（〇歳以上の方のみ購入できる商品）
- 配送先住所による制限（特定の地域への配送が可／不可な商品）
さらに、これらの条件を組み合わせた複雑な設定、例えばある商品の設定を「通常1注文につき2個まで購入可能」としていたとして、これに加え「会員かつ2回目以降の購入の方は5個まで購入可能」という条件を組み合わせるといったことが可能になります。
エラー表示のタイミング
カスタムアプリ単体では以下のようなタイミングでエラー表示が可能です。
商品ページ
［非ログイン状態で会員限定商品の「カートに追加」ボタンをクリックした場合の例］
カートページ
［1注文につき3個まで購入可能な商品の数量を3個以上にしようとした場合の例］
チェックアウトページ
［同時購入が必要な【商品A】【商品B】があり、【商品A】のみカートに入れ、「ご購入手続きへ」ボタンをクリックした場合の例］
制限を無効化する操作を行った場合
このように、商品の制限内容に合わせて適切なタイミングでエラーを表示させることができます。また、上記の例にある通り、制限を無効化する操作を行った場合も、Shopify側が用意したエラーページが表示されるので、すり抜けて購入されることもありません。
しかしながら、これだけだとお客様は一度「カートに追加」や「ご購入手続きへ」をクリックした後に購入できない旨を知ることになります。そのため、あらかじめ制限内容について表示し、ボタンをクリックできないようにするなどのフロントカスタマイズ要素をカスタムアプリ内に組み込むか、フロントコーディングと併用することが望ましいと言えます。
既存の購入制限系アプリのアップデートを待つ
もしくは新しいアプリがリリースされるのを待つ
とはいえ、カスタムアプリ開発とフロントコーディングは経験がなければ容易ではありませんし、現状実現できるのはPlusプランのみです。経験がない（外注も難しい）、Plusプランではない場合はどうすればよいでしょうか？
「Cart and Checkout Validation Function API」は2023年12月に、アプリストアで配信される通常のアプリ開発にも使用ができるようになる予定です。（2023年11月時点）このAPIを使用した既存アプリのアップデート、もしくは新しいアプリのリリースを待ちましょう。
通常アプリの場合、フロントコーディングと併用しなくても、アプリ側でフロントカスタマイズが一緒に実装できる可能性が高いです。アプリストアの「注文制限」ページに注目しておきましょう。
※アプリストアで配信される通常アプリであっても、「Cart and Checkout Validation Function API」を使用することで、Plusプランのみインストール可能となる場合もありますので、リファレンスページも合わせてご確認ください。
顧客心理への配慮と堅牢さを兼ね備えた「購入制限」の実装は、顧客体験やコンバージョンの向上に直結すると考えられます。従来のシステムからの過渡期ではありますが、この機会に利用プランや経験に応じた最適な運用方法を、改めて検討してみてはいかがでしょうか。
FRACTAでShopify構築支援を行う際は、希望の管理方法、運用に合わせた最善の実装方法をご提案しております。新規の設定や開発支援も、コストや期間と相談しながらの対応が可能です。今回紹介した方法の活用と併せて、ぜひご検討ください。
