Step by Step Guide to Configure Color Swatches in Magento 2

Color Swatch is one of the best solutions for Magento 2 store owners to show customers the variety of colors, patterns, designs, etc., available at your store. Today's tutorial will bring you a step by step guide to add swatches to the Magento 2 store. There are various types of swatches that can be added to the Magento store. The article will guide how to configure all the types of swatches in Magento 2.

Also read: How to Add Color Picker in Magento 2 System Configuration?

Steps to Configure the Swatches

1. Create the Swatches
2. Update your product
3. Save Product

Step 1 - Create Swatches

There are various methods to create swatches on a Magento store. Here, we will offer a guide to all of them.

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:

/span>

• On the Swatch menu, 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 clicking 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, 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.
• Set the Actions control to Update Attributes.

Step 3 - Save the Product

Click on Save. Don't forget to flush the cache in the Cache Management tab.

Voila! Your Color Swatches are configured on your Magento 2 store.

Also read: How to Check if Attribute is Swatch Attribute in Magento 2?

I hope we've covered everything that is required to configure color swatch on the Magento 2 store. If we missed out any thing, feel free to reach us out!