Magento 2 Swatches – Setup and Configuration Tutorial

Unlike Magento 1 where an extension is needed for configurable swatches, in Magento 2, CE and EE edition, configurable swatches come as an out of the box feature and it is not as complicated as setting up swatches in Magento 1.9.1. Below we’ll show you the steps for setting up the Color Swatches in Magento […]

By Ylgen Guxholli

Unlike Magento 1 where an extension is needed for configurable swatches, in Magento 2, CE and EE edition, configurable swatches come as an out of the box feature and it is not as complicated as setting up swatches in Magento 1.9.1.

Below we’ll show you the steps for setting up the Color Swatches in Magento 2 for Configurable Products:

Create an Attribute

If you don’t have an Attribute you want to display the swatches you need to create one and relate it to the Attribute Set.

a) Creating Color Attribute

In the admin go to Store -> Products -> Click on Add New Attribute

Complete the fields required for the new attributes. For the Value required select Visual Search and make the Update Product Preview Image dropdown to Yes (Filtering by this attribute will update the product image on catalog page ).

On Manage Swatch (Values of Your Attribute) section use can select colors you want to have the attribute, as the default we put the black one. Besides the color, you can add your own image, by clicking on the Upload File. Click Clear to revert the changes of the selection.

Complete in the Admin Column the Name for the specific color that will display.


In the Advanced Attribute Properties , complete the Attribute Code without spacing (color as for example), and set the Scope to Global

To use in Layered Navigation go to Storefront Properties , and select Filter (with results) in Use in Layer Navigation section. Select Yes for Use for Promo Rule Conditions and Used in Product Listing.


After done with changes Save the Attribute.

b) Connect the attribute Color with the attribute set.

Go to Stores -> Attribute Set -> Open the Default attribute set (or you can create a new one by clicking New Attribute Set adding a Name of the attribute based on Default ), drag the attribute created color into Product Details on the Default Attribute Set and Click Save .


Create another attribute in the same way, call it size, in Catalog Input Type for Store Owner Select Text Swatch from the dropdown, set Update Product Preview Image to Yes. Complete the Manage Swatch (Values of Your Attribute)



Add Swatches to Configuarable Product

Search for the product (configurable) you want to add color swatches. If u don’t have a configurable product create it: Products -> Catalog, Configurable Product on the dropdown.




Enable the product, select your attribute set, complete the name and the SKU, write the price, fill the taxable field. Select in wich categories you want to show the product.

Visibility set it in Catalog, Search.

Click Create Configurations

Assign Swatch Collors

A pop up will show up that contains the product configurations. First Page contains the attributes you want to add for the product. For this example we choose “Color” and “Size” and then click on -> Next


Assign Attribute Values

Select the Attribute Values. As we selected the attribute codes “color” and “size”, the second page of the Product Configurations shows the values depending on them. We want our product to have three colors: Green , Yellow and White and for the size: XS (Extra small), L (Large), M (Medium). Click ->Next

Assign Images, Price, and Quantity to Swach

This is the coolest part of the Magento 2 Swatches. Three steps in one, choosing the image, the price and the quantity for a specific product or for all of them the same configuration.



If u want that the product should have all three different images for each color:

Select-> Apply unique images by attribute to each SKU and the Attribute -> Color .

It will show up three image fields with a specific color on them. (you can select more than one image for a color ) . The big difference from Magento 1 is that in Magento 2 you don’t need to create many products to add to the default one, but they are generated by default. You only need to browse the images (one or more than one image )

Apply a single set of images to all SKUs, applies only one image to all of the product added.

Skip image uploading at this time, leave the configurable products without image background.


For specifying Price for each product

Click on -> Apply unique images by attribute to each SKU and insert the price for each field:

Apply single price to all SKUs: add only a single price to all of the products (if you put amount: 100, all the products will have the cost of 100$)

For specifying Quantity for each product click on -> Apply unique images by attribute to each SKU and insert the quantity for each field:


After completing all the changes click -> Next

Page 4 of the Configuration shows a summary of the Products that are added after the Configuration of Swatches.

If all the changes went good you can click -> Next, if not click -> Back and edit the fields you want to make updates.


Assign Default Image to Swatch

You can edit the Quantity values Manually after and change the weight, remove the product, or disable the product or choose another product.


For the default image/video of the product -> go to Image And Videos and update depending on how the product should look in frontend with the default image you prefer.

If u dont select anything it will show a Configurable Swatch with non primary image.

Flush Magento 2 Cache

Save the Product.

Flush the Cashe (System -> Cache Management -> Flush Magento Cache ) and see the results in the Frontend . Select the Color and the Size to display the product you want. Test it with other color swatches.


As you can see, setting up Configurable Swatches in Magento 2 is easier than one might think. If you want a help on setup-ing Swatches in Magento 1 we suggest having a look at our blog https://sherocommerce.com/tutorial-configurable-swatches-in-magento/.

For any questions don`t hesitate to comment below or contact us.

Back End Developer