How to Setup and Configure Swatches in Magento 2

While Magento 1 required an extension for configurable swatches, configurable swatches in Magento 2 come as an out of the box feature and is extremely simple to set up. We will show you the steps for setting up configurable swatches in Magento 2.

Setting Up and Configuring Swatches in Magento 2

How to Create an Attribute in Magento 2

If you don’t have an Attribute you want to display the swatches you need to create one and relate it to the Attribute Set.

Create a Color Attribute

1. Log into the admin and click on Stores. Then, click on Products.
2. Click on Add New Attribute.
3. Complete the required fields for the new attributes. Specifically for Color Attributes, you will want to select Visual Search and make the Update Product Preview Image dropdown to Yes. This will update the product image on the catalog page.Select colors you want to have the attribute on the Manage Swatch (Values of Your Attribute) section. In addition to the color, you can also add your own image by clicking on the Upload File. Click Clear to revert the changes of the selection.
   
   
4. In the Advanced Attribute Properties, complete the Attribute Code without spacing (color for example). Then, set the Scope to Global.
5.  If you want to use Layered Navigation, click on Storefront Properties under the Attribute Information panel. Select Filter (with results) in the Use in Layer Navigation section. Then, select Yes for Use for Promo Rule Conditions and Used in Product Listing.
6. Once you have completed the above fields, click Save the Attribute at the top on the right side of the screen.

Connect the Attribute Color with the Attribute Set

1. Click on Stores and then Attribute Set.
2. Now, open the Default attribute set (or you can create a new on by clicking New Attribute Set and adding a Name of the attribute based on Default).
3. Drag the attribute created color into Product Details on the Default Attribute Set.
4. Create another attribute using the same method, call it size. Select Text Swatch from the Catalog Input Type for Store Owner dropdown. Then, set the Update Product Preview Image to Yes. Complete the Manage Swatch (Values of Your Attribute) with the sizes you need.

Add Swatches to a Configurable Product in Magento 2

1. Search for the Configurable Product you want to add color swatches. If you do not have a configurable product create it by clicking on Products and then Catalog. Next, find Configurable Product in the Add Product dropdown. 
2. Now, you can create the product by doing the following:
   • Enable the product
   • select your Attribute Set
   • complete the Name and the SKU
   • input the Price
   • fill in the Taxable Field
   • set Visibility to Catalog, Search
   • select the Categories you want to show the product 
3. Click Create Configurations.

Assign Swatch Colors

1. A screen will appear that contains the product configurations. First Page contains the attributes you want to add for the product. For this example, we chose “Color” and “Size”.
2. Click Next. 

Assign Attribute Values

1. Select the Attribute Values. Second Page of the Product Configurations shows the values depending on the attribute codes of the First Page. For this example, we chose White, Red and Hawaiian Blue for the colors, and 55 cm for the size.
2. Click Next. 

Assign Images, Price and Quantity to Swatch

One of the many great features of Magento 2 is this three-in-one step of choosing the Image, Price and Quantity for a specific product or for all of them in the same configuration.

If you want the product to have all three different images for each color, perform the following:

1. Select Apply unique images by attribute to each SKU.
2. Then, select Color under the Attribute dropdown. Three image fields will appear with a specific color on them.
3. You can skip the image uploading at this time, and leave the configurable products without an image background.

For specifying Price for each product:

1. Click Apply unique prices by attribute to each each SKU.
2. Insert the price for each field.

For Quantity specification perform the following steps:

1. Click Apply unique quantity by attribute to each SKU.
2. Insert the quantity for each field. 
3. Click Next.
   
4. The Fourth Page of the Configuration shows a summary of the Products that are added after the Configuration of Swatches. If all of the changes are correct, click Next. If not, click Back and edit the fields you want to make updates.

Assign Default Image to Swatch

You can edit the Quantity values manually once complete, as well as the the weight. Also, you can remove the product, disable the product or choose another product. 

For the default image/video of the product, perform the following steps:

1. Click Images and Videos.
2. Upload the default image you would like appear in the frontend. If you don’t select anything, it will display a Configurable Swatch with a non-primary image. 
3. Click Save.

 

If you are still unsure on how to setup and configure swatches in Magento 2, contact us here at Centennial Arts with the link below!