How to Add Color Swatches in Magento 2?

A color swatch is a great way to boost the user experience and make your configurable products even more engaging. The best thing is that adding a color swatch in Magento 2 is a very straightforward process. Before listing the steps, let’s first get an understanding of what a color swatch is, its benefits, and the best practices associated with it.

What is a Color Swatch?

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.

Benefits of Using Color Swatches

There are numerous benefits to using a color swatch in your Magento store. They include:

Improved User Experience

By adding colours to your configurable products, you can enhance the overall user experience since they get a more vivid picture of what the product would look like.

Easier Decision Making

Secondly, the colors make it easier for the user to make their decision. They have no need to visit a shop to ascertain what the product would look like nor contact the online store for actual product pictures.

Better Conversions

Since customers can easily view the product in the desired color, they have little reason to delay the purchase decision. This leads to better conversions and sales performance.

Best Practices to Add a Color Swatch

Although it is easy to implement color swatches in Magento 2, there are still a few best practices one must keep in mind:

Accuracy

Don’t set up color swatches just for the sake of it. There is a need to ensure that the colours accurately represent the product colours. If not, user trust in the brand will go down significantly. Product returns will also increase, thereby impacting your store’s financial stability.

High-Quality Images

As you will find below, one way to add color swatches is using images. If using an image, keep in mind a few things, including the right Magento 2 swatch image size. If the image size is incorrect, users will have a hard time discerning the colours. This will impact their ability to complete the purchase quickly. A slight hesitation can compel them to abandon their purchase altogether or look for another store.

Friendly Navigation

Thirdly, ensure that swatches are aligned correctly. Similar colours should be grouped to make it easier for the users to navigate. If users have trouble finding the desired color, it can complicate the purchase decision.

Testing

Lastly, whether using the Magento 2 swatch image method or the other one, ensure to test it beforehand. We recommend testing on various products and devices for the best results.

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/Magento 2 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.

• Verify that Catalog Input Type for Store Owner is set to ‘Visual Swatch’.

• Under Manage Swatch (values of your attribute), click the Add Swatch button and do the following:

• In the Swatch column, click the new swatch and select Choose a color from the menu.

• 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.

• 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: Magento 2 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 you finish the Magento 2 get swatch image process i.e. upload all the images, 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.

Final Thoughts

This concludes our article on how to add color swatches in Magento 2. We discussed two methods - Magento 2 get swatch image and adding a color swatch. If you have any questions regarding any of these methods, then feel free to contact us.

Related Articles:

• How to Add Size Chart in Magento 2?
• How to Add Size Attribute in Magento 2?