在 Shopify 店铺上安装 Vertex
本指南演练在 Shopify 店铺上安装 Vertex 高端 B2B 主题的全过程 — 从购买、启用 B2B、metafield 设置到首次发布。
- 基础 B2C 安装(仅主题,无 B2B):5 分钟
- 完整 B2B 安装(主题 + 原生 B2B + metafield + 首家公司):45–60 分钟
开始前的准备
Shopify 套餐要求
| 你需要 | 原因 |
|---|---|
| 任意 Shopify 套餐 | Vertex 可安装在每种套餐上 — Basic / Shopify / Advanced / Plus |
| Shopify Plus 或 Advanced + B2B 附加组件 | 仅当你想使用 Shopify 原生 B2B 功能时才需要。否则,Vertex 作为精致的 B2C 工业用品主题运行。 |
| 启用新客户账户 | 任何账户功能均需要 — Settings ▸ Customer accounts ▸ Show login link in checkout |
步骤 1 — 从 Shopify Theme Store 安装 Vertex
- 在 Shopify 后台进入 Online Store ▸ Themes
- 点击 Add theme ▸ Visit Theme Store
- 搜索 "Vertex" 或浏览到 B2B & Wholesale 类别
- 点击 Try theme,将 Vertex 作为未发布主题安装到店铺
- 点击 Customize 打开主题编辑器
主题已安装但未发布。你可以预览并定制 Vertex,不影响线上店铺。直到你准备好,再执行第 6 步发布。
步骤 2 — 启用 Shopify 原生 B2B(可选,但推荐)
如果你只需要 B2C,跳过此步 — 当无 B2B 客户登录时,Vertex 的 B2B 元素会自动隐藏。
- 进入 Settings ▸ Customer accounts
- 启用 New customer accounts
- 向下滚动至 B2B 并点击 Manage
- 点击 Enable B2B
- 现在你会在 Shopify 后台侧边栏中看到新的 B2B 区段
→ 创建首家公司、分配目录、设置 NET 条件等,请 参阅完整的 B2B 设置指南。
步骤 3 — 设置 Vertex metafield 命名空间
Vertex 读取若干由商家管理的 metafield 来驱动 PDP 增强功能(销售代表信息、发货地、MPN 搜索、规格书、技术规格、价格历史)。
有两种方式可以完成:
方式 A — 在 Shopify 后台手动设置(~15 分钟)
- 进入 Settings ▸ Custom data
- 点击 Companies(或 Products,取决于要添加哪个 metafield)
- 点击 Add definition,按照 Metafield 设置指南 中的表格创建每个 metafield
方式 B — 通过 Shopify GraphQL Admin API 批量设置(~5 分钟)
使用 Metafield 设置指南 中包含的 GraphQL mutation,一次性批量种入所有 Vertex metafield 定义。
当 metafield 缺失时,主题会优雅降级。当其背后的 metafield 为空时,PDP 块(文档、价格历史、发货地)会自动隐藏。先从最有影响力的开始(vertex.mpn 用于 SKU 搜索,vertex.rep_* 用于销售代表胶囊),随业务扩展再补充其他。
步骤 4 — 挑选你的起步配色
Vertex 以 Vertex 工业 / MRO 样式安装。Starter color palette(起步配色) 设置让你直接在主题编辑器中即时将其重新换肤,朝另一个垂直领域的外观靠拢 —— 汽车配件、办公与 IT 或印刷耗材。
| 起步配色 | 适用 | 强调色 |
|---|---|---|
| Custom(默认 —— 钴蓝色) | 工业 / MRO | 钴蓝色 #1d4ed8 |
| Signal red | 汽车配件 | 红橙色 #ec5f24 |
| Office blue | 办公与 IT 用品 | 蓝色 |
| Inkline teal | 印刷耗材 | 青绿色 |
切换配色:
- 在主题编辑器中,点击左下角的 Theme settings
- 打开 Colors
- 从 Starter color palette 下拉中选择你的起步配色
- 整个店铺前台会在预览面板中重新着色
→ 参阅 Vertex 可以呈现的样子,了解如何用配色和查找器搭建汽车配件 / 办公与 IT / 印刷的配置。
步骤 5 — 配置页头、导航、页脚
页头 + 页脚通过主题编辑器中的 区块组 进行配置:
- 在主题编辑器中,点击左侧栏的 Sections
- 点击 Header group 配置:
- 公告栏(顶部横条,带链接、社交、电话;提供深色 / 强调色 / 浅色配色方案)
- B2B 问候栏(仅对已登录的 B2B 客户可见)
- 主页头(logo、搜索、导航)
- 点击 Footer group 配置:
- 页脚菜单、社交链接、联系邮箱、邮件订阅、支付图标
步骤 6 — 预览,然后发布
- 在主题编辑器中,点击右上角的 Preview 按钮在新标签页中查看店铺
- 浏览以下页面:
- 首页
- 一个集合页面
- 一个产品页面
- 购物车
- 客户登录页
- 如果配置了 B2B 买家测试账户,登录并验证:
- 出现带公司名称 + NET 条件徽章的钴蓝色问候栏
- PDP 上渲染批量定价层级(若已分配到该买家的目录)
- 销售代表胶囊出现在页头中(若
vertex.rep_namemetafield 已设置)
- 回到 Online Store ▸ Themes,在 Theme library 中找到 Vertex
- 点击 Vertex 旁边的 ⋯ 菜单 ▸ Publish
你的店铺现已使用 Vertex 上线 🎉
安装排错
"我看不到钴蓝色 B2B 问候栏"
原因(按可能性排序):
- 你未以 B2B 客户身份登录。 仅当
customer.b2b?为 true 且customer.current_company已设置时才会渲染钴蓝色栏。请以关联到某公司的 B2B 买家身份登录。 - Storefront mode 被设置为 B2C-only。 打开 Theme settings ▸ B2B ▸ Storefront mode,确认它被设置为 Hybrid (auto) 或 B2B-only。
- Shopify 后台未启用原生 B2B。 确认上面的步骤 2。
"即使登录后价格仍显示'登录查看价格'"
启用了 Theme settings ▸ B2B ▸ Hide prices until customer logs in 切换。取消勾选该项即可禁用。
"销售代表胶囊未出现在页头中"
仅当买家所属公司的 vertex.rep_name metafield 已设置时,胶囊才会渲染。在 Customers ▸ Companies ▸ [公司名称] ▸ Metafields 中核实 vertex.rep_name 已填充。
→ 更多内容请见 FAQ + 排错。
后续步骤
- 主题设置参考 → — 每项设置的解释
- 区块设置指南 → — 配置每个区块
- B2B 设置指南 → — 创建公司、目录、NET 条件
- Metafield 设置指南 → — 可复制粘贴的定义