Shopify的Supply主题是一款经典且轻量的免费主题，它以简洁的网格布局和良好的可读性受到不少中小店铺的欢迎。对于刚接触该主题的店主来说，产品系列列表和特色产品系列是两个非常实用的内置功能。前者控制着系列页面的整体商品展示逻辑，后者则让商家可以在首页或自定义页面中突出某个重点系列。默认配置虽然已经可以正常使用，但要想让店铺更贴合自身品牌调性，往往需要对这两个分区进行针对性调整。本文会按照后台操作、样式微调、移动端适配的顺序，详细说明每一步的具体位置和设置方法。
一、Supply主题产品系列结构概览
在Supply主题中，产品系列通常通过两种方式呈现在访客面前。第一种是产品系列列表页面，也就是访客点击某个系列名称后进入的独立页面。这个页面会自动展示该系列下的所有商品，并按照主题设置中的排序规则进行排列。第二种是特色产品系列分区，它属于首页或自定义模板中的一个可添加模块，用来在页面中的某个区域突出展示一个指定系列的商品。两者虽然都围绕产品系列，但作用位置和可配置项有明显区别。
| 功能点 | 产品系列列表 | 特色产品系列 |
|---|---|---|
| 所在位置 | 系列页面模板 | 首页或自定义模板 |
| 主要用途 | 完整展示单个系列所有商品 | 突出展示指定系列的精选商品 |
| 可设置内容 | 列数、图片比例、排序、显示字段 | 系列选择、标题、列数、显示数量、按钮 |
产品系列列表页面主要受主题编辑器中产品系列列表这个分区的设置影响。你可以调整每行显示的商品数量、商品图片的裁剪方式、是否显示商品供应商或价格，以及商品排序规则。特色产品系列分区则更灵活，它允许你选择任意一个系列，单独设置标题、每行商品数、显示数量以及查看全部按钮的文字和跳转行为。理解这个区别后，后续调整会更有针对性。
二、自定义产品系列列表页面的具体步骤
第一步是进入Supply主题的自定义编辑器。登录Shopify后台，点击在线商店，再点击主题右侧的自定义按钮。进入编辑器后，顶部中间的页面选择器默认显示首页，你需要点击它并选择产品系列列表。如果你的主题是旧版本，可能需要先切换到产品系列模板，再勾选产品系列列表。选择后，左侧的分区列表里会出现产品系列列表这一项。
第二步是调整分区的基础设置。点击左侧的产品系列列表分区，右侧会展开对应的设置面板。这里通常包含以下几个关键选项：每行产品数可以选择2、3或4，移动端一般会自动降为2列或1列；图片比例可以选择方形、纵向或横向，建议根据产品主图尺寸统一选择；显示产品供应商和显示产品价格可以按需勾选。排序方式则决定了系列内商品的展示顺序，常见选项有按字母顺序、按价格高低、按新品上架时间等。若系列内已经手动排序，可以选择使用系列内排序。
第三步是利用自定义CSS进一步优化间距和卡片样式。Supply主题的网格间距默认较为紧凑，如果你希望增加产品卡片之间的留白，可以在主题设置中找到自定义CSS区域，输入类似.product-card { margin-bottom: 20px; } 的规则。当然，具体类名可能因主题版本不同略有差异，建议先通过浏览器开发者工具查看当前元素类名。调整完成后务必点击保存，并在前端刷新页面确认效果。
三、添加并设置特色产品系列分区的完整流程
特色产品系列分区通常放在首页模板中。在自定义编辑器里，先将页面选择器切回首页，然后点击左侧的添加分区按钮。在弹出的分区列表中，找到特色产品系列并点击添加。新分区会出现在左侧当前模板的最下方，你可以拖动它调整到首页中的目标位置，例如横幅图下方或博客文章上方。
添加分区后，点击该分区展开设置。第一个选项是选择产品系列，下拉菜单会列出店铺中已有的所有系列。选定系列后，可以设置分区标题，例如精选新品或热卖推荐。接下来是每行产品数，桌面端通常选择4列，移动端建议保持2列，避免商品图过小。显示数量可以根据需要设置，一般建议不超过8个，既能突出系列特色，又不会让首页过长。最后是查看全部按钮，你可以修改按钮文字，也可以选择隐藏按钮，只展示商品网格。
需要特别注意的是，特色产品系列中商品的排序完全取决于该系列内部的产品排序，而不是分区设置。如果你希望首页展示的商品按特定顺序排列，需要先进入产品系列管理页面，对该系列内的商品进行手动排序。否则默认会按照后台设置的排序规则，可能与预期不符。
四、常见调整技巧与注意事项
在实际调整过程中，有几个细节值得留意。如果产品系列列表页面显示为空，多半是因为该系列下没有已上架且库存状态正常的商品，或者该模板没有正确关联到产品系列列表分区。此时可以先检查产品状态，再回到主题编辑器确认分区是否存在。
移动端适配也常被忽略。Supply主题虽然会自动响应，但每行列数在移动端可能会根据屏幕宽度自动调整。如果发现移动端商品图过小，可以在特色产品系列分区中单独设置移动端列数为2，并适当增大图片比例。性能方面，首页不要添加过多特色产品系列分区，每个分区的商品数量也不宜过多，否则会影响首屏加载速度。
最后，如果你对代码比较熟悉，还可以通过编辑主题文件进一步定制。比如修改产品系列列表的网格间距、卡片阴影或悬停效果。Supply主题的代码结构清晰，相关样式多位于assets目录下的主题样式文件中。修改前建议先复制主题进行备份，避免不可逆的错误。
掌握以上步骤后，你就可以根据不同系列的特点灵活设置展示方式。无论是统一品牌视觉，还是突出特定促销系列，Supply主题都能通过简单的后台操作配合少量CSS调整达到理想效果。
Shopify Supply主题产品系列列表特色产品系列 修改时间：2026-10-13 08:58:24