Shopify 知识库 · 指南
Horizon 集合与搜索：结果、筛选和分页的分工
基于 Horizon 4.2.0 源码，区分 Shopify 集合页与搜索结果页的数据来源、商品网格、筛选 URL 和分页控制器，以及预测搜索入口。
历史资料
请结合文中的适用版本和来源阅读。
本文基于 Horizon 4.2.0，源码固定到 5acd1b6（核验于 2026-10-07）。结论限于此 commit，不表示其他版本行为相同；本篇为源码分析，未完成店铺运行验证。
集合页和搜索结果页都显示商品网格，但数据来源和空结果处理不同。先确认资源，再追踪筛选与分页，能避免把所有结果展示归给一个控制器。
集合与搜索共用什么
sections/main-collection.liquid 对集合商品分页，组织筛选块与商品卡；sections/search-results.liquid 对搜索结果分页，在有结果时筛出商品，在无结果时选择备用集合商品。
两者都将捕获的卡片内容交给 snippets/product-grid.liquid。因此，无搜索结果时看到商品并不自动意味着搜索命中；必须看它处于哪个分支，以及页面如何说明这些商品的来源。
三类 JavaScript 职责
| 入口 | 已核对的职责 | 阅读时的问题 |
|---|---|---|
| assets/results-list.js | 结果布局控制，继承分页列表；移动端单列视图下把卡片图片 sizes 改为 100vw | 网格密度或布局怎样变化 |
| assets/facets.js | 收集筛选参数、更新地址、请求分区 | URL 是否保留了当前筛选与查询 |
| assets/paginated-list.js | 分页内容与前后页处理 | 下一页怎样进入列表与浏览历史 |
筛选块的初始标记见 blocks/filters.liquid。不能仅因为主 Section 引入 results-list.js，就把筛选请求、URL 和全部分页逻辑都归给这一个文件。
预测搜索另有入口
sections/predictive-search.liquid 服务于预测搜索片段。它与完整搜索结果页面的职责不同：输入时的建议、打开搜索界面和提交后的结果页，应分别跟踪，而不是以一个截图代表全部搜索行为。
验证结果是否一致
检查筛选后的 URL、结果数量、已选条件和商品列表是否一致；再测清除条件、无结果、第二页与浏览器返回。无限滚动和普通分页应分别验证，不用一个模式的结果替另一个模式背书。