Variation Swatches

Convert regular dropdown boxes of product variations to stylish variation swatches

Configure Product Attributes

In order to use the product variation swatches, you need to first configure the product attributes. Here's how you can configure the product attributes and make use of the product variation swatches.

Product Attributes Screen

Click on the Edit link for the product attribute you want to configure. You can find the product attributes under Products admin menu.

Once you click on the edit link, you will be redirected to the attribute edit screen, where you need to set Display Type of the attribute. This option controls how the variation attribute will appear on the frontend. You can choose from 4 different types -

➡️ Select This is the theme default select box that you usually see on the products with variations, which looks similar to the screenshot below -

➡️ Label The label type will display your variations in a list of labels like buttons. You can configure the custom label text for each attribute term in the individual attribute term settings. Here's the frontend display of the variations using label type -

➡️ Color The color type says everything about it by it's name. Yeah, you can now display the colors in place of your variation that represents the color of the product. You can configure the color for each attribute term in its settings. Here's the final output on the frontend -

➡️ Image The image type will allow you to upload the image of the attribute that better represents than the word. Displaying the images in place of the regular dropdown variations will increase your chances of selling that product as your user gets the visual idea of the product for that variation. You can set the images for your attribute terms in their respective settings. Here's how it looks on the frontend when you add the image variation swatches -