2 Easy Steps to Add Color Swatch in Magento 2

2 Easy Steps to Add Color Swatch in Magento 2

2 Easy Steps to Add Color Swatch in Magento 2

Before knowing about Magento 2 configurable swatches feature, you might get too familiar with the color swatch concept. Simply speaking, a swatch is a range of color samples for users to compare and choose the preferred easily.


With this usage in mind, Magento 2 color swatch is to help online shoppers to select among all of the available colors without page reloads, each of which presents for a specific child product of the configurable.


Not only does this functionality make your product more visual but it also gives the shoppers ease to choose their favorite items. The higher conversion rate is usually along with better sales.


Today, we discuss types of default swatches with the focus on how to configure color swatch. In this article, we also reveal the best solution to enhance Magento 2 swatch features for even more fascinating and effective. Let’s begin!

3 Types of Magento 2 Swatch by Default

Used for configurable products, the swatch can be applied on the product list pages, product pages, as well as in the layered navigation to outline the currently chosen option. Below are default swatch types

  • Magento 2 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 different 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.

Magento 2 color swatches

  • Magento 2 Color Swatch: allows you to display available color options on the right side of the product image. It is simpler for a shopper to choose the best product when items are shown in available colors.
  • Magento 2 Image Swatch: The image swatch feature allows you to give your customers the ability to check the original product details. Also, swatches are displayed not only on a product page but also on category pages.

Bonus: If you also run Magento 1 website, you also need to know How to create Magento Color Swatches for Configurable Product.


Get back to our main topic today, we will walk you through how to Add Magento 2 Color Swatch in two steps.

Step 1: Create the Magento 2 Color Swatches

You just realized that the default color swatches do not fit with your products. Here in the example, your product is purple while the swatch is pinkish.

Magento 2 configurable swatch
Change Magento 2 color swatch for the better experience
Magento 2 color swatch
Create Magento 2 color swatches

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


In Catalog Input Type for Store Owner: Define the Magento 2 color swatches input type by selecting Visual Watch from the drop-down menu; then you can add the colors you need and fill in text descriptions. Besides, you can replace colors with images.


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

Magento 2 color swatches
Set up Magento 2 color swatch properties

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

Magento 2 color swatches
Two ways to add Magento 2 color swatch values

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 a color picker. Then click on the Color Wheel button in the lower-right corner to save the swatch.

Magento 2 color swatch
Pick color from Magento 2 color swatches picker

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


The positions of swatches can be changed by simply dragging.


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.

Magento 2 color swatch
Upload a file of Magento 2 color swatch image

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

Navigate to Admin sidebar ⇒ Products ⇒ Inventory ⇒ Catalog.


You need to attach a newly created or modified attribute to specific products. To do this task, please filter the list by Name or SKU. For example, we filter Olivia 1/4 Zip Light. Tick on the children’s products that need updating the color swatch.

Magento 2 color swatch
Filter specific product to apply Magento 2 color swatch change

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


Look down to the Color attribute, and mark the Change checkbox. Then, choose the newly added color swatch.

Magento 2 color swatches
Update color attributes

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

Magento 2 color swatches
Magento 2 configurable swatch is changed in the frontend

Here we present a tutorial video to help you track step by step of “How to add Magento 2 color swatches.”

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 applying 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’s 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 a suitable product than Default view, and then they will quickly lead to the decision of buying your products.

Magento 2 configurable Grid Table View extension

As you can see, the first attribute in the grid table can be clickable and also integrated with color swatch function which brings a more visual overview of products for your customers. In case you have any further questions 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.

Magento 2 configurable Product extensions

eCommerce Marketer at | Posts

I'm Greene from BSS Commerce. I love researching and sharing you with useful information about Magento, Ecommerce, and Marketing, etc. Hope you enjoy!

Write A Comment