Add color swatches to the product page [NO apps]
Ever wished your Shopify free theme could have these beautiful, instant-loading color swatches? While there are apps that achieve this functionality, not only do they come with monthly fees, but they also take a toll on your website's speed by injecting bloated code, thus prejudicing its performance and causing longer loading times.
With our copy/paste code, you'll be able to replace all of your variant pills with actual colors without relying on any third parties. This will ensure your website can make good use of improved UX, with code being loaded as fast as technically possible.
Here is a live demo of the end result.
This live demo also uses our Slider Pro with Vertical Thumbnail, an improved Slider copy/paste code compatible with all Shopify's free themes.
Without further ado, let's dive in.
This tutorial is compatible only with Shopify's official free themes: Dawn, Refresh, Colorblock, Taste, Ride, Studio, Crave, Origin, Spotlight, Publisher, Sense & Craft.
Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.
Creating the section code
- From your Shopify admin, go to Online Store > Themes
- Find the theme you want to edit, click on the 3 dots > Edit Code.
- Find the sections folder and click on “Add a new section”. Name it exactly:
ezfy-color-variants
- Paste the following code inside and save:
Adding the section to the Customize page
- Find the file named theme.liquid
- Press CTRL + F (CMD + F on Mac) to trigger the search box and find:
<body - Paste the following code below the line you found:
{% if template == 'product' %} {% section 'ezfy-color-variants' %} {% endif %}
- Save the file.
Adding colors in the customize page
- Click on “3 dots > customize theme”, on the top left.
- At the top, click on “Products > default products”.
- You should see a new section named EZFY Variant Colors above the header.
How to customize the colors
- Click on the arrow to the left of EZFY Variant Colors > add block > color.
Before proceeding, as you can see, you can choose what type of block you'd like to add:
– color: a HEX color
– image: an image will show up instead of a HEX color. Use this sparingly. The image should be 50 x 50.
– multicolor: two HEX colors that will show up 50%/50% (multicolor)
In this example, let's add a simple HEX color to the “Milky” variant.
- After you've clicked on “Color”, click on the new “Color” block that shows up.
- Add the variant name and its HEX color. Be mindful of uppercase character.
- The changes will not show up immediately – make sure you click on the “save” button to refresh the page.
- That is it! Now all products that have a variant named “Milky”, not only Naomi Bag, will show this color swatch instead.
You can deactivate the color swatch at any point by clicking on EZFY Variant Colors > enable
You may also like
Here are some other tutorials you may be interested in. They work with “Dawn” plus all Shopify's free themes (Craft, Refresh, Colorblock, Taste, Ride, Studio, Crave, Origin, Spotlight, Publisher & Sense):
– Arrows & vertical thumbnails for Dawn's product pages
– Dawn lightbox: responsive images, slider and arrows 
– Improve your website's safety: block right click, image copying and more
Was this article helpful?
