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.
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)
