How to use variant images as swatches – Out of the Sandbox

All Out of the Sandbox themes support color swatches.

By default, the theme will match the color name you use in the variant name to a standard color. But if that color name isn't matched with a standard color, the swatch will be left empty.

Typically, to have more control over the exact color (for example, your "red" may not be as bright as the default red shade), you will need to create custom PNG images for each color. If the variant name is not a standard color, you will need to create custom swatches as well for a color to show up.

Follow the instructions in this article to add your own custom color swatches.

However, if you'd like to use variant images for the swatches instead, you can follow the steps below.

Select your theme:

Parallax/Retina/Mobilia/Responsive

You can navigate to the template files by heading into Online Store > Themes , click the Actions button and select Edit Code. In the code, navigate to Snippets > product-swatch.liquid. In this snippet, around line 39 depending on your theme and version, there will be this line:

<label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: 'thumb' }}); background-position: center">

Or some variation of this line, such as

<label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: 'thumb' }}); background-position: center">

<label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}{{ section.id }}{{ block.id }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: 'thumb' }}); background-position: center">

<label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}{{ section.id }}{{ block.id }}" style="background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: '50x' }}); background-color: {{ value | split: ' ' | last | handle }};">

The background-image part of this code will need to be modified. For example:

background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: 'thumb' }});

Can be changed to this:

background-image: url({{ variant.image | img_url: 'small' }});

That snippet can now be saved and your swatches will be using the variant image(s) instead.

Artisan
You can navigate to the template files by heading into Online Store > Themes , click the Actions button and select Edit Code. In the code, navigate to Snippets > product-swatch.liquid. In this snippet, around line 46 depending on your theme and version, there will be this line:
```
for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" style="background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: '50x' | prepend: 'https:' }}); background-color: {{ value | split: ' ' | last | handle }};">
```
The background-image part of this code will need to be modified. For example:
```
background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: '50x' | prepend: 'https:' }});
```
Can be changed to this:
```
background-image: url({{ variant.image | img_url: 'small' }});
```
That snippet can now be saved and your swatches will be using the variant image(s) instead.

Turbo

<label {% if variant.featured_image %}data-image="{{ variant.featured_image | product_img_url: '600x' }}"{% endif %} for="swatch-{{ option_index }}-{{ value | replace: ' ', '-' }}-{{ product.id }}{% if section.id %}-{{ section.id }}{% endif %}" style="background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: '50x' | prepend: 'https:' }}); background-color: {{ value | split: ' ' | last | handle }};">
  <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" aria-label="sold out" alt="sold out"/>
</label>

A specific part of that line will need to be modified. For example:

background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: '50x' | prepend: 'https:' }});

Can be changed to this:

background-image: url({{ variant.image | img_url: 'small' }});

Depending on your theme version, you may need to apply this adjustment to the collection-swatch.liquid file, as well.

That snippet can now be saved and your swatches will be using the variant image(s) instead.

Flex

You can navigate to the template files by heading into Online Store > Themes , click the Actions button and select Edit Code. In the code, navigate to Snippets > product-swatch.liquid. In this snippet, around line 54 depending on your theme and version, there will be this line:
```
for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" style="background-color: {{ value | split: ' ' | last | handle }};">
```
A specific part of that line will need to be modified. For example:
```
background-color: {{ value | split: ' ' | last | handle }};
```
Can be changed to this:
```
background-image: url({{ variant.image | img_url: 'small' }});
```
That snippet can now be saved and your swatches will be using the variant image(s) instead.

Products and Collections

Parallax/Retina/Mobilia/Responsive

Artisan

Turbo

Flex

Related articles