如何为Shopify特定集合修改产品列数为两列？
2026-5-20
如何在Shopify中为特定集合调整产品列数（从默认4列改为2列）
嘿，我来帮你搞定这个问题！要给单个集合单独改列数，不用动全局设置，咱们可以通过两种靠谱的方法实现，看你习惯哪种：
方法一：创建自定义集合模板+CSS
这种方法适合你以后可能还要给其他集合改不同列数的情况，扩展性强：
- 第一步：登录Shopify后台，点击「在线商店」→「主题」，找到当前在用的主题，点击「操作」→「编辑代码」。
- 第二步：在左侧的「Templates」文件夹下，点击「添加新模板」，模板类型选「collection」，命名比如
collection.two-columns（名字随便起，好记就成），然后点「创建模板」。 - 第三步：打开刚创建的模板文件，在合适的位置（比如文件开头或者已有的
<style>标签内）添加这段CSS：
/* 给这个特定集合设置2列布局 */ @media screen and (min-width: 768px) { .collection-template-two-columns .grid__item { width: 50% !important; /* 2列就是50%，默认4列是25% */ max-width: 50% !important; } }
- 第四步：回到后台「产品」→「集合」，找到要修改的那个集合，进入编辑页面，在「模板」下拉菜单里选中刚才创建的
collection.two-columns，保存更改就搞定了。
方法二：用Liquid判断集合Handle直接加CSS
如果不想新建模板，直接在现有集合模板里加判断更省事：
- 第一步：同样进入主题编辑代码，找到「Templates」里的
collection.liquid（如果是分区主题，可能在「Sections」文件夹里的collection-template.liquid）。 - 第二步：在文件的
<head>区域或者末尾的<style>标签里，插入这段代码：
{% if collection.handle == "your-collection-handle" %} <style> @media screen and (min-width: 768px) { .grid__item { width: 50% !important; max-width: 50% !important; } } </style> {% endif %}
- 第三步：把代码里的
your-collection-handle替换成你那个特定集合的handle（就是集合URL最后那串字符，比如集合URL是yourstore.com/collections/summer-sale，handle就是summer-sale），保存代码就生效了。
小提示：
- 不同主题的CSS类名可能有差异，比如有的主题用
product-grid-item代替grid__item，如果上面的代码没生效，按F12打开浏览器开发者工具，查看产品卡片的类名替换掉就行。 - 如果连移动端的列数也要改成2列，直接去掉
@media screen and (min-width: 768px)这一行就行。
内容的提问来源于stack exchange，提问作者megannd
