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

顧客アカウントダッシュボード — B2B 対応ワークフロー

Vertex は、サインインしている人物に自動的に適応する完全な顧客アカウントスイートを出荷します。 NET-30 条件と営業担当が割り当てられた B2B 調達バイヤーは 1 つのダッシュボードを見ます。B2C エンドカスタマーは別のものを見ます。マルチロケーションの経理担当バイヤーは、会社切り替え機能を備えた 3 番目のバリアントを見ます。すべて同じテーマから — アプリなし、2 番目のテンプレートファミリーなし、カスタムコードなし。

このガイドでは、Vertex のすべての顧客アカウント画面、B2B 対応の動作の仕組み、クイック再注文フロー、マルチロケーションバイヤーエクスペリエンス、そしてテーマエディタで各画面をカスタマイズする方法について説明します。

ネイティブ + B2B 対応

Vertex の顧客アカウントは、Shopify の 新しい顧客アカウント(B2B が必要とする、Shopify ホスト型のパスワードレスエクスペリエンス)の上に、Vertex のテーマスタイリングと B2B 対応セクションを重ねて構築されています。カスタムテーマの洗練さ と、各セクションを他のページと同じように編集できる柔軟性の両方を得られます。

顧客アカウントスイートに含まれるもの​

画面機能
ダッシュボードサインイン後のランディングページ。B2B 対応: B2B バイヤー向けに会社情報、支払い条件、営業担当カード、クイック再注文を表示します。B2C 顧客向けに注文リストと住所リンクを表示します。
単一注文ビュー注文ヘッダー(番号、日付、ステータス、合計)、行ごとの「この商品を再注文」ボタン付き商品明細、下部の全注文「すべて再注文」ボタン、配送および請求先住所、フルフィルメントステータス。
住所住所の追加、編集、削除、デフォルト設定。州/省の検証機能付きの国対応フィールド。
サインインメール + パスワード + 「パスワードをお忘れですか?」 + 「アカウント作成」CTA。
アカウント作成名、姓、メール、パスワード。見積依頼ページにルーティングするオプションの「トレードアカウント申請」CTA。
招待のアクティブ化Shopify 管理画面でマーチャントが作成した顧客アカウントをアクティブ化します。
パスワードリセット2 ステップ(リセットメールをリクエスト、次に新しいパスワードを入力)。

各画面は、ストアフロントの他の部分を駆動する Vertex のデザインシステム — spacing scale、type scale、radius scale、shadow scale、ボタンシステム、入力システム — で再設計されています。そのため、顧客アカウントは別のアプリのように感じることはなく、ストアの他の部分とまったく同じ外観と動作を提供します。

B2B 顧客ダッシュボード: 会社、NET-30、営業担当、再注文

Shopify ホスト型の顧客アカウント

これは B2B バイヤーが見る、新しい Shopify ホスト型の顧客アカウントエクスペリエンスです — ストア名と配送先住所でブランド化され、上部に注文履歴とプロフィールのタブがあります。その外観は Vertex テーマからではなく、Shopify から直接来ています。営業担当カードとクイック再注文のショートカットは、その上に Vertex が追加したものです。

B2B 対応ダッシュボード​

ダッシュボードが中心となります。サインインした顧客が B2B バイヤーかどうかを検出し、2 つのレイアウトのいずれかを自動的にレンダリングします。

検出の仕組み​

アプリも、セットアップも、トグルもありません。 Vertex は、サインインした顧客が Shopify B2B の会社に紐付いているかどうかを見ます。紐付いていれば B2B ダッシュボードがレンダリングされます。そうでなければ B2C ダッシュボードがレンダリングされます。完全にネイティブで、即座です。

B2B ダッシュボードレイアウト​

サインインした B2B バイヤーの場合、ダッシュボードは以下を表示します:

1. ウェルカムヘッダー​

  • こんにちは、[名] — フレンドリーな挨拶
  • 会社名 — バイヤーの会社レコードから取得
  • 会社バッジ — NET-30 / NET-60 / NET-90 と Tax-exempt
  • 現在の ship-to — バイヤーが現在選択している ship-to 住所の短いサマリー

2. 営業担当カード(フルバリアント)​

会社ごとの営業担当メタフィールド(Customers ▸ Companies ▸ [会社] ▸ Metafields の下の vertex.rep_name / vertex.rep_email / vertex.rep_phone)を入力している場合、ダッシュボードは フル営業担当カード を表示します — ヘッダーの小さいピルよりも大きいものです。

カードには以下が含まれます:

  • 担当者名(頭文字のアバター付き)
  • 担当者のメール(クリックでメール送信)
  • 担当者の電話(クリックで電話発信)

これらの入力方法については メタフィールドセットアップガイド を参照してください。

会社ごとの営業担当

営業担当カードは、各会社に入力した担当者の詳細を使用します。同じ会社に属するすべてのバイヤーは同じ担当者を見ます。

3. クイック再注文リスト​

最も愛されている B2B 機能。バイヤーの 直近 5 件の注文 を以下とともに表示します:

  • 注文番号と日付
  • 合計と商品数
  • すべて再注文 ボタン(ワンクリック — 現在の価格ですべての行をカートに戻します)
  • 注文ステータスバッジ(Fulfilled / Partial / Unfulfilled / Cancelled)
  • 完全な単一注文ビューへのリンク

アプリは不要 — クイック再注文は Vertex に組み込まれています。

廃止またはカタログから削除された商品

元の注文の行アイテムがバイヤーのカタログにもうない場合、再注文はそれをスキップし、小さなノートを表示します: "2 items from order #1234 are no longer available and were skipped." バイヤーはチェックアウト前にカートを確認できます。

4. クイックリンクグリッド​

正規の B2B アカウントアクションのグリッド:

  • すべての注文 — 完全な注文履歴
  • 住所 — ship-to 住所を管理
  • 一括注文 — 一括注文の paste-to-cart ページへのリンク
  • 見積依頼 — RFQ ページへのリンク
  • カタログ — B2B カタログでフィルタリングされたストアフロントへのリンク

5. 最近のアクティビティ​

バイヤーの直近 10 件のアクションの凝縮されたタイムライン:

  • 発注された注文
  • 追加または更新された住所
  • 提出された見積依頼

B2C ダッシュボードレイアウト​

B2B 以外の顧客の場合、ダッシュボードはよりシンプルです:

  • ウェルカムヘッダー(会社情報なし、支払い条件バッジなし)
  • 注文リスト(完全なページネーション)
  • デフォルト住所 カードと編集/管理リンク
  • 営業担当カードなし(B2C 顧客には割り当てられた担当者がいません)
  • クイック再注文リストなし(単一の「注文を見る」CTA — バイヤーは単一注文ビューから再注文します)

B2C ダッシュボードは、速く、すっきりした 目的で構築されています — ほとんどの B2C 顧客は、会社のクロームと対話するのではなく、注文ステータスを確認したいだけです。

クイック再注文フロー​

クイック再注文は 2 つのサーフェス で利用できます:

サーフェス 1 — ダッシュボード直近 5 件注文リスト​

(上記で説明済み。)注文ごとのワンクリック「すべて再注文」で、直近 5 件を表示します。同じキットを毎週再注文するバイヤーはこれを愛しています — サインインから完全にロードされたカートまで 2 クリックです。

サーフェス 2 — 単一注文ビュー​

古い注文や、サブセットのみを再注文する場合、単一注文ビューは以下を表示します:

  • 行ごとの「この商品を再注文」ボタン すべての行で — 元の数量で 1 つのバリアントを追加します
  • 行ごとの数量入力 バイヤーが追加する前に数量を変更できます(元の注文数量がデフォルト)
  • 下部の全注文「すべての商品を再注文」ボタン — 元の数量ですべての行を追加します

ダッシュボードの再注文と同じスキップアイテムの動作で、よりきめ細かいだけです。

再注文は現在の価格を使用

再注文には、過去の注文価格ではなく、バイヤーの現在のカタログ価格が使用されます。これは B2B にとって重要です: 契約価格は変更され、古い価格での再注文は新しいカタログと矛盾します。バイヤーが古い価格を尊重する必要がある場合、営業担当に連絡して見積を依頼する必要があります。

マルチロケーションバイヤー​

一部の B2B バイヤーは 複数の会社 に紐付けられています(例: 5 つの子会社の注文を行う企業の経理担当マネージャー)。これらのバイヤーに対して、Vertex はモバイルドロワーフッターとデスクトップグリーティングバーに 会社切り替え を自動的に表示します。

切り替えのレンダリング場所​

  • デスクトップ(≥1170px) — 複数の会社が利用可能な場合、アンバー色の B2B グリーティングバー(ヘッダー上部)内
  • モバイル + タブレット(<1170px) — ハンバーガードロワーフッターの下部、言語と通貨のピルの上

単一会社のバイヤーには表示されません — クリーンな UI。切り替えは完全にキーボードでアクセス可能で、Vertex の他のすべてのドロップダウンと一致します。

切り替えの仕組み​

バイヤーが別の会社拠点を選択すると、Shopify は新しい会社をセッションに設定してページをリロードします。カタログ、価格設定、支払い条件、ship-to、税免除ステータスがすべて新しい会社に切り替わります。カートは互換性がある場合は保持され、そうでない場合は警告とともにクリアされます。すべてネイティブ — アプリなし、手動同期なし。

サインイン、アカウント作成、アクティブ化、パスワードリセット​

すべての認証画面は Vertex のデザインシステムで再設計されました。一貫したビジュアル言語を共有しています:

  • 中央配置のカードレイアウト ストアフロントの見出しフォントとボディフォント付き
  • ロゴと小さな見出し カードの上部
  • 1 カラムフォーム フル幅入力(52 px のタッチターゲット、focus-visible リング、ラベルが上)
  • プライマリ CTA ボタン ストアフロントのアクセントカラー
  • セカンダリリンク 下部に — 「パスワードをお忘れですか?」、「アカウント作成」、「すでにアカウントをお持ちですか?」
  • ストアフロントフッター カードの下に(軽量 — 法的リンクと著作権のみ)

サインイン画面​

  • メールとパスワード
  • 「パスワードをお忘れですか?」リンク
  • 「アカウント作成」CTA
  • (B2B 追加機能) — 小さなノート: "Need a trade account? Request access →"

アカウント作成画面​

  • 名、姓、メール、パスワード
  • 「アカウント作成」CTA
  • (B2B 追加機能) — 小さなノート: "Existing trade customer? Sign in →"

標準の Shopify 動作: 新しいアカウントはサインインする前にメール検証を経由します。新しい B2B アカウントは Customers ▸ Companies を介してマーチャントによって作成されます — 自己登録ではありません。

アカウントアクティブ化画面​

マーチャントによって招待された顧客向け。彼らは招待メールからこのページにランディングし、パスワードを設定します。

パスワードリセット画面​

1 つの中に 2 つの画面:

  1. リセットリクエスト — メールのみの入力 + 「リセットリンクを送信」CTA
  2. 新しいパスワードを設定 — 新しいパスワード + パスワードの確認 + 「パスワードを更新」CTA(メールリンクをクリックした後)

テーマエディタでのカスタマイズ​

顧客アカウント画面はテーマエディタで編集可能で、Vertex は少数のセクション設定を公開しています。ここでのカスタマイズは意図的に絞られています — ダッシュボードの構造は固定されており、以下のコントロールが Vertex の提供するものです。

テーマエディタでダッシュボードを開く​

  1. Online Store ▸ Themes ▸ Customize を開く
  2. 上部のテンプレートドロップダウンで、Customers ▸ Account を選択
  3. テーマエディタが、左サイドバーにすべてのセクション付きのアカウントダッシュボードをレンダリングします

Account セクションはカスタマイズを意図的に小さく保っています — セクションの Layout ヘッダーの下に、ちょうど 2 つの設定 があります:

カスタマイズ方法
Recent orders to showセクション設定 → 「Recent orders to show」 → クイック再注文リストが表示する最近の注文の件数を制御します。範囲 3〜10、デフォルト 5。
Show Quick actions cardセクション設定 → 「Show Quick actions card」 → クイックアクションカードのオン/オフを切り替えます(デフォルトはオン)。
営業担当カードの表示自動 — カードは、会社の vertex.rep_name メタフィールドが入力されており、バイヤーがサインインしている場合に表示されます。B2C 顧客向けおよび B2C 専用モードでは非表示になります。セクションごとのトグルはありません。
アカウントページのコンテンツはテーマではなく Shopify が制御

Vertex のダッシュボードは、Shopify の 新しい顧客アカウント エクスペリエンスの中でレンダリングされます。ウェルカムの挨拶、注文とプロフィールのタブ、そして全体的なページのクロームは Shopify から直接来ています — ブランディング(ストア名、ロゴ、色)は、このセクションではなく、Shopify 管理画面の Settings ▸ Customer accounts の下で編集します。上記の 2 つの設定が、Vertex がその上に重ねる唯一のテーマレベルのコントロールです。

単一注文ビュー(Order セクション)については、設定が 1 つあります:

カスタマイズ方法
Show print invoice linkセクション設定 → 「Show print invoice link」 → 注文詳細ページの請求書印刷リンクのオン/オフを切り替えます(デフォルトはオン)。

関連資料​

まとめ​

  • Vertex の顧客アカウントスイートは B2B 対応 です — 同じ画面、2 つのレイアウト、自動検出。
  • B2B ダッシュボードは、会社情報、支払い条件バッジ、フル営業担当カード、直近 5 件の注文とクイック再注文、クイックリンクグリッドを表示します。
  • B2C ダッシュボードは目的に特化して高速 — 注文とデフォルト住所のみ。
  • クイック再注文は、ダッシュボードと単一注文ビューの両方から動作します — アプリ不要。
  • マルチ会社バイヤーは、モバイルドロワーフッターとデスクトップグリーティングバーで会社切り替えを取得します。
  • サインイン、アカウント作成、アクティブ化、パスワードリセットの画面は、Vertex のデザインシステムで再設計されています。
  • すべてのアカウント画面はテーマエディタでカスタマイズ可能です。