Color swatches in the bundle widget

HOW DO I SHOW CUSTOM COLOR SWATCHES?

STEP 1



If you want to show color swatches you will need to name one of the Product Options either Color or Colour. By default, the color swatches use the HTML color spectrum, so if your variant color option is named Blue it will show the HTML color Blue (here is a list of HTML colors).

If your color name does not exist on the list of HTML colors it will default to white, this is where custom color swatches are needed. Or if the color isn't quite accurate you can use custom color swatches


STEP 2



Take a small 50px x 50px screenshot of the product where you can see a good proportion of the color. Save this image using the following setup...

If the color being used is called Light Grey save the image as light-grey.png (all in lowercase with spaces replaced with hyphens "-" )
If the color being used is called White/Black save the image as white-black.png (all in lowercase with slashes / replaced with hyphens "-" )
If the color is one word like Gold save the image as gold.png (all lowercase again)


STEP 3



Once you have saved all your images, go to Content and upload it to File.

Updated on: 26/09/2023