跳到主要内容

查找器版块(级联下拉)

Vertex 的 Finder 版块是一个级联下拉产品发现小部件。买家通过依次选择 3 个连续值 —— Make → Model → Year,或 Brand → Category → Capacity,或 Printer Brand → Model → Color —— 缩小范围至他们需要的精确部件,查找器随后将其带至筛选后的合集。

Vertex 附带 一个 demo(工业 / MRO),而同一个 Finder 版块为你在其基础上搭建的 汽车配件、办公与 IT 以及 打印耗材 配置提供支持。你可以设置 三种查找器类型:

  • 汽车配件 —— Make / Model / Year
  • 办公与 IT —— Brand / Category / Capacity
  • 打印耗材 —— Printer Brand / Model / Color

默认的 Vertex(工业)demo 不附带查找器 —— 它转而依赖分面合集筛选和预测搜索。

一个版块,三种查找器类型

您无需为每个行业安装不同的版块 —— 在每个配置中都是 同一个 Finder 版块。每个配置只是填入自己的下拉框 标签 和 选项列表(Make/Model/Year、Brand/Category/Capacity,或 Printer Brand/Model/Color)。将级联切换到另一个垂直领域,只需编辑那些标签和选项即可。

Make/Model/Year 查找器​

查找器是一个 3 级级联。选择第 1 级 → 第 2 级的选项根据第 1 级的选择填充 → 选择第 2 级 → 第 3 级的选项填充 → 点击提交 → 前往筛选后的合集。

打开 Shopify 后台 → 在线商店 → 主题 → 自定义。在页面编辑器中,点击 添加版块 并选择 Finder。

设置​

  • 标题 —— "Find parts for your vehicle" 或 "Find toner for your printer"。
  • 介绍文本 —— 简短安抚 —— "Select your make, model, and year to see compatible parts."。
  • 下拉框 1 / 2 / 3 标签 —— 每个级别的可见标签 —— 例如 Make、Model、Year。更改这些标签(以及下面的选项块)即可将同一版块变成您想要的任何级联。
  • 查询参数名(每个下拉框)—— 每个级别添加到搜索/合集链接的 URL 参数(例如 make、model、year)。留空则默认为 q1 / q2 / q3。
  • 提交按钮标签 —— "Find parts" 或 "Find toner"。
  • 表单操作 URL —— 表单提交的目标。默认为 /search;指向合集 URL(例如 /collections/all)以改为筛选合集。
  • 配色方案 —— 标准配色方案下拉框(Light / Accent band / Dark)。
  • 垂直内边距 —— 查找器横幅上下获得多少留白。

每个下拉框的选项来自您添加到版块的 选项块 —— 每个选项一个块。下拉框 2 / 3 的选项可以设置 Parent value,使其仅在选定匹配的父级选择后才出现,这就是级联缩小范围的方式。

三种查找器类型​

1. Make / Model / Year —— 汽车配件配置​

适用于具有适配性驱动目录的 汽车配件分销商。

级联:

  1. Make —— Ford、Toyota、Chevrolet、BMW 等
  2. Model —— 根据选定的 Make 填充(F-150、Camry、Silverado、3 Series)
  3. Year —— 根据选定的 Make 和 Model 填充(2018、2019、2020……)

提交: 将买家带至匹配的合集,筛选出带有该车辆标签的产品。

数据设置: 在主题编辑器中,作为选项块将选项直接添加到版块:

  • 每个 Make 一个 下拉框 1 选项(Ford、Toyota、Chevrolet……)
  • 每个 Model 一个 下拉框 2 选项,将其 Parent value 设为它所属的 Make
  • 每个 Year 一个 下拉框 3 选项,将其 Parent value 设为它所属的 Model

然后为合集打标签,使提交的 URL 能够匹配(Vertex 使用 Shopify 原生的基于标签的筛选)。

2. Brand / Category / Capacity —— 办公与 IT 配置​

适用于 办公、IT 和电子产品分销商。

级联:

  1. Brand —— HP、Dell、Lenovo、Apple、Cisco
  2. Category —— 根据选定的 Brand 填充(Laptops、Monitors、Routers、Printers)
  3. Capacity —— 根据选定的 Brand 和 Category 填充(8 GB / 16 GB / 32 GB · 24" / 27" / 32" 等)

提交: 将买家带至匹配的品牌与类别合集。

数据设置: 在主题编辑器中作为选项块添加选项 —— 每个 Brand 一个下拉框 1 选项,每个 Category 一个下拉框 2 选项(将其 Parent value 设为 Brand),每个 Capacity 一个下拉框 3 选项(将其 Parent value 设为 Category)。

3. Printer Brand / Model / Color —— 打印耗材变体​

适用于销售需要匹配特定打印机的碳粉、墨水和耗材的 打印耗材分销商。

级联:

  1. Printer Brand —— HP、Canon、Brother、Epson、Xerox 等
  2. Printer Model —— 根据选定的 Brand 填充(LaserJet Pro M404、PIXMA TR8620 等)
  3. Color —— 根据选定的 Brand 和 Model 填充(Black、Cyan、Magenta、Yellow,或 Multi-pack)

提交: 将买家带至匹配的合集,筛选出与该打印机兼容的墨盒。

数据设置: 在主题编辑器中作为选项块添加选项 —— 每个 Printer Brand 一个下拉框 1 选项,每个 Printer Model 一个下拉框 2 选项(将其 Parent value 设为 Brand),每个 Color 一个下拉框 3 选项(将其 Parent value 设为 Model)。

此级联是 打印耗材 配置的成败所在,因此打印耗材店铺在你完成设置后即可获得一个交钥匙碳粉查找器 —— 只需将示例选项替换为您自己的打印机产品阵容即可。

级联的工作原理​

查找器的选项来自您添加到版块的选项块,因此一切都内置在页面中。从那里:

  1. 页面加载时,第 1 级的选项从其下拉框 1 选项块中填充
  2. 当买家选择第 1 级时,第 2 级缩小到 Parent value 与第 1 级选择匹配的选项
  3. 当买家选择第 2 级时,第 3 级缩小到 Parent value 与第 2 级选择匹配的选项
  4. 提交时,买家被带至搜索结果或合集,每个级别都作为其查询参数添加

选项在页面加载时就已内置 —— 因此没有额外的网络请求,级联是即时的。

无 JavaScript 也能工作

第一级的选项直接内置在页面中,因此即使买家的浏览器禁用了 JavaScript,查找器仍然能工作 —— 他们可以单独提交第一级并到达筛选后的结果。这与您在 Vertex 中各处看到的渐进增强理念一致。

设置您的查找器数据​

对于每种查找器类型,您需要:

  1. 将三个下拉框标签设置 为您的级联(例如 Make / Model / Year),如果想要干净的 URL,则设置每个级别的 查询参数名。
  2. 每个选项添加一个选项块 —— 每个顶层值一个下拉框 1 选项,然后是设置了 Parent value 的下拉框 2 和 3 选项,使每个级别缩小下一个级别。
  3. 将表单操作 URL 指向 /search(默认)或合集(例如 /collections/all)。
  4. 为合集打标签,使筛选 URL 能匹配。Vertex 使用 Shopify 原生的基于标签的筛选,因此 "Ford F-150 parts" 合集应带有 vehicle:ford-f-150 标签。

→ 每种查找器类型(汽车配件、办公与 IT、打印耗材)都遵循相同的三步 —— 为你的级联设置标签、每个选项添加一个选项块,然后替换为您自己的值。

在何处放置查找器​

位置适合
首页顶部,紧贴英雄区下方查找器 就是 首页价值主张的垂直领域(汽车配件、打印耗材)
英雄区内(作为侧面板)英雄图承载价值主张、查找器作为并列 CTA 的垂直领域
精选合集下方查找器是多条浏览路径之一的垂直领域
专用查找器页面查找器是主导航方式的垂直领域 —— 从页眉次级菜单链接到它

汽车配件和打印耗材配置将查找器放在英雄区下方。办公与 IT 配置在英雄区内使用一个较小的变体。

B2B + 查找器​

对于已登录的 B2B 买家,查找器将其带至筛选后的合集 —— 该合集会遵守买家的 B2B 目录范围。因此 Ford F-150 搜索只会显示买家目录中的 F-150 配件,并应用买家的批量定价层级。

查找器本身并不按目录筛选 —— 该筛选发生在他们落地后的合集页上。这是正确的职责划分:查找器缩小至正确的产品族;合集只显示买家能以正确价格购买的商品。

查找器数据质量提示​

  • 使用一致的大小写 填充条目(始终是 Ford,而非 FORD 或 ford)—— 级联完全匹配字符串
  • 避免末尾空白 出现在条目值中 —— 即使不可见的空白也会破坏级联
  • 为每个条目填满 3 级 —— 不完整的条目会破坏缺失级别下游所有人的级联
  • 为目标合集设置合理的默认值 —— 提交部分选择(或选择没有匹配)的买家将到达此处

下一步​