Dawn主题中如何渲染产品元字段内的商品标题、图片等信息？

直接调用{{ product.metafields.custom.styled_with }}只能拿到商品GID数组，无法直接访问商品属性，必须通过Liquid的all_products集合来获取对应商品的完整信息，具体实现步骤如下：

实现代码示例 #

{% if product.metafields.custom.styled_with != blank %}
  <div class="styled-with-products">
    {% for gid in product.metafields.custom.styled_with %}
      {% assign product_id = gid | split: '/' | last %}
      {% assign related_product = all_products[product_id] %}
      
      {% if related_product %}
        <div class="related-product-item">
          <a href="{{ related_product.url }}">
            <img src="{{ related_product.featured_image | img_url: '300x300' }}" alt="{{ related_product.title }}">
            <h3>{{ related_product.title }}</h3>
            <p>{{ related_product.price | money }}</p>
          </a>
        </div>
      {% endif %}
    {% endfor %}
  </div>
{% endif %}

关键说明 #

• 提取商品ID：通过split: '/' | last从GID中拆分出最后一段的商品ID，这是all_products集合识别商品的关键。
• 获取商品对象：用all_products[product_id]拿到完整的商品对象，之后就能直接调用title、featured_image、url等属性。
• 异常处理：加入{% if related_product %}判断，避免因GID无效或商品已删除导致的页面报错。
• 数量限制：all_products集合最多能调用20个商品，如果你的关联商品超过这个数量，需要通过Shopify GraphQL API来批量获取（在Dawn主题中可通过{% graphql %}标签实现）。

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