如何在Shopify商品页添加自定义文本框并在购物车中显示其内容

1. 在商品页添加自定义文本框 #

找到你的商品模板文件（通常是product.liquid或sections/product-template.liquid），在加入购物车按钮附近插入以下代码：

<p class="line-item-property__field">
  <label for="custom-field">自定义备注</label>
  <input id="custom-field" type="text" name="properties[自定义备注]">
</p>

• name="properties[自定义备注]"是核心：Shopify会通过这个属性名把用户输入的内容绑定到对应商品项上，后续购物车和结账页才能读取到。
• 可以修改label的文字和input的id来匹配你的需求，比如改成“刻字内容”“特殊要求”等。

2. 在购物车页显示自定义内容 #

打开购物车模板文件（cart.liquid或sections/cart-template.liquid），找到遍历购物车商品项的代码块，在商品信息区域插入以下代码：

{% for property in item.properties %}
  {% unless property.last == blank %}
    <div class="cart-item-property">
      <span>{{ property.first }}:</span>
      <span>{{ property.last }}</span>
    </div>
  {% endunless %}
{% endfor %}

这段代码会遍历当前商品的所有自定义属性，自动显示我们添加的文本框内容，同时过滤掉空值。

3. 结账页自动同步 #

不需要额外开发：Shopify会自动将商品的自定义属性同步到结账流程中，在结账页的订单预览、订单确认页以及后台订单详情里，都会显示用户输入的自定义内容。

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