How to show colour variants as different products on the collection page

[bridget47]

Hi I'd like the colours for each product to display on the collection pages. I've tried to duplicate a product but this causes chaos with inventory. Any tips?

I've seen some videos that use code but it hasn't worked and we'd like to do this without paying for an expensive app.

Here is our website:

https://smudj.co.za/collections/aw25-collection

[Dotsquares]

Hi @bridget47 Kindly follow the steps below:-

Go to Online Store > Themes > Edit Code
Open the snippet
Inside the product card loop insert the code:-

{% assign colors = '' %}
<ul class="product-colors">
{% for variant in product.variants %}
{% assign color = variant.option1 %}
{% unless colors contains color %}
<li class="color-swatch" style="background-color: {{ color | downcase }};"></li>
{% assign colors = colors | append: color %}
{% endunless %}
{% endfor %}
</ul>

And Add CSS for style --

.color-swatch {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin-right: 5px;
border: 1px solid #ccc;
}

let me know if this works or you need a different approach.

[bridget47]

Gave it a try but it didn't work. not sure if I was clear sorry. Will this mean that someone will be able to see each colour on the collection page? for example this product has three colours and people can see that there are colour options but sometimes a different colour will catch they're eye first when they're scrolling through the collection: https://smudj.co.za/products/sam-cable-knit-sweater-light-grey-marl

[Easify-Jolie]

Hi @bridget47 

If you're looking for a no-code solution, you can try Easify Product Options. It lets you display color swatches on the collection pages without duplicating products or writing any code. The swatch feature is included in the free plan, so you can give it a try without any cost. Here's how it works:

• This is the result:

• This is the app setting: You just need to create color swatches for your products:

Then, go to the General Settings, in the Other pages section, select the Collection Page like this:

I hope this answer helps solve the problem. If you need further assistance, feel free to reach out to Easify anytime! 🤗

[bridget47]

Hi My issue is not displaying colour swatches. I want each colour to display as a separate product. 

[Abel_Lesle]

Like how it does on Amazon for example right ?

[Easify-Jolie]

Hi @bridget47 

Thank you so much for your interest, and apologies if I misunderstood your question.

If you're looking to display each color as a separate product on the collection page, you can use the option URL feature in the app. This allows you to link each swatch color to a different product page—for example, clicking on the red swatch would take customers directly to the red version of the product. This approach does require creating individual products for each color.

If you'd prefer to achieve this without creating separate products, you may need to work with a developer for a custom solution. Thanks again, and please feel free to reach out if you need any assistance!