2 Easy Steps to Add Color Swatch in Magento 2

The more realistic, the more sales you can get. If you are selling products which have different colors or styles you couldn’t miss the Color Swatch function in Magento 2. It is a great function that enables you to display all available colors of your product. It makes your product more visual and appealing and gives the shoppers an ease to choose the right product.

Types of Swatches for a Product

+ Text Swatch: This functionality is applied for displaying sizes or other kinds of text-based options. A text swatch can be helpful for a shop that is selling electronics or other types of products with text options.

When text-based swatches are used to show the available sizes, any size that is out of stock is crossed out.


+ Color Swatch: This function allows you to display available color options on the right side the product image. It is simpler for a shopper to choose the best product when items are shown in available colors.

+  Image Swatch: The image swatch feature allows you to give your customers the ability to check the original product details. In addition, swatches are displayed not only on a product page but also on category pages.

(For Magento 1, you can read our blog about Create Color Swatches for Configurable Product)

In this tutorial, we will present you how to Add a Color Swatch for a product in Magento 2:

Step 1: Create the Swatches

Firstly, go to the Admin Panel, expand the Stores tab ⇒ Attributes Product.


Then, find and click the Color attribute option.

From the Properties tab, you can configure all the available swatch settings:

+  Catalog Input Type for Store Owner: Allows you to define the input type. You select Visual Watch from the drop-down menu, hen you can add the colors you need and fill in text descriptions. Besides, you can replace colors with images.

+  Update Product Preview Image: Filtering by this attribute will update the product image on catalog page.


Next, move to the Manage Swatch section. There are 2 ways to add swatch available on the Swatch menu. You can use one of them to create the swatches:

+ Method 1: Add a Color Swatch

+ Method 2: Upload a Swatch Image


Method 1: Add a Color Swatch

You might select Choose a color on the swatch menu.

You can enter the value of the new color or choose any color you want by using color picker. Then click on the Color Wheel button in the lower-right corner to save the swatch.


In the Admin and Default Store View, you might Enter the label for the color.

When it's done, hit the Save Attribute button and flush Magento cache.

Method 2: Upload a Swatch Image

Firstly, you should collect the swatch image that is correct for your product.

You might select Upload a file on the Swatch menu.


From your computer, you might choose the desired image. For other swatch images, you might repeat these steps.

In the Admin and Default Store View, you might Enter the label for the color.

When it's done, hit the Save Attribute button and flush Magento Cache.

Step 2: Update your Product

You need to attach a newly created or modified attribute to specific products.

Navigate to Admin sidebar ⇒ ProductsInventory ⇒ Catalog.


Filter the list by SKU to include only the applicable products.


Select the Update Attributes option from the Actions drop-down.

Look down to the Color attribute, and mark the Change checkbox.

Finally, to apply an attribute, hit the Save Product button. Then remember to flush the cache in the Cache Management tab.

Configurable Product Grid Table View for Magento 2

For further information, you can add color swatch for a configurable product in a grid table when appling our extension “Configurable Product Grid Table View for Magento 2”. This table allows your customers to see all size, quantity, price, and of course the color of the children products instead of choosing from different drop-down boxes. This extension will provide your customers with a better experience when shopping in your store. Wholesale customers will find it’s simpler to pick up suitable product than Default view, and then they will quickly lead to the decision of buying your products.


As you can see, the first attribute in the grid table can be clickable and also integrated with color swatch function which definitely brings more visual overview of products for your customers. Let's contact BSS Commerce now so we can help you to know more about the product and purchase it. In addition, check this Magento Tutorial blog to discover helpful knowledge about create color swatch for configurable products in Magento 1.

Magento 2 Configurable Product extensions Magento 2 Configurable Product extensions

In case you have any further question regarding this blog, Website Development or our extension store on Magento 1 and Magento 2, please feel free to contact us. Our support team is always willing to aid you with the best service of FREE installation, FREE update, FREE 1-year support and 30-day money back guarantee.

Leave a Reply