product

product 模板用来渲染产品页面，页面里包含了产品的媒体和内容，还有一个表单，供顾客选择不同的 variant （变体/SKU）并添加到购物车。

可以参考 Dawn 主题里的 product 模板和它的主 section 来了解具体实现。

product 模板 - 图1

位置

product 模板位于主题的 templates 目录下：

└── theme
    ├── layout
    ├── templates
    |   ...
    |   ├── product.json
    |     ...
    ...

在你的 product 模板或模板内部的某个 section 中，应该包含以下内容：

另外，你也可以选择在产品页面上展示产品推荐。

如果你用的是 JSON 模板，那么任何 HTML 或 Liquid 代码都需要放到模板引用的 section 里。

你可以使用 Liquid 的 product 对象来展示产品详情。

product 表单是顾客把产品 variant 添加到购物车的主要方式。你可以使用 Liquid 的 form 标签和 'product' 参数来包含这个表单：

{% form 'product' %}
  <!-- 表单内容 -->
  <input type="submit" value="Add to cart">
{% endform %}

如果你需要给表单加一些自定义属性，比如 class 或 ID，可以参考修改表单默认属性的方法。

表单里面需要包含以下内容：

variant 选择器一般是一个或多个选项输入框，让顾客能具体选择要购买哪个产品 variant。可以参考产品 variant 相关章节来了解示例实现。

应该在表单中加一个数量输入框，让顾客选择要添加到购物车的数量。这个输入框需要有 name="quantity" 属性，而且值必须是大于 1 的整数：

<input type="text" name="quantity" min="1" value="1">

建议添加加速结账按钮，让顾客可以更快购买正在浏览的产品。可以通过 payment_button 这个 Liquid HTML 过滤器来添加：

{% form 'product' %}
  <!-- 表单内容 -->
  <input type="submit" value="Add to cart">
  {{ form | payment_button }}
{% endform %}

如果想了解怎么给这些按钮做样式和自定义，参考加速结账按钮参考文档。

你可以让顾客在添加 variant 到购物车时，额外提供一些信息，通过 line item 属性实现。比如，你可以让顾客输入刻字内容，或者上传一个文件。

这些属性是通过带有 name="properties[property-name]" 的输入元素来收集的，其中 property-name 是你定义的属性名。这些输入元素需要放在 product 表单里：

{% form 'product' %}
  <!-- 表单内容 -->
  <input type="text" name="properties[Monogram]">
  <input type="submit" value="Add to cart">
{% endform %}

如果想了解怎么在购物车中展示收集到的 line item 属性，可以参考购物车模板里的 line item 属性展示。

在使用 product 模板的时候，建议了解以下内容：

如果你用的是 JSON 模板，那么任何 HTML 或 Liquid 代码都需要放到模板引用的 section 中。

你可以使用 Cart API，它属于 AJAX API，允许顾客在不跳转到购物车页面的情况下，把 variant 添加到购物车。

你可以使用 Product Recommendations API，它也是 AJAX API 的一部分，用来向顾客推荐相关产品。想了解怎么使用这个 API，可以参考产品推荐文档。