How to Display Shopify Variant Images as Swatches (Code & Apps)

Transforming text-only dropdowns into image swatches is a simple way to boost Shopify conversions. By displaying Shopify variant images as swatches, shoppers can instantly compare colors, patterns, and styles without opening each option. This guide covers both the manual Liquid method and a no-code approach to help you set up image swatches and create a cleaner product page.

Why use variant images as swatches?

By default, Shopify relies on basic dropdown lists or plain text buttons for product options. This forces visitors to click through every option blind, slowing down purchasing decisions.

Replacing default selectors with variant image swatches delivers distinct UX benefits:

• Accelerated decision making: Visual previews let customers scan available finishes, patterns, or colors in seconds.
• Higher conversion rates: Reducing friction on product detail pages (PDPs) directly boosts add-to-cart rates.
• Lower return rates: Displaying accurate, high-resolution thumbnails for specific variants sets realistic expectations and reduces returns due to color mismatch.
• Sleeker brand aesthetic: Custom swatches make your store look polished, modern, and high-end.

Method 1: Display variant images as swatches via code (No App Required)

If you want to avoid monthly app fees and keep your site fast, modifying your theme’s Liquid code is the ideal solution. Important: Always duplicate your live theme (Online Store > Themes > Actions > Duplicate) before editing theme code to create a safe backup.

For vintage themes (Parallax, Retina, Responsive, Turbo)

Vintage themes typically process swatches through a dedicated snippet named product-swatch.liquid.

1. Go to Online Store > Themes > Actions > Edit Code.
2. Open Snippets and click product-swatch.liquid.
3. Locate the line of code controlling the background image of the swatch label (typically around line 35–45). Look for a tag structured like this:

<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">

1. Replace the static asset URL logic (url({{ value | handle | append: ... }})) with dynamic variant image rendering:

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

1. Click Save.

For modern online store 2.0 themes (Dawn, Horizon, Sense, Spotlight)

1. Go to Edit Code and locate Snippets > product-variant-options.liquid or Blocks > buy-buttons.liquid.
2. Locate the loop where option values render as input labels:

{% for value in option.values %}
  <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
    {{ value }}
  </label>
{% endfor %}

1. Update the loop to reference the matching variant's featured image:

{% for value in option.values %}
  {% assign variant_for_value = product.variants | where: option.name, value | first %}
  <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
         style="background-image: url('{{ variant_for_value.featured_image | image_url: width: 100 }}'); background-size: cover; background-position: center;">
    <span class="visually-hidden">{{ value }}</span>
  </label>
{% endfor %}

1. Add matching CSS to assets/base.css or assets/theme.css to style the labels as clean, circular thumbnail buttons:

CSS
.product-form__input input[type='radio'] + label {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ccc;
  display: inline-block;
  text-indent: -9999px;
  cursor: pointer;
}

.product-form__input input[type='radio']:checked + label {
  border: 2px solid #000;
}

Method 2: Use a Shopify app (No Code required)

If your theme structure makes custom liquid edits difficult, or if you need advanced styling, Shopify apps allow you to set up image swatches without editing code.

Popular app options

Steps to set up image swatches via app

1. Install the App: Search for your preferred app in the Shopify App Store and click Add App.
2. Assign Images: Ensure every variant in Shopify Admin > Products has a primary image assigned to it.
3. Configure the Swatch Picker: Navigate to the app dashboard, select Swatch Settings, and choose your target option name (e.g., Color, Pattern, or Style).
4. Customize Styles: Adjust shapes (circular, square, rounded), border colors, active hover states, and sold-out behavior.
5. Enable App Embed: Go to Online Store > Themes > Customize, open App Embeds on the left menu, toggle your swatch app to On, and save.

Learn more

How to Add Custom CSS to Your Shopify Theme