产品页(PDP)版块
Vertex 产品模板专为 技术目录 构建 —— 服务关心零件编号、规格、数据表、MOQ、整箱包装和批量定价的买家。每个 B2B 接触点(批量层级、需登录才显示的价格、数量规则、销售代表卡片、发货地、NET-terms 徽章)都直接在 PDP 中内联渲染,无需任何配套 App。
同一个 product.json 模板同时为访客和已登录 B2B 买家渲染。价格、徽章、数量规则和销售代表卡片会自动反映客户的公司目录和付款账期 —— 您无需将 "B2B 产品模板" 与 "B2C 产品模板" 作为平行文件分开维护。
main-product
版块文件: sections/main-product.liquid
PDP 本身 —— 图库、标题、价格、变体选择器、数量输入、ATC,以及所有 B2B 感知表面都堆叠在这一个版块中。下文中的每一个块都是您可以在定制器中重新排序的 main-product 版块块。
图库
- 主图,在列表卡片上支持 图片悬浮翻转(需 2 张及以上图片)
- 主图下方的缩略图
- 点击放大(灯箱)
- 移动端:可滑动轮播,带圆点指示器
标题 + 元信息
- 产品标题
- 供应商(如显示)
- 发货地标签 —— 每个产品的
vertex.ships_from元字段或主题级别默认值 - MPN 行 —— 设置
vertex.mpn后,在标题下显示 "MPN: 1N4148"
价格区块
定价区域默认 B2B 感知:
- 批量定价层级 —— 服务器端从 Shopify 的
quantity_price_breaks渲染。买家可内联看到 "1–9: $4.50 · 10–49: $4.10 · 50+: $3.80"。当变体的quantity_price_breaks_count > 0时自动渲染。 - 需登录才显示的价格 —— 启用主题设置 Hide prices until customer logs in 时,访客看到的价格被替换为 "Log in to see pricing" + 登录链接。
- B2B 对比价 —— 当 B2B 目录价低于店面价时,以删除线显示对比价。
变体选择器
渲染为风格化按钮(颜色用色块、尺寸用按钮、其他维度用下拉)。售罄的变体在视觉上禁用(带删除线),但仍可选择,以便买家看到 替代项。
数量输入
数量规则在客户端和服务器端都强制执行:
| 规则 | 行为 |
|---|---|
| MOQ(最小值) | 不能低于 MOQ 递减。内联提示:"Minimum order: 12"。 |
| 最大值 | 不能超过最大值递增。内联提示:"Maximum: 144"。 |
| 整箱包装递增 | 按整箱大小步进。手动输入会向上取整到下一个有效值,并显示小型 toast 通知。 |
挂接到 B2B 目录的买家会获得公司专属数量规则;访客获得店面规则。两者都来自 Shopify 原生 API —— Vertex 只是负责渲染。
加入购物车 + 立即购买
- 加入购物车 —— 标准 ATC,售罄时禁用(除非启用了预订)
- 立即购买 —— Shopify 的加速结账按钮(Shop Pay、Apple Pay、Google Pay、PayPal)。可通过 Shopify 设置选用。
- 预订 —— 变体可预订时,将 "Sold out" 替换为 "Pre-order"(使用 Shopify 原生库存追踪)
- 到货提醒 —— 变体售罄且未启用预订时,显示邮件订阅表单(原生,无需额外 App)
销售代表卡片
对于已登录的 B2B 买家,PDP 上会显示销售代表卡片,展示公司的指定代表:
- 姓名(来自
vertex.rep_name) - 邮箱(来自
vertex.rep_email,作为mailto:链接) - 电话(来自
vertex.rep_phone,作为tel:链接)
仅当至少填充了一个代表字段且客户为 customer.b2b? 时才会渲染。
面包屑
根据产品的主要合集自动生成。输出 BreadcrumbList JSON-LD。
技术规格表块
Tech specs 块 —— 从您的技术规格数据渲染干净的 2 列规格表。用于尺寸、重量、材质、电压、容量、认证。
→ 填充方式请参阅 Metafield 设置指南。
文档与下载块
documents 块 —— 从产品元字段渲染 PDF 下载列表:
- 数据表(
vertex.datasheet) - MSDS(
vertex.msds) - 宣传册(
vertex.brochure) - 技术说明(
vertex.tech_sheet) - 安装指南(
vertex.install_guide) - 保修卡(
vertex.warranty)
未附加文档的产品自动隐藏。
价格历史披露
price-history 块 —— 可折叠的 "Price history" 区块,读取 vertex.price_history 元字段(日期+价格条目列表)。对监控市场趋势的工业买家很有用。
库存计数器(低库存提示)
Stock counter 块 —— 每变体的紧迫感提示。仅对您追踪库存的变体显示,当库存降至低库存阈值(10 件)时切换为 "仅剩 N 件" 警告。在不向竞争者透露精确库存的情况下鼓励行动。
渲染以下状态之一:
- 库存充足(超过 10):"In stock"
- 等于或低于 10 件:"Only 4 left in stock"
- 可缺货下单(为零,但设置为继续销售):"Back-ordered — ships in 7–10 days"
- 售罄(为零,不可缺货下单):"Sold out"(带到货表单)
启用 Hide prices until customer logs in 时,整个价格区(包括批量层级和对比价)对访客都被替换为 "Log in to see pricing" 提示。数量规则、库存计数器和销售代表卡片仍会显示,以便买家判断是否值得为该产品登录。
product-tabs
版块文件: sections/product-tabs.liquid
将 PDP 内容拆分到选项卡的版块块。将该版块放在 product.json 模板中 main-product 下方,以减少长规格产品的视觉杂乱。
每选项卡块设置: 标题、内容(富文本/文件/视频)。
常见选项卡模式:
- Description —— 主营销文案
- Specs —— 超出技术规格表的扩展规格
- Datasheet —— 嵌入式 PDF 查看器
- Shipping & Returns —— 物流信息
- Video —— 嵌入式 YouTube / Vimeo
选项卡使用原生 <details> + <summary>,具备完整的键盘可访问性。第一个选项卡默认打开;打开另一个会自动关闭其他(手风琴模式),或保持打开(切换模式),取决于版块的 Allow multiple open 设置。
related-products
版块文件: sections/related-products.liquid
PDP 下方的推荐条。来源为同合集或同标签的产品。
设置:
| 设置 | 说明 |
|---|---|
| 标题 | 例如 "Customers also viewed" 或 "You may also like"。 |
| 来源 | same_collection(默认)· same_tag · manual。 |
| 最大产品数 | 4(默认)/ 6 / 8 / 12。 |
| 显示价格 | 切换。遵守需登录才显示价格的规则。 |
| 显示供应商 | 切换。 |
对于 B2B 目录买家,仅显示买家目录中的产品(Shopify 原生筛选 —— Vertex 端到端遵循)。
recently-viewed
版块文件: sections/recently-viewed.liquid
localStorage 追踪 的产品(每位买家最多 12 件)。显示在 PDP 底部,也可作为条状版块放在首页。
工作原理
- 每次产品浏览都追加到
vertex_recently_viewedlocalStorage 键(FIFO,上限 12) - 该版块在客户端读取该键并获取每个产品的卡片标记
- 买家清除浏览器站点数据时清空 —— 不是心愿单,不会持久化到 Shopify
设置
- 标题 —— "Recently viewed"
- 最大产品数 —— 4 / 6 / 8 / 12
- 空时隐藏 —— 切换,默认开启(买家没有浏览历史时整个版块消失)
持久化心愿单需要 Shopify App —— Vertex 通过严格按会话/浏览器范围保存最近浏览来保持符合主题商店政策。比较功能采用相同模式(参见 B2B 专用版块)。
sticky-cart
版块文件: sections/sticky-cart.liquid
仅移动端 的粘性 ATC 栏,在买家滚动越过主 ATC 后出现。即使深入到规格表中,加入购物车也仅需一次点击。
渲染内容
- 产品图缩略图(左)
- 已选变体标题 + 价格
- 数量输入
- ATC 按钮(右)
设置
- 仅在移动端显示 —— 默认开启(桌面端有粘性页眉用于导航;移动端从粘性 ATC 获得更多转化提升)
- 显示变体标题 —— 切换
- 配色方案
该版块在主 ATC 上使用 IntersectionObserver —— 仅在主 ATC 滚出视口时渲染,滚回视口时消失。
B2B 交互速查表
| 表面 | 访客 | 已登录 B2C | 已登录 B2B |
|---|---|---|---|
| 价格区块 | 若启用 "Hide prices until customer logs in" 则隐藏 | 店面价格 | B2B 目录价 + 批量层级 |
| 批量定价层级 | 隐藏 | 隐藏 | 可见(服务器端渲染) |
| 数量规则 | 店面 MOQ/最大值 | 店面 MOQ/最大值 | 公司目录 MOQ/最大值 |
| 销售代表卡片 | 隐藏 | 隐藏 | 可见(代表字段已填充时) |
| NET-terms 徽章 | 隐藏 | 隐藏 | 在问候栏中可见(非 PDP) |
| 预订 ATC | 启用时可见 | 启用时可见 | 启用时可见 |
| 到货表单 | 售罄时可见 | 售罄时可见 | 售罄时可见 |
| 库存计数器 | 可见 | 可见 | 可见 |
| 最近浏览 | 可见(localStorage) | 可见(localStorage) | 可见(localStorage) |
下一步
- B2B 专用版块 → —— 批量订单、RFQ、比较、B2B 功能推广
- 销售提升版块 → —— 库存计数器、到货提醒、快速查看
- 页眉、页脚与外壳 → —— 页眉、页脚、B2B 问候栏
- B2B 设置指南 → —— 启用 B2B + 填充销售代表元字段
- 元字段设置指南 → —— 数据表、MPN、发货地、技术规格