Note: This tutorial applies to our premium themes. Normally it should work fine but in some themes might need a few adjustments. If so, our team is ready to help.
In case you need to show variant images instead of the default color swatches we need to change some lines of code
Open this file snippets/product-block-options.liquid
Find this code:
<ul class="color-swatches list-unstyled">
{% for value in option.values %}
{% assign swatch_img = value | handleize | prepend: 'swatch-' | append: '.png' %}
<li>
<input
class="visually-hidden"
type="radio"
name="option-{{ option.name | handleize }}"
id="option-{{ option.name | handleize }}-{{ value | handleize }}"
value="{{ value | escape }}"
data-option-position="{{ option.position }}"
{% if option.selected_value == value %}checked{% endif %}>
<label
for="option-{{ option.name | handleize }}-{{ value | handleize }}"
title="{{ value }}"
data-bs-toggle="tooltip">
<img
class="img-fluid"
src="{{ swatch_img | file_img_url: '30x30', crop: 'center' }}"
alt="{{ value }}"
width="30"
height="30"
loading="lazy">
</label>
</li>
{% endfor %}
</ul>
And replace it with:
{% assign reversed_variants = product.variants | reverse %}
<style>
.product-options .color-swatches input + label,
.product-options .color-swatches input + label img {
border-radius: var(--bs-border-radius);
}
</style>
<ul class="color-swatches list-unstyled mt-2">
{% for value in option.values %}
{% liquid
for variant in reversed_variants
if variant.title contains value
assign variant_img = variant.image
endif
endfor
%}
<li>
<input
class="visually-hidden"
type="radio"
name="option-{{ option.name | handleize }}"
id="option-{{ option.name | handleize }}-{{ value | handleize }}"
value="{{ value | escape }}"
data-option-position="{{ option.position }}"
{% if option.selected_value == value %}
checked
{% endif %}
>
<label
for="option-{{ option.name | handleize }}-{{ value | handleize }}"
title="{{ value }}"
data-bs-toggle="tooltip"
>
<img
class="img-fluid"
src="{{ variant_img | image_url: width: 120, height: 120, crop: 'center' }}"
alt="{{ value }}"
width="60"
height="60"
loading="lazy"
>
</label>
</li>
{% endfor %}
</ul>
