Table of contents
Long gone the time of choosing a color from a drop-down list and imagine what the skirt will look like with that color, your customers can now experience direct colors swatches for all the items they want.
What is Color Swatches in Magento 2?
In Magento 2, color swatches are selectable color options for your configurable products. Customers can click on the color swatch and see the corresponding product image, thus improving the customer experience. Color swatches can be used on product pages, in product listings, and in layered navigation.
For those who are looking forward to boosting sales, you should definitely have this feature in your store.
Magento allows you to set up not only Color Swatches but also other Configurable Swatches such as size, fabric, texture…You name it, Magento has it!
This tutorial is, however, dedicated to Magento Color Swatches and how to set it up for your store.
How to Setup Magento Color Swatches
Step 1: Configure the Swatches
- On Admin Sidebar, go to Stores > Attributes > Product
Click on the color attribute
Set the following setting:
- Catalog Input Type for Store Owner: Visual Swatch
- Values required: No
- Updated Product Preview Image: Set this to Yes if you want your product image to update corresponding to the chosen color swatch
- Use Product Image for Swatch if Possible: No
And leave Advanced Attribute Properties at default.
From this configuration panel, you can add a new color swatch by clicking on Add Swatch.
Step 2: Choose a color for your swatch
Use a color
Click on the new swatch and select Choose a color from the drop-down menu
In the color picker that follows, pick a color by either entering your desired hexadecimal code or using the color picker
When you’re finished choosing a color for your new color swatch, set your desired name for your swatch under Admin.
Use your own image
Alternatively, you can also upload a file containing the necessary pattern, color, or texture for your configurable products.
- Choose Upload a file in the drop-down box
- Upload a file of your choosing (make sure that the uploaded file is a square image)
- Check if your new color swatch is correct:
- Remember to Save Attribute before leaving the page.
Step 3: Update your products
Update products individually
By updating a product individually, you get much more freedom to configure the prices and images for your new products. And this means being able to customize product images for each of the color swatch, or to apply unique prices to each color attribute.
- Add your recently created color swatch to any of your products, simply navigate go to Catalog > Products and choose the product that you want to individually change.
- And choose Edit configuration
- From here, you can add various changes to the attributes of this product. Select the attributes that you want to enable and then click on Next:
- Select the specific attributes that you want to be enabled for this product and click on Next. Note that each unique combination of attributes creates a unique product SKU
For example, you can:
- Set an unique image for each of your color attribute
By this way, your chosen product will have different preview images corresponding to the selected color attributes. For instance, with the configuration above, we get this product image when selecting the color Black:
- Click on Next when you’re done configuring and you’ll be taken to the Summary page where you’ll be able to review all the changes that you’re going to make
- And finally, choose Generate products to finish configuring this product. Different versions of this product with unique SKUs will be available on your frontend.
Update products by bulk
Updating your products by bulk is a convenient way to add a color swatch to your configurable products. However, you should still note that, compared to updating individually, you have less control over what you can change to your products, and for the best results, it’s best that you should configure each color swatch with a corresponding product image.
- From Admin sidebar, go to Catalog > Products
- Selecting the products that you would like to apply these swatches on, then set Actions control to Update Attributes
- Scroll down to Color, tick on Change, and choose the color swatch that you want to set for this product
- Save when you’re done and don’t forget to clear the cache in Cache Management tab.
With Magento Color Swatches, your products’ appearance will become more appealing and more informative, which will make significant impacts on your sales and later on your customers’ loyalty.
Hope this helps!
Related posts:
How to Setup Magento 2 with Multiple Stores and Domains
