In this video from our sister company, we will show you one of the simplest methods for how to create colour swatches in Magento 2.

Colour swatches

Colour swatches in Magento 2 is surprisingly straightforward to set up, more so than it was in Magento 1. When you set up colour swatches you will be able to let your customers select what colour they want an item in, or any other variation, and when they select that option it can update the price and/or image automatically. For example if you want to sell a t-shirt that is available in 2 colours, using Magento 2 colour swatches you can provide a visual colour option on the product page that when selected will change the product image.

14 steps for setting up colour swatches in Magento 2

1. Go to Stores -> Attributes -> Product
2. Edit the Colour Attribute
3. Edit the dropdown for Catalog Input Type for Store Owner to Visual Swatch
4. Click Add Swatch at the bottom and set either a colour hex code or upload an image for each colour option.
5. Save the attribute
6. Go to Products -> Catalog and click Add Product
7. Fill out the initial product details
8. In the Configurations section click Create Configurations
9. On Step 1, select the colour attribute
10. On Step 2, select all the colours that are applicable to this product
11. On Step 3, choose whichever option is right for you. For example, select Apply unique images by attribute to each SKU to upload a unique image for each colour option. This will then switch the image when you select the colour while viewing the product.
12. Make sure each configuration has a qty value set
13. Review your configuration on step 4 and if your happy click Next.
14. Thats it! You might want to upload a default product image but you can go ahead and click save and you should now be able to view your product on the frontend with colour swatches.

We hope you found our Magento 2 tutorial useful

Hopefully this video has helped you and you will now be able to set up colour swatches in seconds. If you need a more complex solution or technical support, please feel free to contact us and we’ll be glad to help. 

Image credit: pixabay.com

eCommerce Agency

A selection of our older posts, written by various members of the team between 2015 to 2021.