如何将shopify产品变体色块用变体图片替代

修改之后效果如下(模板：turbo)：

修改步骤：

1. 首先在模板中找到 product-swatch.liquid   或者 swatch.liquid  模板不同包含变体代码的文件不同

2. 下面我列举常用模板修改之后的代码文件，可以直接复制到你的模板中。

Turbo

文件名：product-swatch.liquid

{% comment %}  Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.{% endcomment %}{% capture option_index %}option{{ option.position }}{% endcapture %}{% assign file_extension = 'png' %} {% assign swatch = product-swatch %}{% assign found_option = false %}{% assign is_color = false %}{% assign option_index = 0 %} {% for option in product.options %}  {% if option == swatch %}    {% assign found_option = true %}    {% assign option_index = forloop.index0 %}    {% assign downcased_option = swatch | downcase %}    {% if downcased_option contains 'color' or downcased_option contains 'colour' %}      {% assign is_color = true %}    {% endif %}  {% endif %}{% endfor %} <div class="swatch clearfix" data-option-index="{{ option_index }}">  <div class="option_title">{{ swatch }}</div>  {% assign values = '' %}  {% for variant in product.variants %}  {% assign value = variant.options[option_index] %}  {% assign variant_image = variant.image | default: product.featured_image %}  {%- assign image_url = variant_image | img_url: 'x50' -%}    {% unless values contains value %}      {% assign values = values | join: ',' %}      {% assign values = values | append: ',' | append: value %}      {% assign values = values | split: ',' %}      <input id="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} />      <div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }}-swatch {% if variant.available %}available{% else %}soldout{% endif %}">        {% if is_color %}          <div class="tooltip">{{ value }}</div>        {% endif %}        {% if is_color %}          <label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" style="background-image: url({{ image_url }}); background-color: {{  }};">            <span class="crossed-out"></span>          </label>        {% else %}          <label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}">            {{ value }}            <span class="crossed-out"></span>          </label>        {% endif %}      </div>    {% endunless %}  {% endfor %}</div>