Shopify集合页无法获取商品变体元字段？求技术解答

核心原因 #

Shopify 为优化页面加载性能，不同模板页面返回的 product/products 对象默认包含的字段是按需裁剪的：

• 商品详情页的 product 对象需要展示完整商品信息，默认会包含变体的元字段数据。
• 集合页的 products 对象仅返回商品列表基础信息，默认不会加载变体的元字段，这就是调用 products[0].variants[0].metafields 返回 undefined 的原因。

解决方法 #

在集合页的 Liquid 代码中，显式指定要加载变体的元字段数据，使用 include 参数扩展 products 对象的返回字段：

方法1：加载所有变体元字段 #

{% assign products_with_meta = collection.products | include: 'variants.metafields' %}
const products = {{ products_with_meta | json }};

方法2：仅加载指定命名空间的元字段（更高效） #

如果只需要 custom 命名空间的元字段，可以精准指定：

{% assign products_with_meta = collection.products | include: 'variants.metafields.custom' %}
const products = {{ products_with_meta | json }};

修改后，前端就能正常访问 products[0].variants[0].metafields.custom 获取目标元字段。

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