Shopify 集合列表页(list-collections)配方
集合列表页的任务是让顾客在多个商品范围之间选一个入口:“这家店有哪几类商品,我该点哪一个”。它对应 Shopify 的 list-collections template type,官方页面写明它渲染集合列表页,路径为 /collections,列出店铺的集合。进入前顾客通常只带着一个模糊范围,或者是手动改地址、点了菜单里的“全部分类”链接才到这里。
list-collections 只有一个默认业务页面,所以本文同时是入口和配方。检索路径是:
list-collections→ 是否需要 alternate → 页面内容清单 → 页面组合 → 内容 × 展现 → Theme 实现
先判断这页是否值得单独设计
这个页面经常没有人认真设计:分类少的店,首页分类模块加菜单已经完成选入口的任务,/collections 只是一个兜底。设计前先回答三个问题。
| 问题 | 结论 |
|---|---|
| 顾客能否从页头菜单和首页分类直接进入目标集合 | 能的话,本页只需保证正确,不必扩展 |
| 集合数量是否多到需要一页来扫读 | 少于几个可以只用简单网格;很多时才需要分组、搜索或分页 |
| 是否有稳定的“分类之外”的入口,例如活动、礼物、系列 | 有再考虑分组;否则不要把活动混入分类 |
何时不需要独立 alternate:默认 list-collections.json 已能表达页面组成时,不建立 alternate。参照 Template type 与 alternate template,只有真实导航任务稳定不同且可复用时才增加。这里还有一个平台限制:官方 alternate 页面写明可以“分配给关联资源”“在主题编辑器预览”或用 ?view= 渲染,但只以商品为例,没有说明 /collections 这类没有单个资源的页面怎样分配,也没有说明 view 参数对它是否有效,均未核验;在核验前,把默认模板作为本页的唯一模板更稳妥。
页面内容清单
内容分两类:来自内容类型的编辑内容,与运行时读取的集合数据。
编辑内容(内容类型)
| 优先级 | 页面内容 | 回答的问题 | 来源边界 |
|---|---|---|---|
| 核心 | 商品分类入口 | 我可以按什么范围开始浏览 | 名称、一句定义、目标集合、排序、负责人,均取自该内容类型 |
| 核心 | 页面标题与一句说明 | 这是什么页面、范围有多大 | Page 之外的主题设置或简短文字 |
| 可选 | 分组标题 | 这些分类怎样归类 | 同一层同一种维度,不把“新品”“男士”“低于 500 元”并列 |
| 可选 | 特色商品或活动入口 | 现在优先看什么 | 带理由与期限,与稳定分类分开 |
| 可选 | 搜索入口 | 我知道要找什么,不想逐个点分类 | 见下文,复用站内搜索 |
| 可选 | 客服入口 | 我找不到怎么办 | 有真实渠道才放 |
运行时数据(集合资源)
| 数据 | 用途 | 官方页面所述 |
|---|---|---|
| 集合列表 | 页面的入口来源 | collections 对象包含店铺的全部集合,可遍历或按 handle 取单个 |
集合标题、url、handle | 卡片文字与链接 | 直接由集合提供 |
| 集合图片 | 卡片图 | collection.image 可能为 nil;缺省时回退到第一个商品的主图,仍没有则为 nil |
| 商品数量 | 可选的数量提示 | products_count 是当前视图的商品数,all_products_count 含被筛掉的商品 |
| 排序 | 入口先后 | 官方页面写明默认按字母顺序,商家可以通过自定义菜单重排 |
顾客看到的分类入口来自集合,而不是 Shopify 的标准商品分类(product category),二者的区别见商品分类。集合是否出现在店面还取决于发布范围和菜单入口,排查见集合与发布。
页面组合
标题与说明 × Intro → 分类入口 × Grid 或 Cards → 搜索入口 × Search Form → 特色或活动入口 × Cards → 客服出口 × Link
顺序是待验证假设,不保证任何转化效果。
最小成立组合
页面标题 × 一句说明 → 分类入口 × Grid
每个入口是“名称 + 可选图片”,点击进入对应集合页(见集合浏览与筛选)。分类很少时只要这一段。
| 段落 | 回答的问题 | 模块与展现 | 缺失时 |
|---|---|---|---|
| 标题与说明 | 这里能找到什么 | 标题与一句话 | 不删除;说明可以只有标题 |
| 分类入口 | 我点哪一个 | 商品分类 × Grid 或 Cards | 零项:不显示页面,改为把入口并入首页或菜单;一项:直接进入该集合,不展示单项列表 |
| 搜索入口 | 我已知要找什么 | 站内搜索,页头已有搜索时不重复 | 页头已提供或分类少于十个左右时删除(“十个”为 WooDawn 的经验起点,非官方数值) |
| 特色或活动入口 | 现在优先看什么 | 特色商品或活动入口 × Cards | 没有带理由和期限的入选内容就删除;不用分类冒充特色 |
| 客服出口 | 找不到怎么办 | 客服入口 | 没有真实渠道就删除 |
常见扩展
- 分组:集合很多时,按同一维度分组(用途、对象、品类),每组配一个标题。分组标题是页面结构,不是新的集合。
- 分页或加载更多:Shopify 的
paginate标签可以对collections分页,官方页面写明每页 1 到 250 项、最多分页到第 25,000 项;翻页方式见 Pagination。分类很多以至需要分页时,先想想是否应该分层。 - 文字列表:图片缺失或描述性强时,用 List 代替图片网格,保证无图也能扫读。
不应默认出现
- 完整的筛选面板:那是集合页和搜索结果页的任务;本页的对象是范围而不是商品。
- 大量商品卡:商品浏览交给集合页,本页只允许少量特色入口。
- 未经核对的商品数量:数量随筛选和发布状态变化,不写死。
与首页分类模块的分工
首页和本页都可能展示分类,二者不应完全重复。
| 维度 | 首页分类模块 | 集合列表页 |
|---|---|---|
| 数量 | 少而精,只放主要范围 | 完整目录,可分组 |
| 作用 | 帮首次访客快速选一个起点,并服务首页整体叙事 | 让顾客一次看清全部范围 |
| 选择方式 | 由运营挑选,可与活动对应 | 尽量按稳定分类规则,不随活动变化 |
| 说明文字 | 简短,服务主张 | 可稍详细,写清纳入范围 |
首页分类入口应是本页的子集或摘要,并用同一个分类名称和同一个目标。首页配方见Shopify 首页。两处名称不一致,或首页指向了本页没有的集合,说明分类定义没有单一来源。
内容 × 展现形式
| 内容 | 首选形式 | 适用条件 | 退化方式 |
|---|---|---|---|
| 分类入口 | Grid(图片加名称) | 每个分类都有代表图,图片能帮助区分 | List(纯文字),或无图卡片 |
| 分组标题 | 标题加 Grid 或 List | 分类多且能按同维度分组 | 单组无标题 |
| 搜索入口 | 搜索框 | 分类多、顾客常带明确词进入 | 删除,依赖页头搜索 |
| 特色入口 | Cards | 有理由和期限 | 删除 |
| 客服出口 | 链接 | 有可用渠道 | 删除 |
状态与退化
- 零个集合:不应向顾客展示空页面。改为隐藏
/collections的菜单入口,并考虑使用重定向(见URL 重定向)。 - 只有一个集合:一个入口不构成选择,直接把顾客引到该集合页。
- 空集合:官方页面没有说明
collections是否包含空集合;官方示例输出中出现了名为 Empty 的集合,但示例数据不能推出真实店铺的规则,需要在真实店铺验证。遵循商品分类:空集合隐藏入口或指向上级分类,不链接到空列表。主题在遍历时可以用products_count判断,是否已经这样做需要逐个主题检查。 - 未发布或市场不可见的集合:所读官方页面没有说明它们是否出现在
/collections,未核验;发布与可见性问题回到集合与发布排查。入口出现之前先在真实店铺用不同市场访问确认。 - 重复分类:同一商品可以属于多个集合,这本身没有问题;问题在同一个范围有两个名字或两个入口(例如“新品”“New Arrivals”“最新上架”指向同一批商品)。处理方式:合并为一个集合,并让所有入口指向它;确实要保留不同入口时,写清各自的纳入规则,并让页面只显示一个。
- 集合图片缺失:图片可能来自回退的第一个商品主图,也可能没有。不要假设每个卡片都有图,无图时退化为文字卡片。
- 命名跨市场差异:集合标题、图片和可见性随市场不同时,页面以当前市场的集合为准,翻译与市场发布见集合与发布。
- 加载与错误:本页通常由服务端直接渲染集合,不涉及异步状态;使用分页或加载更多时,保证每页可以通过普通链接访问。
Shopify Theme 实现
以下机制读自 Shopify 官方文档,核验于 2026-09-29。
| 层次 | 说明 |
|---|---|
| Template | list-collections 渲染 /collections;可选 JSON 或 Liquid。alternate 的分配方式对该页面未核验 |
| Main Section | 官方 JSON templates 页面对 main Section 没有强制说明;集合列表通常由主题的一个 Section 遍历 collections 输出 |
| Liquid | 可用 collections 对象、linklist 对象和 link.type、link.object;官方示例按 collection_link 类型的菜单项取集合,以支持自定义顺序 |
| Sections / Blocks | 分组标题、单个分类入口、特色入口、搜索入口和客服链接按需独立 |
| Settings | 集合选择、菜单选择、布局与卡片图比例;不提供绕过空集合规则的开关 |
| 分页 | 使用 paginate 标签,可对 collections 分页,官方给出的每页范围与总上限见上文 |
官方页面同时写明,JSON 模板最多 25 个 Section,每个 Section 最多 50 个 Block;商家能在主题编辑器中添加的 Section 必须定义 preset。
特色入口和搜索页的实现,可参考固定版本主题解析:Horizon 集合与搜索,其中说明的是集合页与搜索结果页,而不是 /collections;本页没有对应的主题源码解析,暂未核验。
发布检查
- 每个入口指向真实、非空、当前市场可见的集合,
/collections没有多余的重复项; - 页面上的分类名称与首页、菜单和集合页标题一致;
- 缺少集合图片的分类在页面上仍能识别;
- 只有一个集合、多个集合、很多集合时页面都合理;
- 搜索入口只在需要时出现,与页头搜索不重复;
- 键盘可以到达每一个入口,链接文字独立可理解;
- 多市场店铺在每个目标市场分别检查列表内容和名称。
待继续完善
collections对象是否包含空集合、未发布集合,需要在真实店铺验证;- alternate template 如何分配给
/collections、?view=是否适用,官方页面未说明; - 缺少真实店铺的集合列表页样例与分类命名研究;
- 新旧集合模型对
/collections输出的影响未核验; - 主题层面的
/collections实现待固定版本后补充。