Magento® 2 swatches are used to ensure that clients and potential customers can shop through stores with more ease and efficiency. This is done by allowing customers to select options from different swatches instead of from words in a drop-down list. By providing customers with swatch options, merchants can see an increase in leads and conversions. For more information about how color swatches can improve your product list, keep reading!

What Is the Magento Product Color Swatch?

A Magento color swatch is a feature that allows merchants to provide customers with a better idea of what they’re buying. When products are customizable, users can choose from many options that will help them pick a product that suits their needs.

If, for example, a customer wants to have a t-shirt in the color black, he or she will click on the color black. This will often change the color of the shirt on the featured picture as well. In comparison, other stores provide customers with a drop-down list of features for them to choose. Many of these options don’t provide customers with the visual stimulation of the final image.

Types of Magento 2 Swatches

There is a number of different Magento Swatch types for merchants to use in their stores.

Text-Based Swatches

A text-based swatch is unique because it is implemented when there is no image being used. Here, a symbol for attributes is used to show sizes. When a product in a specific size is out of stock, the box describing that size will be crossed out.

Color Swatch

A color swatch will be essential when you’re trying to showcase the different patterns or colors that are available in your store. This makes your products more accessible for your clients and it makes it easier for clients to imagine their look.

Image Swatch

Using an image swatch allows merchants to provide customers with variations of products. If, for example, you have the same product in different textures, you can upload image swatches.

Layered Navigation Swatches

Layered navigation is another type of Magento Swatch; wherein, a merchant sets a color attribute to yes. Here, a merchant can use text-based and color-based image swatches.

How to Configure Color Swatches in Magento 2

Now that you know a little bit about the different types of Magento Swatches, you may be wondering how you can configure them in your online store.

Create Attribute in Magento 2

If you want to configure color swatches in Magento 2, you must first know how to create an attribute.

Step One. You’ll have to select stores from the admin panel. From here, you can go to the attributes section and choose the option for the product. In this step, you’ll also want to click add a new attribute.

Add New Attribute

Step Two. Go to attribute properties. You’ll have to enter a default label in the same section. Here, you’ll be able to choose the input control you desire; for example visual swatch, text swatch, etc. Click add option from manage options.

Manage Swatches

Step Three. Manage your options and values. Depending on your needs, you can choose the default value.

Managing Values

Step Four. In this step, you’ll be managing your labels. Enter a title for a label.

Label Title

Step Five. Now it’s time to describe your storefront properties. Select yes or no if you want specific attributes to be allowed.

Storefront Properties

For more information about how to create an attribute in Magento 2, you will find out in our How to section.

Assign Attributes to the Products

When you’re going to assign attributes to products, there are a few steps you have to follow first.

  • Go to Stores. Here, you’ll see a section for Attributes. Click on it. Next, select Products. All these can be seen in your sidebar.
  • Now, you should click on Add New Attribute.
  • You’ll have to provide related details like scope and attribute code under Properties.
  • You may want to consider use product image for a swatch if possible, which will allow you to use your product’s pictures for your swatches. You’ll have to enable it if you want this feature because it is usually disabled otherwise.
  • Now you can include Magento 2 swatch patterns. These will be displayed on the product page.
  • To assign an attribute to products, you’ll have to go to Manage Swatch. From here, you can click on Add Swatch.
  • Now, provide a swatch name.
  • Select your color by clicking on the arrow next to the Swatch Image.
  • Go to Advanced AttributeProperties and determine where values should be placed.
  • Include an Attribute Label from the Attribute Page.

Configure Product Options in Magento 2

For those who have a lot of products, you may be wondering how to configure them. To do this, you’ll have to install an extension that allows you to create custom templates. These templates can be applied to a number of products at the same time.

Magento Color Swatch Extension to Create Configurable Product

There are a few extensions that you can install in order to create a configurable product.

Color Swatches Pro by Amasty

This extension provides several features that other extensions may not. With Amasty’s extension, merchants can do the following:

  • Optimize their site to create the perfect mobile experience
  • Allow customers to change the product’s image by hovering over it. This allows them to see another angle of the same product without having to click on the product itself.
  • Show the price of products.
  • Share the URL of a configured item.

According to Amasty’s website, the goal of this extension is to make your store as simple and as accessible as possible.

Color Swatches by FME Extensions

You can expect to pay for this extension; however, most merchants agree that the price is worth it when they see the difference in customer experience. This extension allows you to provide customers with a different image of a product if they select a specific size, color, etc.

Product Color Swatches for Magento 1 by Aheadworks

At its very base, Aheadwork’s extension does everything it has to. It provides you with an easy way to set up your attributes and it allows you to display swatches rather than older, conventional options. With this extension, you can also keep your customers up-to-date because it crosses out features that are out-of-stock. If, for example, you don’t have any mediums left in stock, your customers won’t be able to buy the product in a size medium.

Magento Color Swatch Extension With Zoom by CMSmart

CMSmart has provided you with the perfect extension for your store. Here is a small list of its features:

  • Select attributes by using images
  • Use different statuses for swatches
  • Provide products with more than one attribute

This extension makes it easier for merchants to manage their attributes and their swatches. Overall, you can use Magento extensions to ensure that you can make the best out of your swatches and to ensure that your business is up-to-date with the newest advancements in marketing.


Keeping up-to-date is essential for any merchant to run a successful store. If you’re looking for some of the best tools to keep your customers happy, you’ve likely run into swatches. With these, you can use text-based swatches, color swatches, image swatches, and layered navigation. Depending on your individual needs, any of these options are feasible and any of them will help to increase your sales. For more information about how swatches can change the look of your navigation, feel free to contact us!
5.00 / 5.0
Article rating (11 Reviews)
Do you find this article useful? Please, let us know your opinion and rate the post!
Not badGoodVery GoodGreatAwesome