How to Configure Color Swatches in Magento 2

Are you selling products in your Magento 2 store with different color options? If so, you must consider to integrate a product designer with Magento 2 to configure color swatches in Magento 2 that makes it easier for the customers to purchase products of their favorite color. Magento 2 color swatches are helpful when selling products with different color variations. Gone are the days of selecting a color from a drop-down list and visualizing what the t-shirt will look like with that color, your shoppers can now utilize direct color swatches for all the items they require.

Table of Contents

• What are Color Swatches in Magento 2?
• How to Configure Color Swatches in Magento 2
  • Step 1: Create Color Swatches
  • Step 2: Update Your Product
    • Update Products in Bulk
    • Update Products Individually
• Conclusion

Here is the complete tutorial for using the color swatches in Magento 2 that may help you out with the same.

What are Color Swatches in Magento 2?

Before we move toward the procedure, let’s understand what are color swatches in Magento and their importance.

Different customers have different color choices. For example, one customer may like to purchase a product in yellow color, while another may want the same product in blue. In that case, you may require to add color swatches options on the product pages in your Magento 2 store to help the customers choose and visualize the products in their favorite color.

The Magento 2 color swatches make it easier for the customers to choose the right color of the product by displaying the product in the respective color selected by them. As a result, the customers can easily envision the product, which helps improve their shopping experience.

Generally, Magento 2 Configurable Product Swatches display different color options on the product page, where the customer can choose their favorite color. Below is an example of the Magento 2 product page displaying color swatches.

How to Configure Color Swatches in Magento 2 

Getting to the main point, here are the complete steps that you can follow to add color swatches in Magento 2.

Step 1: Create Color Swatches

To set up Magento color swatches, you need to go to the admin panel to Stores > Attributes > Products.

In the ‘Product Attributes’ grid, find the color attribute and edit it.

In the ‘Attribute Properties’ of the ‘Color’, set the following properties:

• Catalog Input Type for Store Owner – Visual Swatch
• Update Product Preview Image – Yes

Now, scroll down to the ‘Manage Swatch’ section, and set values of all the colors you want to add to your products. Here, you can also set the default color option for the products in your store.

You can also change the sequence of the color options just by dragging the options in the ‘Manage Swatch’ section. Once you have configured the color swatches, hit the Save Attribute button on the top-right corner of the page to save the configuration.

Step 2: Update Your Product

Once you have configured the color attribute in the Magento 2, it is now time to assign it to the products in your store. You can update the color swatches in the products in the bulk of set color swatches for each product individually.

Update Products in Bulk

To update the color swatches in your products, follow the below-mentioned steps:

• Go to Catalog > Products in the admin panel.
• Use the filter option to sort the list of the products by SKU, name, type, or status, and find the products you want to add the color swatches.

• Select all the products in which you want to apply the color swatches, and select the ‘Update attributes’ action.

• Scroll down the update attributes page, and uncheck the ‘Change’ box for the color attribute.

That’s it! Now, click on the ‘Save’ button at the top right corner of the page to save the changes.

Update Products Individually

You can also update the color swatches of products individually in Magento 2. By updating the products individually, you can also set different images, prices, and quantities for different color variants of the products. You can follow the below-mentioned steps to update color swatches individually in Magento 2.

• To add a color swatch for any of the products, go to Catalog > Products. Find the product you want to add color swatches in, and click on ‘edit’ option provided in the Action column.

• Scroll down to the ‘Configuration’ part and click on ‘Edit Configurations’ to create different variants of products with different colors. On the ‘Select Attributes’ step, select the ‘color’ attribute and click on next.

• In the next step, click all the colors that you want to add to the product and click on next.

• Next, on the ‘Bulk Images & Price’ step, select to apply unique images by attribute to each SKU, and select the attributed as ‘Color’. Now, upload images of each color variant of the product and click on next. Optionally, you can also set the quantity and price of the products for each variant.

• Next, on the summary step, check all the color variants of the product, and click on Generate Products button at the top right corner of the page.

Next, save the product configurations to save all the color variants of the product that you created.

That’s it! This is how you can create color swatches in Magento 2 and add more functionality to your online store by allowing the customers to choose and show images of product variants by color.

Conclusion

Magento 2 Color Swatches make it easier for the customers to get different color variants of the same products in your store. It can help them make better purchase decisions and add to the customer experience of your store. You can consider this complete guide to configure Magento 2 Color Swatches.

In case you want to take the produce configuration functionality of your store to the next level, you can use our Magento 2 Product Designer extension that allows the customer to design products using text, images, clipart, and various effects.

In this article, I have provided you with all the steps to configure Color Swatches in Magento 2. If you still have any doubts or queries regarding the Magento 2 solution, feel free to comment below! I’d be happy to help you.

Also read: How to Use Custom Option Image for Magento 2 to Boost Sales

Also, do not forget to share this amazing guide with your Magento 2 friends via social media.

Thanks for reading!