修改之后效果如下(模板:turbo):
修改步骤:
首先在模板中找到 product-swatch.liquid 或者 swatch.liquid 模板不同包含变体代码的文件不同
下面我列举常用模板修改之后的代码文件,可以直接复制到你的模板中。
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>