如何在Shopify Liquid中为产品添加元字段（非变体香味加入购物车）

架构老林

2026-8-2

在Shopify Liquid中实现香味元字段随产品加入购物车

要让用户选择的香味随产品一同加入购物车，你需要将渲染的香味文本改成可交互的表单控件，并利用Shopify的**购物车属性（Properties）**机制传递选中的值，具体步骤如下：

1. 修改元字段渲染代码为可选择控件

把现有仅渲染文本的代码替换为单选按钮（适用于单选香味场景），确保选中的值能被提交到购物车：

{% if product.metafields.custom.scents != blank %}
  <div class="product_scents">
    <p>选择香味:</p>
    {% for scent in product.metafields.custom.scents.value %}
        <label class="scent-option">
            <input type="radio" name="properties[香味]" value="{{ scent }}" required>
            {{ scent }}
        </label>
    {% endfor %}
  </div>      
{% endif %}

name="properties[香味]"：Shopify会自动识别该命名格式，将选中的香味值绑定到对应购物车项。
required：强制用户必须选择香味才能加购，可按需移除。
若支持多选香味，将type="radio"改为type="checkbox"，并把name改为properties[香味][]，提交后会保存香味数组。

2. 在购物车页面展示选中的香味

在购物车模板（cart.liquid）中添加代码，显示用户选择的香味信息：

{% for item in cart.items %}
  <div class="cart-item-details">
    <h3>{{ item.product.title }}</h3>
    {% if item.properties['香味'] %}
      <p>所选香味: {{ item.properties['香味'] }}</p>
    {% endif %}
  </div>
{% endfor %}