How to use variant images as swatches

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//Responsive
• Flex
• Turbo

• 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.
  
  

• 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.
  
  

• Turbo

  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 {% 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.