本文根据 Pagkit 原文《第 200 期 在 Shopify 产品系列筛选中展示 Color Swatch 色块》整理，原文链接：Using Color Swatch as Shopify Collection Filter。

视频教程​

• 通过 Bilibili 观看本期 Shopify 教程
• 通过 Youtube 观看本期 Shopify 教程

Shopify Dawn 以及其他官方免费主题从 12.0.0 版本开始，逐步支持在产品系列筛选中展示 Color Swatch 色块。只要主题支持相关能力，就可以参考这个流程，把颜色筛选从文字列表升级为可视化色块。

相关资源：增强版主题​

原文中先引用了增强版主题说明，用于补充可用主题能力。

本期重点是：如何在 Shopify 产品系列中展示色块作为筛选条件。相比纯文字，颜色会更直观；除自定义色值外，也可以使用图片作为筛选展示。

效果示例​

下面是原文中的效果示例，集合页筛选区域可以直接展示颜色色块。

设置方法​

整个设置流程可以理解为五个步骤：

1. 创建元对象。
2. 添加元对象条目。
3. 添加元字段，并引用元对象。
4. 设置元字段的值。
5. 添加并设置筛选条件。

下面五张图和原文顺序一致，分别对应这五个操作步骤。

1. 创建元对象​

先创建一个用于维护颜色筛选数据的元对象，例如 Color Filter。这个元对象可以包含名称、色值、图片等字段。

2. 添加元对象条目​

创建好定义后，为不同颜色添加具体条目。每个条目建议使用统一、稳定的命名，避免后续筛选项出现重复。

3. 添加元字段，引用元对象​

接着创建产品元字段，让商品可以引用刚才维护的颜色元对象。这样商品和颜色筛选数据之间就建立了结构化关系。

4. 设置元字段的值​

进入商品后台，为商品选择对应的颜色条目。这里的数据质量会直接影响前台筛选是否准确。

5. 添加和设置筛选条件​

最后进入 Shopify Search & Discovery 应用，把颜色字段添加为筛选条件，并设置显示方式。启用样本后，前台筛选就可以展示色块或图片。

额外提示​

1. 设置 Image 之后，图片会覆盖纯颜色显示。
2. Search & Discovery 中可以根据需求设置筛选逻辑是“与”还是“或”。
3. 如果主题产品系列筛选布局是水平方向，可以在主题编辑器中切换到产品系列页面，把产品网格布局改为垂直，让筛选显示在侧边栏。

官方参考​

• Shopify 官方筛选文档
• Shopify 官方文档：Adding color swatches using category metafields

延伸资源：低成本创建 Shopify 店铺​

原文结尾还引用了一篇 Shopify 开店相关资源，下面两张图也已下载到本项目并使用本地路径引用。

上线前检查清单​

• 商品颜色字段已补齐。
• 颜色命名没有重复、大小写混乱或中英文混用问题。
• Search & Discovery 中已经添加颜色筛选。
• 色块或图片展示符合品牌视觉。
• 桌面端和移动端筛选都能正常打开、选择和清除。
• 选择颜色后，集合页商品结果符合预期。

第一阶段关注运营基础：商品、支付、配送、政策和订单通知。第二阶段进入开发基础，理解主题结构、Liquid 与 Metafields。第三阶段再接广告营销，把素材、落地页、追踪和预算连成闭环。

这个站点会围绕这三条线持续补充教程。

很多主题问题并不是代码难，而是定位不准。建议先找到当前页面使用的 template，再追踪 section，最后检查 section 中渲染的 snippets。修改共享 snippet 前要搜索引用位置，避免一个小改动影响首页、集合页、商品页和移动端抽屉菜单。