商品子款式
商品最多可以拆分为三个选项，这些选项的单一组合即为一个 variant。例如，如果一件 T 恤有 S、M、L 三种尺码以及 Black、White、Red 三种颜色，那么 S/Black 就是该商品的一个 variant。
本教程将介绍如何在您的 theme 中支持商品 variants。
资源
要支持商品 variants，您需要使用以下资源：
实现商品 variants
要在 theme 中支持 variants，您需要实现以下组件：
Variant 深度链接处理
Variant 深度链接是包含 ?variant=[variant-id] 查询参数的商品链接，其中 [variant-id] 是关联 variant 的 ID。这样您可以直接链接到特定 variant。
您可以通过 product object 的 selected_or_first_available_variant 属性访问已选中、首个可用或第一个 variant。当 variant 通过深度链接访问时，selected_or_first_available_variant 属性将返回深度链接对应的 variant。
确定要显示的 variant 后，需要确保以下商品元素能反映该 variant：
- 商品价格
- Variant 选择器
示例
以下示例使用 product.selected_or_first_available_variant 分配默认 variant，基于该 variant 填充基本的媒体和价格显示，并在基本的 variant 选择器中选中该 variant。
{% assign current_variant = product.selected_or_first_available_variant %}
<!-- 商品价格 -->
<div class="product-detail-price">
<span>{{ current_variant.price | money }}</span>
{% if current_variant.compare_at_price > current_variant.price %}
<span><s>{{ current_variant.compare_at_price | money }}</s></span>
{% endif %}
</div>
<!-- Variant 选择器 -->
<select name="product-variant">
{% for variant in product.variants %}
<option value="{{ variant.id }}" {% if variant == current_variant %}selected{% endif %}>
{{ variant.title }} - {{ variant.price | money }}
</option>
{% endfor %}
</select>
Variant 选择器
您可以使用单个 variant 选择器，其中每个选项代表一个 variant。但由于商品最多可有三个选项，您可能希望在 UI 中分别展示每个选项。为此，您可以将上一节描述的单个 variant 选择器设为隐藏的主选择器，并为每个选项单独添加一个选择器，然后使用 JavaScript 在某个选项选择器发生变化时更新主选择器。
📘 注意
无论使用何种 variant 选择方式，都需要确保在选择新 variant 时更新商品价格以反映该 variant。
您可以用 JavaScript 构建自己的 variant 选择功能。