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
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.
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.
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:
Click Choose a color to select one for the swatch menu:
Color can also be determined by six hexadecimal value. Click on the Color Wheel button at the lower right corner to save the swatch.
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:
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
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.
3. Set Actions control by clicking Update Attribute. Mark the checkbox of each product that you want to apply the swatches.
4. Mark the Change box under Color attribute
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.
