How to Add Color Swatches in Magento 2?

How to Add Color Swatches in Magento 2?

The literal meaning of swatch is “a small sample of fabric used to demonstrate the look of a larger piece.” A color swatch means using the color attribute in a sample of a product to demonstrate how the product will look in a specific color.

Color swatches in an online store give customers different options in terms of colors and allow them to choose the one that they like most.

So if you own a Magento 2 store and would like to add color swatches to products, this guide is for you.

How to Add Color Swatches to Magento 2 Products?

You can add color swatches in Magento 2 using the following 2 easy methods.
  1. By adding a color swatch
  2. By uploading a swatch image

Method 1: Adding a color swatch

Before adding a color swatch, make sure the color is a true representation of the product. To identify the exact color of your product, open your product in a photo editor and use the eye dropper tool and note down the equivalent hexadecimal value.
  • Login to Magento 2 admin; go to Stores -> Attributes -> Product.
  • In the grid, click on the color attribute which will open in edit mode.
add color swatches in magento 2
  • Verify that Catalog Input Type for Store Owner is set to ‘Visual Swatch’.
add color swatches in magento 2
  • Under Manage Swatch (values of your attribute), click the Add Swatch button and do the following:
adding color swatches to magento 2
  • In the Swatch column, click the new swatch and select Choose a color from the menu.
add color swatches to products in magento 2
  • In the color picker, place your cursor in the # field, delete the current value, and enter the six-character hexadecimal value of the new color that you had taken a note of.
adding color swatches to magento 2 products
  • To save the swatch, click the Color Wheel icon in the lower-right corner of the color picker.
  • In the Admin column, enter a name to describe the color to the store administrator. This will not be displayed on the frontend.
  • You can set a default swatch by selecting the radio button next to that swatch in the Is Default column.
  • You can also reorder the swatches by dragging them into position.
  • When complete, click the Save Attribute button.

You need to repeat the above steps for every product to update the color swatch. If you want to update multiple products at the same time, you can follow the second method given below.

Method 2: Uploading a Swatch Image

In this method, we first capture an actual image of the product and upload it as a swatch image rather than specifying the color. After uploading all the images, we can then update all the products simultaneously.

To capture the image, open the product image in a photo editor and save a square area of the image that depicts the color, pattern, or texture.

Step 1: Upload a file

  • Login to the admin panel and follow the first 4 steps of Method 1 above.
  • When you click on the new swatch, select Upload a file.
  • Browse to the file that you had captured and upload it.
  • Do so for each swatch image.
  • Enter the Labels for the Admin and Storefront.
  • When complete, click Save attribute.

Step 2: Update the products

  • Go to Catalog -> Products on the Admin sidebar.
  • Click on Filters to filter the products by Name or SKU and include only the applicable products. For example, the following image filters products on a partial product name “Montana”.
  • In the grid, select all the checkboxes to which the swatch applies.
  • Select Update attributes in the Actions dropdown.
  • Scroll down to the Color attribute, choose the swatch that applies to the selected products and select the Change checkbox.
  • Click Save on the upper right corner.
If you have any questions, then feel free to contact us.

Related Articles: