Magento Tutorials

How to Setup Color Swatches in Magento 2

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.

Color swatches in Magento 2

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
magento colors swatches

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

Choose a color Magento 2

In the color picker that follows, pick a color by either entering your desired hexadecimal code or using the color picker

Magento 2 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 to create a new color swatch magento 2
  • Upload a file of your choosing (make sure that the uploaded file is a square image)
  • Check if your new color swatch is correct:
New Test color swatch
Our uploaded color swatch has a SimiCart pattern
  • 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
Edit configuration magento 2
  • 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:
Edit attributes per product Magento 2
  • 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
Create product configurations

For example, you can:

  • Set an unique image for each of your color attribute
Set an unique image for each of your color attribute
Set an image for each 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:

Preview image for custom color swatch magento 2
  • 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
Catalog Products Magento 2
  • 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
new Test color swatch magento 2
Test is the color swatch we previous created
  • 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


A knowledge craver who always strive to be wiser everyday.

Notify of

Inline Feedbacks
View all comments