Create Color, Text or Image Swatches in Magento 2

0

In order to serve high expectation of customers, Magento 2 supports you with 3 types of swatches: colors, Image, and text swatches.

Magento 2 swatches

Magento 2 swatches

Specifically, colors can be indicated by visual swatch, text ones or drop down input menu. Swatches can also be used on the product pages, listings or layered navigation. The corresponding product will be synchronized to display as the color is chosen.

A text based is similar to text label as the attribute values appear as text in case that the correspondent images are available for a swatch. As being in operation, any size that is unavailable will be crossed out.

text swatch

Layered Navigation swatches are provided as the layered navigation property is set on. Both text-based and layered navigation can be shown in a swatch.

Layered Navigation swatches

This tutorial will show you how to add and configure swatches in Magento 2 store.

1. Swatches creation

Method 1: Color Swatch

1. Login to the backend of your Magento 2 store.

2. From the Admin sidebar, navigate to Stores > Attributes > Product.

3. Manage the Color Attribute.

4. In order to add visual swatch, set Catalog Input Type for Store Owner.

5. Click Add Swatch and explore Manage Swatch to add a new definition of the list:

Add Swatch

Click Choose a color to select one for the swatch menu:

Choose a color

Color can also be determined by six hexadecimal value. Click on the Color Wheel button at the lower right corner to save the swatch.

hexadecimal value

6. From the Admin and Default Store View, enter the label for the color.

7. In the Default section, mark the checkbox.

8. Set Enable to change the order in the top left Manage Swatch table and drag to the new position.

9. Click Save Attribute to complete.

You can use Edit mode to edit and update Color Attribute.

Method 2: Image Swatch

The swatch can be done by using the collection of the swatch images.

1. Login to the backend of the Magento 2 store.

2. From the Admin sidebar, navigate to Stores > Attributes > Product > Color Attribute.

3. Set Catalog Input Type for the website owner.

4. Click on Add swatch under Manage Swatch:

Add swatch under Manage Swatch

Click Upload a file to insert images from your computer.

5. In Admin and Default Store View, enter the label for the color.

6. Click Save Attribute and flush the cache to finish.

You can use Edit mode to edit and update Color Attribute.

Method 3: Text swatch

text swatch magento 2

Go to store > properties, in Catalog Input Type for Store Owner select Text Swatch

2. Product Update

1. From the Admin sidebar, navigate to Products > Inventory > Catalog.

2. Use Filter the list by Name or SKU to involve the applicable products only.

Filter the list by Name or SKU

3. Set Actions control by clicking Update Attribute. Mark the checkbox of each product that you want to apply the swatches.

Update Attribute

4. Mark the Change box under Color attribute

Change box under Color

5. Click on Save and don’t forget to flush the cache to finish.

That comes to the end of the tutorial. If you have any further questions, please comment below to let us know.

Rate this post

Share.

About Author

Daniel is a Magento developer with 5 years of experience with customizing Magento extensions, Magento templates. He's main author at Magento explorer

Leave A Reply