Linking CMS colors to product variant buttons (creating swatches)

I have multiple color variations of my products and I have created a collection with colours that I want to be used as swatches (product variant buttons to have the specific color as background) so people can click on them to choose their product color. Two things need to happen:

1 - be able to tap/click a swatch to select the variant before adding to cart.

And 2 - bring a picture of that colour variation to the main image.

I found a forum post that was what I’m looking for but it seems outdated since I can’t get this process to work based on that information. (*Will Pay for Help* E-commerce - Customizing product color variant)

If anyone could tell me how I’d go about doing this it would be massively appreciated.


P.S This is the design I’m planning on developing in Webflow after I find the way for the variants.

Live site link: SOSA E-STORE

Here is my site Read-Only: Webflow - SOSA E-STORE

1 Like

Solution found!

Step 1: Create a CMS collection with the name Colors and add Color as a custom field. Head over to the same collection, create new colors and choose your desired color codes.

Step 2: Go to your Product Settings and add Reference as a custom field (you can add as many as you like depending on the color variations of your products).

Step 3: You now have custom fields in your products which you can dropdown and choose the desired colors based on the cms collection we created in step 1.

Step 4: Add the bloody code and use “add field” where specified as seen in my read only link (product page settings > head + body

For the people who are scratching their heads over this, feel free to copy what I’ve done from my links and ask questions.

P.S Due to the limited number of references each Webflow site is allowed, I suggest using reference variants with url to an image (only do this if u you have multi-colored variants for example black & gold)


Hi @Andreas_Demou, hope this message find you well.

I’m wondering if you could help me to understand how to set swatches colors for my customer stores.

The different thing in my project is that I need to customize only the colors option, and not the size variant options.

Here a link of my view only project: Webflow -

Ready to pay to get your help if needed or anyone that would read that and could help.


Hey @Andreas_Demou,

This doesn’t seem to be working for me. I unable to access your code, or site Read-Only.

Let me know if you can provide any assistance on this, really scratching my head on this one.


@Andreas_Demou do you still have the read-only version of your site? Hoping to recreate this feature.

Sorry guys for the delayed reply. I hope someone finds this useful.

Updated read only link: Webflow - SOSA