How to Add Product Color Swatches in Magento 2?

In this blog, We are going to learn, How to Add Product Color Swatches in Magento 2?

Here you can see the instructions on how to create the color attribute and add color swatches to the Simple Product in Magento 2.

Step 1. Create a Color Attribute

Go to the Store > Products section.

Click on the Add New Attribute button.

From the Catalog Input Type for Store Owner option select Visual Swatch.

Set the Update Product Preview Image option to Yes.

Add a swatch

Press the Add Swatch button.

Select Choose a color from the swatch’s dropdown if you want to use a simple color for the swatch.

Enter the name for the specific color in the Admin column. This name will NOT be displayed on the frontend.

In Advanced Attribute Properties

Enter the Attribute Code without spacing (e.g. color) in the Advanced Attribute Properties option field.

Set the Scope option to Global.

Set the Unique Value option to No.Set Add to Column Options and Use in Filter Options to Yes.

In Storefront Properties

follow the image below

Save the Attribute (press the Save Attribute button).

Step 2. Add the Color Attribute to the attribute set

Go to Stores > Attribute Set section.

Open the Default attribute set. Drag the created color attribute into Product Details and click Save.

Add Swatches to the Simple Product

Search for the product you want to add the color swatches to.

  • Check the product status (should be enabled).
  • The Visibility option should be set to Catalog, Search.
  • Click the Create Configurations button (under the “Configurations” tab).
  • In the pop up window you will see the list of the product configurations. Choose the Color attribute (the attribute you’ve created) and click on the Next button.
  • Select values from the attribute you want include in this product (select colors).

Click the Next button.

  • At this stage you are able to customize images, price and quantity for your new products.
  • Upload Images — Click the Next button.
  • Specify the Price — Click the Next button.
  • Set the Quantity — Click the Next button.
  • Then click to Genrate product

Run the command :

php bin/magento indexer:reindex
php bin/magento cache:flush

I hope that you found this Blog helpful. If you’ve any queries, please leave comments in the comment section.

Thanks for following and reading this blog.