このプロジェクトについて
ECサイトを運営していると、「一般のユーザーには通常価格、取引先には会員価格を見せたい」という要望が出てきます。いわゆるB2B(法人・ディーラー向け)対応です。Shopifyには公式のB2B機能がありますが、利用には上位プランのShopify Plusが必要で、月額費用のケタが変わってしまいます。取引先がまだ数社という規模には、正直重い契約なんですよね。
そこで、Shopify + ヘッドレス構成(表側の画面をNext.jsで自作する形)のECサイトで、標準プランのままB2Bアカウント専用の自動割引と請求書払いを実現する仕組みを実装しました。
使うのは、Shopifyにもともとある「顧客タグ」と「クーポン(割引コード)」の組み合わせ。ユーザーがログインするだけで会員価格が自動表示され、決済時にはクーポンコードの入力なしで割引が適用されます。請求書払い(掛け売り)にも対応済みです。
新しい取引先の追加は、管理画面でタグを1つ付けるだけ。プログラムの変更は一切不要なので、非エンジニアのスタッフだけで日々の運用が回ります。
詳しく学ぶ
この仕組みについて、3つの記事で詳しく解説しています。設計の考え方 → Shopify側の設定 → ウェブサイト側の実装、という順で読めるようにしました。
全体像と設計思想
なぜこの設計にしたのか、タグ名=クーポン名の工夫、ヘッドレスならではの課題を解説します。
Shopify側の設定
顧客タグ、セグメント、コレクション、クーポンの設定手順を詳しく解説します。
ヘッドレス側の実装と請求書払い
タグ読み取り、価格計算、クーポン自動適用、ドラフトオーダーによる請求書払いを解説します。
仕組みの概要
standard-35 → B2B Standard 35 → standard-35(35%OFF)
タグ名 = クーポン名(完全一致)
Shopify側では「タグを付ける → タグでグループを作る → そのグループ限定のクーポンを作る」という3点をセットで用意します。要になるのは、タグ名とクーポン名をまったく同じにしておくこと。
ウェブサイト側は、ログインしたユーザーのタグを読み取り、そこから割引率を割り出して会員価格を表示する、という流れです。
決済に進む瞬間、タグ名と同じ名前のクーポンを裏側で自動適用するため、ユーザーはコードを入力せずに割引済みの金額で支払えます。
主な成果
- 運用効率: 新しいB2B顧客の追加はタグ付けだけで完了
- ユーザー体験: ログインするだけで自動的に会員価格が適用
- 柔軟性: 複数カテゴリの異なる割引率にも対応
- コスト削減: Shopify Plus不要で本格的なB2B機能を実現
技術スタック
- Shopify Storefront API(顧客タグ取得)
- Shopify Admin API(ドラフトオーダー作成)
- Next.js(App Router)
- 顧客タグ・セグメント・クーポン連携