メインコンテンツまでスキップ

B2B セットアップガイド — Vertex で Shopify ネイティブ B2B を有効化

このガイドでは、Shopify のネイティブ B2B を有効化する手順を順を追って説明します。これにより、Vertex テーマは数量割引テーブル、数量ルールの強制、NET 支払い条件、税免除バッジ、複数拠点の会社切り替え、B2B カタログ、営業担当連絡カード、その他すべての標準 B2B 機能をレンダリングできるようになります。

コンパニオンアプリ不要。月額サブスクリプション不要。サードパーティスクリプト不要。 Vertex がレンダリングするすべての B2B オブジェクトは、Shopify がすでに公開している Liquid ドロップのみを使用して、Shopify のネイティブ B2B オブジェクト — customer.b2b?customer.current_companyvariant.quantity_price_breaksvariant.quantity_rulecustomer.company_available_locations — から直接取得されます。

B2B はオプトイン

このガイド全体をスキップしても、Vertex は洗練された B2C 産業用品テーマとして動作します。ログイン中の会社がない場合、すべての B2B 要素は自動的に非表示になります。テーマを再インストールすることなく、後から B2B を有効化できます。


なぜネイティブ B2B(アプリではなく)を選ぶのか

ほとんどの「B2B Shopify テーマ」は有料アプリのスタック — 卸売価格アプリ、アカウントロックアプリ、NET 条件アプリ、見積管理アプリ、顧客グループアプリ — に依存しています。それぞれが月額料金、追加の Liquid ブロック、レンダリングをブロックするスクリプト、そして毎年再交渉が必要なベンダーを追加します。

Vertex は反対のアプローチを取ります。 Shopify は 2023 年に完全なネイティブ B2B 機能セット(Companies、Catalogs、Volume pricing、Quantity rules、Payment terms、Tax exemption)を出荷しました。Vertex は初日からこれらのネイティブオブジェクトを美しくレンダリングするために構築されました — ラッパーなし、アプリ依存なし、Shopify が次の四半期に新しい B2B 機能を出荷しても書き直し不要です。

アプリで支払う対象Vertex がネイティブ B2B で実現すること
卸売価格アプリ($29〜99/月)Shopify Catalog 価格リスト — 無料、ネイティブ
数量割引アプリ($19〜49/月)variant.quantity_price_breaks — 無料、ネイティブ
Net 条件アプリ($29〜79/月)会社レベルの支払い条件 — 無料、ネイティブ
見積管理アプリ($19〜59/月)/pages/rfq テンプレート — Vertex に組み込み
卸売ロックアプリ($14〜39/月)ログイン必須の価格表示 テーマ設定 — Vertex に組み込み
マルチロケーションアプリ($29〜99/月)customer.company_available_locations — 無料、ネイティブ
推定年間節約額ストアあたり $1,800〜$4,800/年

前提条件

開始する前に、以下を確認してください。

  • Shopify プランがネイティブ B2B をサポートしている。 つまり、Shopify Plus、または B2B アドオンが有効化された Shopify Advanced です。ネイティブ B2B は Basic / Shopify / スタータープランでは利用できません。
  • 管理者アクセスが Shopify 管理画面の SettingsCustomersProductsThemes にある。
  • Vertex がインストール済みで公開されている(またはプレビューテーマとしてインストールされている)。初回インストールについては インストールガイド を参照してください。
  • 新しい顧客アカウントが有効化されている。 B2B には新しいアカウント(パスワードレス)が必要で、レガシーのクラシックアカウントではありません。
Plus または Advanced ではない場合

下位プランの場合でも、Vertex をインストールして今日から B2C 専用の産業用品テーマとして運用できます。プランがアップグレードされると、以下に記載されているすべての B2B 機能がテーマ作業ゼロでアクティブ化されます。このページにまた戻ってください。

Shopify admin: Settings → Plan (Vertex Industrial Demo)


セットアップする内容

ステップ管理画面の場所理由
1. ネイティブ B2B を有効化Settings ▸ Customer accounts ▸ B2B ▸ ManageCompanies + Catalogs をアンロック
2. 最初の会社を作成Customers ▸ Companies ▸ Add company主要な B2B オブジェクト
3. 会社の拠点を追加会社ページ ▸ Locations複数拠点の ship-to 切り替えを駆動
4. バイヤーアカウントを追加会社ページ ▸ Customerslocation-admin またはバイヤーロールを割り当て
5. B2B カタログを作成Products ▸ Catalogs ▸ Add catalogB2B 価格 + 数量ルールのコンテナ
6. 数量階層付きの価格リストを追加カタログページ ▸ Price listPDP の数量割引テーブルを駆動
7. カタログを会社に割り当てカタログページ ▸ Customers価格をバイヤーに接続
8. 支払い条件を設定(NET-30 など)会社ページ ▸ Payment termsNET 条件バッジを駆動
9. (オプション)会社を税免除にマーク会社ページ ▸ Tax settings税免除バッジを駆動
10. (オプション)vertex.rep_* メタフィールドを追加会社ページ ▸ Metafields営業担当連絡ピルを駆動
11. ログイン中のバイヤーとしてテストシークレットモードのストアフロントすべての B2B 要素のレンダリングを検証

ステップ 1 — ネイティブ B2B を有効化

  1. Shopify 管理画面から、Settings(左下)をクリック。
  2. 左サイドバーで、Customer accounts をクリック。
  3. New customer accounts が選択されていることを確認。B2B はレガシークラシック顧客アカウントでは動作しません。
  4. B2B セクションまでスクロール。
  5. Manage をクリック。
  6. Enable B2B をクリック。
  7. 確認プロンプトに応じます。

クリックパス: Settings ▸ Customer accounts ▸ B2B ▸ Manage ▸ Enable B2B

Settings → Customer accounts with B2B section

有効化されると、2 つの新しい管理項目が表示されます。

  • メインナビの Customers の下に Companies
  • メインナビの Products の下に Catalogs
B2B アドオンのアクティブ化には数分かかる場合があります

B2B アドオンを使用した Shopify Advanced では、有効化後に Companies と Catalogs のナビ項目が表示されるまで 2〜5 分かかることがあります。すぐに表示されない場合は、管理画面のページを更新してください。


ステップ 2 — 最初の会社を作成

Shopify B2B における 会社(company) は、注文を行い、支払い条件を保持し、1 つ以上の拠点を含む法人エンティティ — 単一のバイヤー組織 — を表します。

  1. 管理画面のサイドバーから、Customers ▸ Companies に移動。
  2. Add company(右上)をクリック。
  3. Company details を入力:
    • Company name — バイヤー組織の正式名または取引名。例: Northgate Facilities LLC
    • External ID(オプション) — 内部のアカウント番号を保持している場合。
    • Note(オプション) — 内部的に記録したい内容(アカウントマネージャーの引き継ぎメモ、契約参照番号など)。
  4. Main contact を入力 — これは主要なバイヤーの名前とメールアドレスです。彼らはこのメールでサインインします。
  5. Save をクリック。

クリックパス: Customers ▸ Companies ▸ Add company ▸ Save

Shopify は自動的に会社とその最初の拠点を作成します。

Shopify admin Companies list


ステップ 3 — 会社の拠点を追加

拠点(location) は、会社に属する 1 つの ship-to 住所です。バイヤーの組織に複数の地域オフィス、倉庫、または店舗がある場合、それぞれを個別の拠点として追加します。バイヤーは、アンバー色の B2B グリーティングバー内の Vertex の ship-to 拠点切り替え を使用して、ストアフロントでそれらを切り替えることができます。

  1. 会社ページ(先ほど作成したもの)から、Locations セクションまでスクロール。
  2. Add location をクリック。
  3. 以下を入力:
    • Location name — 例: Cleveland Distribution Center
    • Shipping address — 完全な住所。
    • Billing address — デフォルトでは配送先と同じ。トグルして別の請求先住所を入力できます。
  4. 保存。
  5. 追加の拠点ごとに繰り返します。

クリックパス: 会社ページ ▸ Locations ▸ Add location ▸ Save

1 つの拠点で開始しても問題ありません

単一拠点の会社でも問題ありません。ship-to 切り替えは、バイヤーが 2 つ以上の拠点を持つ場合にのみ Vertex でレンダリングされます。1 拠点の場合、バイヤーのデフォルト ship-to がどこでも静かに使用されます。

バイヤーが Vertex の切り替え(デスクトップヘッダーのアンバー色のグリーティングバー、またはモバイルドロワーのアカウントセクション)を使用して拠点を切り替えると、Shopify はカートを再利用しますが、ship-to 住所、税コンテキスト、価格リストのスコープを更新します。


ステップ 4 — バイヤーアカウントを追加(ロールを割り当て)

この会社の B2B バイヤーとしてサインインすべきすべての顧客は、その会社の拠点のいずれかにリンクされる必要があります。

  1. 会社ページから、Customers までスクロール(または会社のタブナビで Customers をクリック)。
  2. Add customer をクリック。
  3. メールで既存の顧客を検索するか、Create new customer をクリックしてインラインで追加します。
  4. 彼らが属する 拠点 を選択します(ステップ 3 で作成した拠点の 1 つ)。
  5. ロール を選択:
    • Location admin — 拠点のアドレス帳を管理し、同じ拠点の他のバイヤーを確認し、注文を行うことができます。バイヤーの調達リード向けに最適。
    • Ordering only — 注文のみ可能。会社プロファイルを変更すべきでない個々のバイヤー向けに最適。
  6. Save をクリック。

クリックパス: 会社ページ ▸ Customers ▸ Add customer ▸ 拠点を選択 ▸ ロールを選択 ▸ Save

そのバイヤーは通常の顧客ログイン(メール + マジックリンクまたはパスワード)でサインインでき、Vertex は customer.b2b? Liquid ドロップを介してそれらを B2B バイヤーとして認識します。アンバー色のグリーティングバーが会社名とともに表示され、割り当てられたカタログが適用され、B2B 対応のアカウントダッシュボードがレンダリングされ、(メタフィールドが設定されている場合は)REP ピルがヘッダーに表示されます。


ステップ 5 — B2B カタログを作成

カタログ(catalog) は、価格に関するすべての B2B 固有のもの — どの製品が会社に公開されるか、彼らが支払う価格、適用される数量階層、各バリアントに強制される数量ルール(MOQ、最大、増分) — のための Shopify のネイティブコンテナです。

  1. 管理画面のサイドバーから、Products ▸ Catalogs に移動。
  2. Add catalog(右上)をクリック。
  3. B2B catalog(Markets catalog ではない)を選択。
  4. 以下を入力:
    • Catalog name — 内部ラベル。例: Contract Tier B — Distributors
    • Products — このカタログが公開する製品を選択します。ストア全体、スマートコレクション、または手動で選択したリストを含めることができます。
  5. Save をクリック。

クリックパス: Products ▸ Catalogs ▸ Add catalog ▸ B2B catalog ▸ Save

Shopify admin Catalogs list


ステップ 6 — 数量階層付きの価格リストを追加

次に、カタログに 価格リスト(price list) を添付します。これは、PDP の数量割引テーブルを駆動する数量階層を含む、バイヤーが支払う実際の B2B 価格を定義するものです。

  1. カタログページから、Add price list(または Price list ▸ Manage)をクリック。
  2. 戦略を選択:
    • Percentage discount off all products — 例: カタログ全体で小売価格から 15% オフ。
    • Fixed prices per product/variant — 明示的な B2B 価格、小売価格を無視。
    • Mixed — パーセンテージをデフォルトとし、特定の製品にオーバーライド。
  3. 数量割引階層 については、各製品/バリアントを編集し、数量ブレイク行を追加します。12 個パックの商品の例:
数量単価
1+$14.50
12+$13.80(5% オフ)
48+$13.05(10% オフ)
144+$12.32(15% オフ)

これらの階層は variant.quantity_price_breaks を介して Vertex に公開され、PDP の Add to cart ボタンのすぐ上に Volume pricing テーブルとしてレンダリングされ、カートの各行および一括注文ページに階層インジケーターとしてもレンダリングされます。

  1. 数量ルール については、製品/バリアントごとに設定:

    • Minimum — MOQ(例: 12)。
    • Maximum — 注文ごとの上限(例: 1,440)。
    • Increment — ケースパックステップ(例: 12)。

    Vertex はこれらを PDP の数量ステッパー、すべてのカート行、一括注文ページ(/pages/bulk-order)でクライアント側で強制します。無効な数量は Add to cart を無効にし、"Order in increments of 12. Try 24 or 36." のようなインラインメッセージを表示します。

  2. 保存。

数量割引はカタログごと

よくある落とし穴: 数量割引は カタログの 価格リスト内で設定する必要があります。Products ▸ Pricing で製品自体に数量割引を設定しても B2B には引き継がれません。常にカタログページから数量階層を編集してください。


ステップ 7 — カタログを会社に割り当て

カタログは作成されましたが、まだバイヤーに接続されていません。割り当てましょう。

  1. カタログページから、Customers までスクロール。
  2. Add customers をクリック。
  3. ステップ 2 で作成した会社を検索。
  4. Add をクリック。
  5. 保存。

クリックパス: カタログページ ▸ Customers ▸ Add customers ▸ 会社を選択 ▸ Add

これで、その会社としてサインインしているバイヤーには以下が表示されます:

  • カタログに含まれる製品のみ(その他は一覧から非表示になり、直接訪問した場合は 404)。
  • カタログ価格(小売価格ではない)。
  • どこでも強制される数量階層と数量ルール。

ステップ 8 — 支払い条件を設定(NET-30 / NET-60 / NET-90)

会社に繰り延べ支払い条件 — NET-30、NET-60、NET-90、固定日付など — がある場合、会社レベルで設定します。Vertex はこれを自動検出し、アンバー色のグリーティングバーとカートに NET terms バッジをレンダリングします。

  1. 会社ページに戻る(Customers ▸ Companies ▸ [company])。
  2. Payment terms までスクロール。
  3. Set up payment terms をクリック。
  4. テンプレートを選択:
    • Receipt — 注文時に支払い期限(小売のデフォルト)。
    • Net 7 / 15 / 30 / 45 / 60 / 90 — 請求書発行から N 日後に支払い期限。
    • Fixed date — 特定のカレンダー日に支払い期限。
  5. 保存。

クリックパス: 会社ページ ▸ Payment terms ▸ Set up payment terms ▸ テンプレートを選択 ▸ Save

Shopify は、この会社がカードチャージなしでチェックアウトすることを許可するようになります。バイヤー(およびあなたの AR チーム)は、すべてのステップで NET 条件を明確に確認できます。

バッジにカスタムの文言を使いたいですか?

バッジに "NET 30" だけでなく "NET 30 — Pay by invoice" と表示したい場合は、vertex.payment_terms 会社メタフィールドを介して文言をオーバーライドします。メタフィールドセットアップガイド を参照してください。


ステップ 9 — (オプション)会社を税免除にマーク

会社が税免除 — 再販証明書を持つ再販業者、政府バイヤー、適格な非営利団体 — の場合、会社レベルで税金請求をオフに切り替えます。Vertex は PDP、カート、アカウントダッシュボードに Tax exempt バッジを表示します。

  1. 会社ページから、Tax settings までスクロール。
  2. Charge taxesoff に切り替えます。
  3. (推奨)バイヤーの税免除証明書をノート添付ファイルとしてアップロードします。
  4. 保存。

クリックパス: 会社ページ ▸ Tax settings ▸ Charge taxes: off ▸ Save

Shopify は、この会社が行うすべての注文で税計算をスキップします。Vertex はバイヤーが一目で正しく免除されていることを確認できるようにバッジも表示します。


ステップ 10 — (オプション)営業担当メタフィールドを追加

各会社に指名された営業担当 / アカウントマネージャーを割り当てる場合、Vertex はデスクトップヘッダー(≥1170px)にスティッキー REP ピル を、モバイルドロワー(<1170px)の下部にフル幅のカードを、その担当者への mailto:tel: を直接含めてレンダリングできます。

データは vertex ネームスペースの 3 つの会社レベルメタフィールドに存在します:

  • vertex.rep_name — テキスト — 例: "Sarah Chen"
  • vertex.rep_email — テキスト(検証: email) — 例: "[email protected]"
  • vertex.rep_phone — テキスト — 例: "+1-555-0142"

完全なセットアップは メタフィールドセットアップガイド にあります。 メタフィールド定義が Companies の Custom Data として存在するようになったら、各会社の Customers ▸ Companies ▸ [name] ▸ Metafields に入力します。

営業担当カードは自動的に非表示

担当者メタフィールドを設定しない場合、REP ピルは単にレンダリングされません — エラーなし、レイアウト破損なし、プレースホルダーなし。カードはそこにありません。


ステップ 11 — バイヤーエクスペリエンスをテスト

ストアフロントを シークレットウィンドウ(マーチャントとしてサインインしていない状態)で開き、ステップ 4 で追加したバイヤーとしてサインインします。この検証チェックリストを実行します:

  • アンバー色の B2B グリーティングバー がヘッダーの上に表示され、会社名、NET 条件バッジ(例: NET 30)、該当する場合は Tax exempt バッジが表示される。
  • 会社に 2 つ以上の拠点がある場合、ship-to 切り替え がグリーティングバー(デスクトップ)とモバイルドロワーにレンダリングされる。
  • (vertex.rep_* メタフィールドが設定されている場合)営業担当ピル がデスクトップヘッダーの右クラスターに表示される。
  • PDP に数量割引テーブルが表示される Add to cart の上に、ステップ 6 で設定した階層付きで。
  • PDP 数量ステッパーが MOQ + 増分を強制する — MOQ 未満の数量を入力してみて、Add to cart がインラインメッセージで無効になることを確認。
  • カートに NET-30 バッジが表示される 注文サマリー内。
  • 一括注文ページ(/pages/bulk-order) — paste-to-cart が数量ルールとカタログスコープを尊重する。
  • アカウントダッシュボード(/account)が会社情報、支払い条件、クイック再注文、担当者カードを表示する。
  • カタログスコープ — カタログにない製品を URL で訪問してみる。404 になるか非表示になるはず。

B2B PDP: greeting bar + volume tiers + REP pill


よくある落とし穴 + 修正

何かがレンダリングされない場合、このリストを確認してください。

「アンバー色のグリーティングバーが表示されない」

  • Storefront モードが B2C 専用に設定されている。 Customize ▸ Theme settings ▸ B2B ▸ Storefront mode を確認。Hybrid(推奨)または B2B-only に切り替えます。Storefront モードガイド を参照。
  • バイヤーが実際には B2B ではない。 管理画面でバイヤーの顧客レコードを開き、会社にリンクされていることを確認。そうでない場合は、ステップ 4 をやり直します。
  • バイヤーはサインインしているがページがキャッシュされていた。 ハードリフレッシュ(Cmd/Ctrl + Shift + R)。

「PDP に数量割引テーブルがレンダリングされない」

  • 会社にカタログが割り当てられていない。 ステップ 7 をやり直します。
  • 製品ではなくカタログに数量階層が設定されている。 数量割引はカタログごとであり、製品ごとではありません。カタログページから階層を編集します。
  • 製品がカタログにない。 製品がカタログの製品リストに含まれていることを確認。
  • ゲスト向けに価格が非表示になっている。 数量割引テーブルは価格と同じゲートに従います — Theme settings ▸ B2B ▸ Hide prices until customer logs in がオンの場合、バイヤーがサインインするまでテーブルは抑制されます。(別途の「数量割引テーブルを表示」トグルはありません — テーブルはバリアントに数量階層があれば自動的に表示されます。)

「MOQ が強制されない」

  • 数量ルールが設定されていない。 カタログ ▸ バリアントを選択 ▸ Minimum / Maximum / Increment を設定。保存。
  • ブラウザキャッシュ。 ルールを編集した後はハードリフレッシュ。

「NET-30 バッジが表示されない」

  • 会社に支払い条件が設定されていない。 ステップ 8 をやり直します。
  • バイヤーがサインインしていない。 バッジはサインインした B2B バイヤーにのみ表示されます — これは設計通りです。

「ヘッダーに担当者ピルがレンダリングされない」

  • メタフィールドがまだ定義として存在しない。 メタフィールドセットアップガイド を参照。
  • メタフィールドは存在するがこの特定の会社では入力されていない。 会社ページ ▸ Metafields を開き、vertex.rep_name + vertex.rep_email / vertex.rep_phone の少なくとも 1 つを入力します。
  • ウィンドウ幅が 1170px 未満。 ピルは小さい画面ではモバイルドロワーのアカウントセクションに折りたたまれます — ドロワーを開いて下までスクロールします。

「税免除バッジが表示されない」

  • 会社の Charge taxes がまだオン。 ステップ 9 をやり直します。

「バイヤーがカタログ価格ではなく小売価格を見られる」

  • カタログが会社に割り当てられていない。 ステップ 7 をやり直します。
  • カタログの価格リストが空。 カタログ ▸ Price list ▸ Manage。価格を追加します。

Vertex が各 B2B 機能をレンダリングする方法

構成後、各 B2B 機能が Vertex で表面化する場所は以下のとおりです:

機能レンダリング場所テーマ設定
アンバー色の B2B グリーティングバーすべてのページのメインヘッダーの上(デスクトップ + モバイルドロワー)自動(サインイン済み B2B バイヤーに表示。B2C 専用モードでは非表示)
会社名 + バッジグリーティングバー内自動
Ship-to 拠点切り替えグリーティングバー(デスクトップ)+ ドロワー(モバイル)自動(会社が 2 つ以上の拠点を持つ場合に表示)
REP ピルデスクトップヘッダー右クラスター + モバイルドロワーフッター自動(vertex.rep_* 会社メタフィールドが入力されている場合)
数量割引テーブルPDP、Add to cart の上自動(バリアントに数量階層がある場合。Hide prices until customer logs in でゲート)
数量ルールの強制PDP ステッパー + カート行 + 一括注文ページ自動
NET 条件バッジグリーティングバー + カートサマリー + アカウントダッシュボード自動
税免除バッジグリーティングバー + カートサマリー + アカウントダッシュボード自動
一括注文ページ/pages/bulk-order(page.bulk-order.json テンプレートを使用)自動
RFQ ページ/pages/rfq(page.rfq.json テンプレートを使用)自動
B2B 対応アカウントダッシュボード/account自動
カタログスコープ(カタログ製品のみ表示)コレクション、検索、PDPShopify ネイティブ

設定ごとのドキュメントについては、テーマ設定リファレンス を参照してください。


次のステップ