EN
Shopify 知识库 · 指南

Shopify 集合列表页(list-collections)配方

从 Shopify list-collections template type 进入 /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。

层次说明
Templatelist-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 实现待固定版本后补充。