客户账户面板 — B2B 感知工作流
Vertex 提供一套完整的客户账户套件,可根据登录者自动适配。 一位拥有 NET-30 条款和分配销售代表的 B2B 采购买家看到一个面板。一位 B2C 终端客户看到另一个。一位多地点应付账款买家看到第三种带有公司切换器的变体。所有这些都来自同一套主题 — 无需应用、无第二组模板文件、无自定义代码。
本指南涵盖 Vertex 中的每个客户账户屏幕、B2B 感知行为的工作方式、快速重新订购流程、多地点买家 体验,以及如何在主题编辑器中自定义每个屏幕。
Vertex 的客户账户构建在 Shopify 的 新客户账户(B2B 所需的、Shopify 托管的无密码体验)之上,并在其上叠加 Vertex 主题样式和 B2B 感知分区。您既能获得自定义主题的精致度,也能获得像编辑任何其他页面一样编辑每个分区的灵活性。
客户账户套件中包含的内容
| 屏幕 | 功能 |
|---|---|
| 面板 | 登录后的着陆页。B2B 感知:为 B2B 买家显示公司信息、付款条款、销售代表卡片和快速重新订购。为 B2C 客户显示订单列表和地址链接。 |
| 单订单视图 | 订单标题(编号、日期、状态、总额)、带每行 "Reorder this item" 按钮的订单项、底部的整单 "Reorder all" 按钮、送货和账单地址、 履行状态。 |
| 地址 | 添加、编辑、删除和设置默认地址。带州/省验证的国家感知字段。 |
| 登录 | 电子邮件 + 密码 + "Forgot password?" + "Create account" CTA。 |
| 创建账户 | 名字、姓氏、电子邮件、密码。可选的 "Apply for trade account" CTA,跳转到 Request a Quote 页面。 |
| 激活邀请 | 激活商家在 Shopify 后台创建的客户账户。 |
| 重置密码 | 两步(请求重置邮件,然后输入新密码)。 |
每个屏幕都在 Vertex 设计系统中重新设计 — 驱动店铺前端其余部分的间距比例、字体比例、半径比例、阴影比例、按钮系统和输入系统。因此,客户账户感觉不像独立的应用 — 它的外观和行为与店铺前端其余部分完全一致。
这是 B2B 买家看到的新 Shopify 托管客户账户体验 — 以您的店铺名称和送货地址进行品牌化,顶部带有订单历史和个人资料选项卡。其外观直接来自 Shopify,而不是来自 Vertex 主题。销售代表卡片和快速重新订购快捷方 式是 Vertex 在其上添加的。
B2B 感知面板
面板是核心。它检测已登录客户是否为 B2B 买家,并自动渲染两种布局之一。
检测的工作方式
没有应用、没有设置、没有切换开关。 Vertex 查看已登录客户是否链接到 Shopify B2B 中的公司。如果是,则渲染 B2B 面板。否则,渲染 B2C 面板。它是完全原生且即时的。
B2B 面板布局
对于已登录的 B2B 买家,面板呈现:
1. 欢迎标题
- Hello, [名字] — 友好问候
- 公司名称 — 从买家的公司记录提取
- 公司徽章 — NET-30 / NET-60 / NET-90 和 Tax-exempt
- 当前送货地址 — 买家当前选定的送货地址的简短摘要
2. 销售代表卡片(完整变体)
如果您填充了公司级销售代表 metafields(Customers ▸ Companies ▸ [公司] ▸ Metafields 下的 vertex.rep_name / vertex.rep_email / vertex.rep_phone),面板会显示一个完整的销售代表卡片 — 比 header 中较小的胶囊更大。
卡片包含:
- 代表姓名(带首字母头像)
- 代表电子邮件(点击发送邮件)
- 代表电话(点击拨打电话)
填充方法请参阅 Metafield 设置指南。
销售代表卡片使用您为每家公司填充的代表详细信息。附属于同一公司的所有买家都看到同一位代表。
3. 快速重新订购列表
最受欢迎的 B2B 功能。显示买家最近 5 个订单,包含:
- 订单编号和日期
- 总额和商品数量
- Reorder all 按钮(一键 — 按当前价格将所有行加回购物车)
- 订单状态徽章(Fulfilled / Partial / Unfulfilled / Cancelled)
- 链接到完整的单订单视图
无需应用 — 快速重新订购内置于 Vertex 中。
如果原订单中的某行不再在买家的目录中,重新订购会跳过它并显示一个小提示:"2 items from order #1234 are no longer available and were skipped." 买家仍然可以在结账前查看购物车。
4. 快速链接网格
规范 B2B 账户操作的网格:
- All orders — 完整订单历史
- Addresses — 管理送货地址
- Bulk order — 链接到批量订单的粘贴到购物车页面
- Request a quote — 链接到 RFQ 页面
- Catalog — 链接到按其 B2B 目录过滤的店铺前端
5. 最近活动
买家最近 10 个操作的精简时间线:
- 下达的订单
- 添加或更新的地址
- 提交的报价请求
B2C 面板布局
对于非 B2B 客户,面板更简单:
- 欢迎标题(无公司信息,无付款条款徽章)
- 订单列表(全分页)
- 默认地址卡片,带编辑和管理链接
- 无销售代表卡片(B2C 客户没有分配的代表)
- 无快速重新订购列表(单一 "View orders" CTA — 买家从单订单视图重新订购)
B2C 面板专为快速、整洁而构建 — 大多数 B2C 客户希望检查订单状态,而不是与公司 chrome 交互。
快速重新订购流程
快速重新订购在两个界面上可用:
界面 1 — 面板最近 5 个订单列表
(如上所述。)按订单一键 "Reorder all",呈现最近 5 个订单。每周重新订购相同套件的买家喜欢这个功能 — 从登录到完全加载的购物车只需两次点击。
界面 2 — 单订单视图
对于较早的订单,或仅重新订购子集的情况,单订单视图显示:
- 每行的 "Reorder this item" 按钮,以原数量添加一个款式
- 每行数量输入,买家可以在添加之前更改数量(默认为原订单数量)
- 底部的整单 "Reorder all items" 按钮 — 以原数量添加每一行
与面板重新订购相同的跳过商品行为,只是粒度更细。
重新订购使用买家的当前目录价格 — 而不是历史订单价格。这对 B2B 很重要:合同价格会变化,以旧价格重新订购会与新目录冲突。如果买家需要遵循旧价格,他们应该联系销售代表并提交报价。
多地点买家
某些 B2B 买家附属于多家公司(例如,为 5 家子公司下订单的企业应付账款经理)。对于这些买家,Vertex 会在移动抽屉页脚和桌面问候栏中自动显示一个公司切换器。
切换器渲染的位置
- 桌面端(≥1170px) — 当有多家公司可用时,在琥珀色 B2B 问候栏(header 顶部)中
- 移动端和平板(<1170px) — 在汉堡抽屉页脚底部,位于语言和货币胶囊上方
单公司买家不会看到它 — 简洁的 UI。切换器完全支持键盘访问,并与 Vertex 中的每个其他下拉菜单一致。
切换的工作方式
当买家选择不同的公司地点时,Shopify 会在会话中使用新公司重新加载页面。目录、定价、付款条款、送货地址和免税状态全部翻转到新公司。如果兼容则保留购物车,如果不兼容则清空并发出警告。全部原生 — 无应用、无手动同步。
登录、创建账户、激活、重置密码
所有身份验证屏幕都在 Vertex 设计系统中重新设计。它们共享一致的视觉语言:
- 居中卡片布局,使用店铺前端的标题字体和正文字体
- 卡片顶部的 logo 和小标题
- 单列表单,带全宽输入(52 px 触摸目标、focus-visible 环、标签在顶部)
- 店铺前端强调色中的主要 CTA 按钮
- 下方的辅助链接 — "Forgot password?"、"Create account"、"Already have an account?"
- 卡片下方的店铺前端页脚(轻量级 — 仅法律链接和版权)
登录屏幕
- 电子邮件和密码
- "Forgot password?" 链接
- "Create account" CTA -(B2B 补充)— 小提示:"Need a trade account? Request access →"
创建账户屏幕
- 名字、姓氏、电子邮件、密码
- "Create account" CTA -(B2B 补充)— 小提示:"Existing trade customer? Sign in →"
标准 Shopify 行为:新账户在能够登录之前需要经过电子邮件验证。新 B2B 账户由商家通过 Customers ▸ Companies 创建 — 他们不会自行注册。
激活账户屏幕
针对商家邀请的客 户。他们从邀请电子邮件落地此页面并设置密码。
重置密码屏幕
一个屏幕中包含两个屏幕:
- 请求重置 — 仅电子邮件输入 + "Send reset link" CTA
- 设置新密码 — 新密码 + 确认密码 + "Update password" CTA(点击电子邮件链接后)
在主题编辑器中自定义
客户账户屏幕在主题编辑器中可编辑,Vertex 在其中公开了一小组分区设置。这里的自定义是有意聚焦的 — 面板的结构是固定的,下面的控件就是 Vertex 提供的那些。
在主题编辑器中打开面板
- 打开 Online Store ▸ Themes ▸ Customize
- 在顶部模板下拉菜单中,选择 Customers ▸ Account
- 主题编辑器现在会在左侧边栏中渲染账户面板及 Account 分区
Account 分区有意将自定义保持得很小 — 在分区的 Layout 标题下,恰好有 两个设置:
| 自定义 | 方法 |
|---|---|
| Recent orders to show | 分区设 置 → "Recent orders to show" → 控制快速重新订购列表呈现多少个最近订单。范围 3–10,默认 5。 |
| Show Quick actions card | 分区设置 → "Show Quick actions card" → 打开或关闭快速操作卡片(默认开启)。 |
| 销售代表卡片可见性 | 自动 — 当公司的 vertex.rep_name metafield 已填充且买家已登录时显示该卡片;对 B2C 客户和 B2C 专用模式则隐藏。没有按分区的切换开关。 |
Vertex 的面板在 Shopify 的 新客户账户体验内渲染。欢迎问候、订单和个人资料选项卡,以及整体页面 chrome 都直接来自 Shopify — 您在 Shopify 后台的 Settings ▸ Customer accounts 下编辑品牌(店铺名称、logo、颜色),而不是在此分区中。上面的两个设置是 Vertex 在其上叠加的唯一主题级控件。
对于单订单视图(Order 分区),有一个设置:
| 自定义 | 方法 |
|---|---|
| Show print invoice link | 分区设置 → "Show print invoice link" → 打开或关闭订单详情页上的打印发票链接(默认开启)。 |
相关阅读
- 概述 — 为什么 Vertex 的客户账户是 B2B 感知的
- 安装 — 客户账户模板预启用即可使用
- B2B 设置指南 — 创建公司、送货地点、付款条款
- Metafield 设置指南 — 在哪里填充驱动代表卡片的销售代表 metafield
- 店铺前端模式指南 — Hybrid / B2B-only / B2C-only 如何与面板交互
- Markets & 多货币 — 货币在客户账户中如何渲染
- RFQ 页面指南 — 注册屏幕上的 "Apply for trade account" CTA
- 主题设置参考 — 账户相关设置
- FAQ + 故障排除 — 常见账户问题
总结
- Vertex 的客户账户套件是 B2B 感知的 — 同样的屏幕、两种布局、自动检测。
- B2B 面板呈现公司信息、付款条款徽章、完整销售代表卡片、最近 5 个订单的快速重新订购,以及快速链接网格。
- B2C 面板为速度而构建 — 仅订单和默认地址。
- 快速重新订购可从面板和单订单视图工作 — 无需应用。
- 多公司买家在移动抽屉页脚和桌面问候栏中获得公司切换器。
- 在 Vertex 设计系统中重新设计的登录、创建账户、激活和重置密码屏幕。
- Account 分区公开两个主题设置(最近订单数量和快速操作卡片);Order 分区增加一个打印发票切换。