How to Configure Magento 2 Color Swatches

In Magento 2, Color Swatches play an important role in motivating customers to make purchase decisions.

Unlike traditional shopping where shoppers can directly see how products will differ with different colors , when shopping online, they cannot see or hold the product in their hands. The only option for them is to only base their senses to make a judgment and decide whether they will buy this product or not.

So, in order to enhance customer satisfaction and motivate them to complete the purchase in your Magento 2 store, you need to present your product in various colors, patterns, or textures. That’s why we need a feature like Magento 2 Color Swatch.

Table of Contents

• What is Magento 2 Color Swatch and how does it help?
• How to Set Up Color Swatches Option in Magento 2 with 3 Easy Steps
  • Step 1: Create the Color Swatches in Magento 2
  • Step 2: Update your product
  • Step 3: Save the product
  • Alternative: Configure Color Swatches in Magento 2 Using Third-Party Extensions
• How to Delete a Color Swatch in Magento 2?
• Other Types of Product Swatches Besides Color Swatches
  • Text-Based Swatches
  • Swatches in Layered Navigation
• Conclusion

What is Magento 2 Color Swatch and how does it help?

In Magento 2, color swatch is a feature that enables your online store to display products in specific colors chosen by customers. When customers click on the color they want, they can see how the product will look in that color. This helps them make purchase decisions more quickly. In the realm of online shopping, where the physical experience with products is limited, Magento 2 color swatch enhances the customer experience by letting them know if a product looks good in the color they want, reducing uncertainty about whether the product will meet their needs or not.

Because of that, online merchants need to upgrade their display method to show swatches features such as color, pattern, and texture as attractively as possible. For example, you have a shirt and it is more attractive with unique shades of color than flat colors. The more realistic the customers feel, the more products you can sell out.

How to Set Up Color Swatches Option in Magento 2 with 3 Easy Steps

Now, let’s start setting up color swatches option for your Magento 2 store:

Step 1: Create the Color Swatches in Magento 2

Apply one of the following methods to create the swatches.

Method 1: Add a Color Swatch

• Identify the exact color for your product.
• On the Admin sidebar, Stores > Attributes > Product.
• In the grid, find and edit the Color attribute.
• Set Catalog Input Type for Store Owner to Visual Swatch.
• Under Manage Swatch, click on Add Swatch to add a new definition to the bottom of the list. Then, do the following:

• On the swatch menu, select Choose a color.

• In the color picker, enter the six numbers that represent the hexadecimal value of the new color in the # field, and press the Backspace key to delete the current value. Then click on the Color Wheel button in the lower-right corner to save the swatch.

• Enter the label for the color in the Admin and Default Store View.
• Mark the checkbox under the Is Default to set the default color as you need.
• Enable to change the order when click on the icon in the top left of Manage Swatch table and drag it to the new position.
• When complete, click on Save Attribute, then flush the cache in Cache Management tab.
• Finally, go to Edit mode in each product, and update Color attribute with the correct swatch. To update multiple products at the same time, follow the steps below.

Method 2: Upload a Swatch Image

• Collect the swatch image that is correct for your product.
• On the Admin sidebar, Stores > Attributes > Product.
• In the grid, find and edit the Color attribute.
• Set Catalog Input Type for Store Owner to Visual Swatch.
• Under Manage Swatch, click on Add Swatch to add a new definition to the bottom of the list. Then, do the following:
  • On the swatch menu, select Upload a file.

  

  • Choose the desired image from your computer.
  • Repeat these steps for other swatch images.
  • Enter the label for the color in the Admin and Default Store View.
• When complete, click on Save Attribute, then remember to flush the cache in Cache Management tab.
• Finally, go to Edit mode in each product, and update Color attribute with the correct swatch. To update multiple products at the same time, follow the steps below.

Step 2: Update your product

• On the Admin sidebar, Products > Inventory > Catalog.
• Filter the list by Name or SKU to include only the applicable products.

• Mark the checkbox of each product that you want the swatch to apply. And then, set the Actions control to Update Attributes.

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

Step 3: Save the product

Click on Save to apply the swatch. Then remember to flush the cache in the Cache Management tab.

Reference: Magento 2 user guide

Alternative: Configure Color Swatches in Magento 2 Using Third-Party Extensions

Imagine having a store with more than 1000 products, and each product comes with 7, 8, or even 10 different choices of colors, patterns, and textures. Customizing product swatches manually in such a case can be a “nightmare” because of consuming a lot of time and effort.

In such situations, there’s no better option than using a third-party extension that enhances product customizations, allowing you to add more information to the options, making them more informative and appealing to customers.

One popular choice is the Product Options for Magento 2 extension by Mageplaza, which offers the following benefits:

• Adding more specifications for customizable options: Not just color swatches, but also various other specifications like stock quantity, weight options, tooltip notes, and more.
• Incorporating special prices and tier prices via tooltips for specific products to boost sales.
• Adding options for multiple products quickly through editable templates.

This extension streamlines the process, making it easier for store owners to manage and present a wide range of product options, ultimately enhancing the overall customer experience and boosting sales.

How to Delete a Color Swatch in Magento 2?

Before deleting a color swatch or any other attribute in your Magento 2 store, make sure that it is not currently associated with any product. When you delete an attribute, it will be removed from all products and related attribute sets.

To avoid any issues, use the Export tool to check the list of product Entity Attributes and make sure the attribute you want to delete is not included. This step will help you avoid unintentionally removing essential attributes and ensure smooth management of your online store.

Now, to delete a color swatch, follow these steps:

1. On the Admin sidebar, go to Stores > Attributes > Product.
2. Find the Color attribute in the list, and open in edit mode.
3. Click Delete Attribute.

Other Types of Product Swatches Besides Color Swatches

Text-Based Swatches

However, for attributes that do not have an image for swatching, you can use text-based swatches. A text-based swatch is often shown as a button with a text label, and plays a role in the same way as a swatch with an image. In the following picture, size is a text-based swatch.

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

Swatches in Layered Navigation

The swatches including color swatches and text-based swatches can be also used in the layered navigation. It’s usually displayed on the left column of search results and category pages, and sometimes on the home page, helping shoppers find products easily by filtering them based on category, price range, or other attributes.

Conclusion

In the era of online selling, images play a significant role in determining a brand’s success. Investing in high-quality images is a powerful commitment to product quality and strengthens a brand’s competitive position.

Don’t let the entire process of serving customers’ needs become effortless just because of a minor reason like not providing enough illustrative product images. Magento 2 Color Swatch is an incredibly useful feature that is also easy to set up and configure, utilizing them is never excessive; it’s a smart choice!

Related Topics

• How to Create a Product Attribute
• Create Product Attribute Sets
• Configure Price Filter - Price Navigation
• Configure Product Listings