Shopify变体标题设置：如何在swatches选项前添加尺码、颜色类标题

实现方法 #

直接在变体选项遍历循环内、下拉框渲染前输出 option 对象自带的 name 属性即可，该属性对应你在Shopify后台设置的变体选项名称（如颜色、尺码）。

修改后的完整代码 #

{% for option in product.options_with_values %}
  <!-- 新增变体选项标题，可自行调整标签和样式类 -->
  <label class="variant-option-title">{{ option.name }}</label>
  <select class="option-selector {{ option.name }}" data-var="{{ forloop.index }}">
    {% if product.available %}
      {% for values in option.values %}
        <option value="{{ values }}">{{ values }}</option>
      {% endfor %}
    {% endif %}
  </select>
{% endfor %}

补充说明 #

• 用 <label> 标签包裹标题语义更友好，点击标题可直接激活对应下拉框
• 可自行给 .variant-option-title 添加自定义样式，调整边距、字体大小、颜色等展示效果
• 若需要在标题后添加冒号等后缀，直接修改为 {{ option.name }}: 即可
• 如果你的主题用的是点击色板/swatches切换的交互，把标题输出逻辑放到swatches渲染代码前即可，调用的属性依然是 {{ option.name }}

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