How To Use Variant Images As Swatches in Shopify? (Without App)
Choosing Your Theme:
For this tutorial, we’re using the Fresh Dawn theme version 12.0.0, but fear not! Whether you prefer Fresh Sense or Spotlight Craft, the code base remains consistent, making this customization accessible to a variety of Shopify users.
Installing the Theme:
Navigate to your Shopify admin panel and head to the Online Store section. Here, we’ll install the Fresh Dawn theme (or your theme of choice). In our video tutorial, we showcase the installation of Fresh Dawn version 12.0.0.
The Code Magic:
Before you proceed, duplicate your theme and create a backup to avoid any hiccups during the process.
Goto product-variant-options.liquid Search following code:
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value -}}
<span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
</label>Replace with This Code:
{% if product.variants[forloop.index0].image != blank and option.name == 'Color' %}
<label
for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
style="background-image: url({{ product.variants[forloop.index0].image | img_url: '' }});height:40px;width:40px;background-size: cover;"
></label>
{% else %}
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value -}}
<span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
</label>
{% endif %}Access the code editor by going to Themes > Edit Code. Using the search bar, find “variant” and open the “product-variant-options.liquid” file. Replace the specified lines (around lines 62-65) with the code provided in the blog post.
Customization Tips:
Here’s where the fun begins! Want to adjust the size of those color swatch circles? Fear not—it’s a breeze. Dive into the provided code and tweak the width and height in the inline CSS section to match your theme preferences. It’s like having a tailor-made suit for your online store.
Final Touches:
Save your changes, but before you hit refresh, exercise a bit of patience. Wait for a minute or two, allowing the changes to take effect. Afterward, refresh your product page, and behold—your color swatches are now dynamic variant images, adding an extra layer of charm to your product listings.
