Add Color Swatches to Shopify Collections and Cards (No Apps)
Want to add color swatches to your Shopify collection pages and product cards—without installing any apps? You're in the right place. While many Shopify apps promise this feature, they often inject third-party scripts, connect to external servers, and slow down your store's performance. On top of that, they come with monthly subscription fees and bloated code that clutters your theme.
In this step-by-step tutorial, you’ll learn how to create a lightweight, app-free color swatch feature that works right inside your Shopify theme. When a customer clicks on a swatch, the product image updates instantly in real time, just like the big brands do. It’s fast, clean, fully customizable, and best of all—the code is 100% yours to keep.
Before starting: 👉 Click here to download the code 👀 Click here to view a live demo
This tutorial is compatible only with Shopify's official free themes: Colorblock, Craft, Crave, Dawn, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste & Trade.
Looking to install this on a premium or custom theme? Contact us.
Installation:
- From your Shopify admin, go to Online Store > Themes > Edit Code.
- Open the Snippets folder and click Add a new snippet. Name it:
ezfy-collection-color-swatch.liquid
Then click on done.
- Inside the folder you downloaded, look for the ezfy-collection-color-swatch.txt file. Copy all the content inside it and paste it in the file you just created and save.
Step 2: adding the code to all collection products
- Search for the file card-collection.liquid and open it. It will be inside the snippets folder.
- Press CTRL + F to trigger the search box. On the top line, "Find", add this:
</h3>
On the bottom one, "replace", add this code:
</h3> {% render 'ezfy-collection-color-swatch', product:card_product %}
And then click on "Replace All".
- After clicking on the "Replace All" button, click on "Save".
- Now, open the file card-product.liquid
- Repeat the same process:
Press CTRL + F to trigger the search box. On the top line, "Find", add this:
</h3>On the bottom one, "replace", add this code:
</h3> {% render 'ezfy-collection-color-swatch', product:card_product %}
And then click on "Replace All" and then, once again, on the save button.
Final step: changing the colors HEX code
Shopify already has metafields wired up with all variants colors, so it's pretty easy to update and change colors.
Say you have the color "Blue", and you want it to be a different HEX code. How would you do it? Simple:
- From your Shopify admin, navigate to Settings > Custom Data
- Scroll down and find Metaobject definitions
- Click on Color
- In this new page, click View Entries
- Now, find the color that you want to update and click on it.
- Pick the new color and then save.
Conclusion
Enhancing your Shopify store's user experience doesn’t have to be complicated — and with this simple snippet, it isn’t. By adding dynamic color swatches directly to your collection pages, you make browsing faster, easier, and more visually engaging for your customers. No more unnecessary clicks or page loads — just a smooth, intuitive shopping experience that can boost engagement and, ultimately, conversions. Whether you’re just starting out or optimizing a well-established store, this quick addition can make a big difference. Install it in minutes, impress your visitors instantly.