Shopify Dawn主题如何在集合模板添加前端自定义每行产品数的下拉选项

方案1：原生Liquid + 前端代码实现（无额外依赖，性能最优） #

• 第一步：找到你当前使用主题的集合页模板文件，一般是sections/collection-template.liquid或者templates/collection.json（OS2.0主题），在产品列表上方插入下拉选择器的HTML代码，示例代码如下：

<select id="products-per-row">
  <option value="2">每行2个</option>
  <option value="3" selected>每行3个</option>
  <option value="4">每行4个</option>
  <option value="5">每行5个</option>
</select>

• 第二步：给产品列表的父容器添加CSS栅格规则，绑定CSS变量控制每行数量，示例代码：

.product-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(var(--per-row, 3), 1fr);
}

• 第三步：添加JS逻辑实现切换效果，无刷新版本只需要监听下拉选择器的change事件，直接修改:root的--per-row变量即可；需要支持页面刷新后保留设置的版本，可以把选中值存在localStorage或者URL查询参数里，页面加载时自动读取赋值

方案2：基于主题内置配置扩展（改代码量最少） #

• 目前所有Shopify官方OS2.0主题以及大部分第三方付费主题，本身已经内置了每行产品数量的后台配置项，你可以直接在主题编辑器的集合页设置面板里，新增用户端可操作的下拉选项，直接复用主题本身的栅格逻辑，不需要自己写CSS布局规则
• 如果你的主题本身支持多模板，也可以直接给集合页做多个不同每行数量的模板，用户切换的时候直接跳转对应模板路径即可

方案3：使用Shopify应用实现（零代码门槛） #

• 如果你完全没有代码修改能力，可以直接在Shopify应用商店搜索集合页布局类工具APP，这类APP普遍自带每行产品数切换、自定义排序、筛选等功能，安装后自动适配当前主题的样式，只需要简单设置就能上线使用

实现优化建议 #

• 响应式适配：移动端强制限制每行最多展示2个产品，避免用户选择大数值后页面排版错乱
• 偏好记忆：用localStorage存储用户的选择结果，用户下次访问集合页时自动应用之前的设置
• 兼容性校验：修改完成后要测试不同屏幕尺寸下的布局效果，同时确认和主题已有的筛选、分页功能没有冲突

内容的提问来源于stack exchange，提问作者PGupta