How to Create Color Swatches in Magento: From A to Z

Magento websites are equipped with a built-in functionality named Magento Color Swatch. This feature enables store owners to gather all the same product’s colors, materials, or textures on a product detail page without navigating through the website dozens of times. You should read this article if you are about to learn how to create a Magento color swatch. 

Alright, let’s get it kicked off.

What are Magento 2 Color Swatches? 

Magento 2 Color Swatch configurable products are selectable color options that are particularly used for configurable products. Simply put, using this functionality, you can display multiple product variants in different colors. Customers can only see the corresponding product image with a single click on any color swatch. 

In addition, Magento 2 Color Swatches can be used in many places on a site, such as product pages, category pages, search pages, and layered navigation. 

Many people have misunderstood that Magento 2 Color Swatch is applied to colors only. In fact, eCommerce merchants also utilize this functionality for other configurable swatches like fabric or texture. 

Build a comprehensive catalog for your eCommerce store: Magento 2 Simple Product with Custom Options vs. Magento 2 Configurable Product How to Configure Magento 2 Custom Options in Detail Magento Grouped Product vs Bundle Product: Key Differences

Benefits of Using Magento 2 Color Swatch

As mentioned above, Magento 2 Color Swatch is a solution that makes it much easier for customers to select their favorite among available colors on the same product page. They now don’t have to spend much time wandering around the website, going back and forth between the catalog and product pages, or reloading the web pages thousands of times. Using Magento Color Swatches helps increase customer experience, resulting in a high conversion rate. When shoppers find the variant they like most with fewer clicks, it’s a high possibility that they will make a quick purchase. 

Moreover, swatches offer customers a great picture of what variants are in stock. As a result, buyers don’t need to ask sellers whether or not this variant is available. Convenient, isn’t it? 

2 Steps to Add Magento 2 Color Swatches

Oh, wait. Let me outline my plan first so that you’ll find it easier to catch up. Assume I have a configurable product named Gobi HeatTec (Jane Test), which has variants in 3 different colors: black, orange, and red. I want to add an extra color swatch, “Dark Green,” to this product’s detail page. Here are the main steps: 

• First, we’ll create an additional color swatch, “Dark Green,” in the Color attribute. 
• Then, we’ll update or assign this swatch to the product in either of the two ways below: 

+ Update the product individually 

+ Update the product in bulk

Okay, let’s start.

Step 1: Create a Magento 2 Color Swatch

Choose one of the two methods below to create swatches for products:

• Use Colors
• Use Images

Method 1: Use colors

Preparation: Identify the exact color for a product by using the eyedropper tool. Then, copy the equivalent hexadecimal value and save it for later use. 

• From the admin sidebar, navigate to Stores → Attributes → Product.

• You will be redirected to the Product Attributes grid page—type “Color” in the Search box of the first column. Then click on the Color row to edit the attribute.

• Set the field “Catalog Input Type for Store Owner” to Visual Swatch.

You may also be interested in the following: Get to Know Magento Attribute Input Types with Examples

• If you set “Update Product Preview Image” to Yes, the corresponding product image will be updated when customers select a certain swatch option. For example, if the customer picks the red swatch, the product image will be updated to the red T-shirt (Image 1).

If you set No for this field, the product image remains unchanged regardless of your select swatches (Image 2).

• Under the Manage Swatch section, click Add Swatch and follow the steps below:

• In the column named Swatch, have a click on the new swatch. Then, select Choose a color to pick the color.

• In the color picker, enter the hexadecimal value of the new color you prepared. Then, to save the color, click on the multi-color icon below.

• You can enter the translated color name in the store’s language if you are running several stores.
• Select the default swatch in the front store in the column named Is Default.
• If you want to change the swatches’ order, drag them and drop them in your desired position.

• After you’ve finished, hit Save Attribute. Don’t forget to clear the cache.

Method 2: Use images

First, you need 3 product images representing the colors, patterns, or textures. Ensure you save the images in square format to maintain the aspect ratio. 

• From the Admin sidebar, navigate to Stores → Attributes. Then, choose Product.
• You will then be redirected to the Product Attributes grid page. Type “Color” in the first column and edit this attribute.
• Select Visual Swatch for the field “Catalog Input Type for Store Owner.”
• In the “Update Product Preview Image” field, select Yes if you want the corresponding product image to be updated when customers select a particular swatch option. If not, choose No.
• Under the section Manage Swatches (values of your attribute), follow the steps below:
• In the column named Swatch, click on the new swatch. Then, select Upload a file.

• Select the swatch image that you prepared in advance and then upload it. Next, repeat these steps for the other files. 

• Drag the swatch if you want to change the order of the swatches.
• After finishing, click Save Attribute. Remember to clear the cache.

Step 2: Update the Products

1. Update the product individually

• From the Admin sidebar, go to the Catalog → Products.
• Open the product in edit mode. 
• Scroll down to the Configurations section. Then, click on the Edit Configurations button.

• Select the attributes that you want to apply to this product. In this case, I choose the attributes: Color and Size. Then, click Next.

• I still keep everything as initially except tick the checkbox of Dark Green.

• Click Next to move on to the next step: Bulk Images, Price, and Quantity. In this example, I will only set up Images so that the corresponding image will appear when customers select a particular color swatch. (You can customize Price and Quantity if you want).

In this case, I choose to Apply unique images by attribute to each SKU. 

In the Select Attributes field, choose Color. Then, upload the corresponding images for each color swatch.

Click Next. And lastly, hit Generate Products. Then, you will be returned to the product edit page. Click Save and check the result on the front end. 

Note: If you haven’t seen the new color swatch after the steps above, you need to check the stock status of the configurable product and its child products (In stock, Out of stock).

Let me explain. If you set the Display Products Availability in Stock on the Storefront field to Yes, it means, only products that are in stock will appear on the storefront (Image 3).

Read more: How to configure Magento 2 inventory management in detail

If the configurable product or its child products are set to Out of Stock on their product edit page, they will not be shown on the front end.

2. Update the product in bulk

• From the Admin sidebar, navigate to Catalog. Then, choose Products.

• In the Product grid, tick the checkboxes of products to which the swatches are applied.
• Set the Actions to Update Attributes. 

• After that, you will be redirected to the Update Attribute page. Scroll down to the Color. Mark the Change checkbox and select Dark Green to assign this swatch to the product.

• After you’re done, click Save, and don’t forget to clear the cache.

And, let’s check Magento 2 Color Swatches on the front end.

Wrap It up

That’s all about Magento Color Swatch that you need to know. I hope this helps. If you need further clarification, feel free to leave a comment right below. To learn more about Magento 2 knowledge and keep yourself updated with the latest news on Magento Tips & News.

If you are searching for extensions that help skyrocket the sales for your store, visit the Magezon website to pick your wish one.