如何在Shopify集合页展示Ritual主题的产品变体

核心问题分析 #

你当前的代码已经完成了变体循环，但调用_product-card模板时没有传递当前变体对象，导致模板仍使用产品的默认变体，引发错误或不符合预期的显示；另外代码末尾多余的点也会触发Liquid语法错误。

步骤1：修正main-collection.liquid的变体传递逻辑 #

修改content_for调用行，传递当前循环的变体给卡片模板，同时移除多余的点：

{% # theme-check-disable %}
{% content_for 'block', type: '_product-card', id: 'product-card', closest.product: product, closest.variant: variant %}
{% # theme-check-enable %}

你添加的product-grid__item--variant{{ forloop.index0 }}类名没问题，可用于给变体卡片添加自定义样式，无需调整。

步骤2：修改_product-card.liquid模板适配变体 #

找到snippets文件夹下的_product-card.liquid，调整变体获取逻辑，优先使用传入的变体：

1. 找到模板中获取当前变体的代码（通常写法如下）：

{% assign current_variant = product.selected_or_first_available_variant %}

2. 修改为：

{% assign current_variant = closest.variant | default: product.selected_or_first_available_variant %}

3. 确保模板中所有依赖变体的信息都使用current_variant，比如：
   • 价格：{{ current_variant.price | money }}
   • 库存状态：{% if current_variant.available %}有货{% else %}缺货{% endif %}
   • 变体属性：{{ current_variant.options | join: ' | ' }}（可选，用于显示颜色/尺寸等变体选项）

额外注意：分页逻辑调整 #

原分页是按产品数量计算的，现在每个产品会生成多个变体卡片，导致每页实际显示的卡片数远超设置值。如果需要保持每页固定卡片数量，可以：

• 降低products_per_page的数值（比如原设置24，若每个产品平均2个变体，可改为12）
• 或通过JavaScript实现前端分页，先加载所有变体卡片再进行分页控制（适合变体数量不多的场景）

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