The Variation Swatches Addon helps to convert variations into nice-looking Swatches to grab the attention and make things easier for the shoppers.
Enabling the Swatches Addon
If already have the ProductX plugin installed on your site you can start using the Variation Swatches Addon. But first of all, you have turned on the addon. For that, go to the all addons section of ProductX and turn on the Swatches addon.
Swatches Settings
After turning on the addon, the swatches settings option will be available for you, along with all other addons settings. From where you can make necessary changes that include:
Convert Drop Down into Swatches
Already have variable products on your site? Don’t worry, you can easily convert their swatches. For that, click on the conversion check box from the swatches setting.
After that, the dropdown selecting options will be converted to buttons.
However, as you will see that it’s displaying the names of the colors. But we want to show the colors instead of names, right?
For that:
- Go to Product Attributes
- Add Color as the type of the Attribute
- Configure Attribute values with desired colors
After configuring the attributes click on the save button and see how it looks at the front end.
Create Label Attribute
You can easily create a global label attribute by following the below steps.
- Go to Product Attribute
- Create Size Attribute
- Select label type
- Add Label as the values of the Size Attribute
Create Swatches with Color and Size Attributes
If you want to create Swatches buttons with the all the variations of color and size attributes follow the below steps:
Create Arrtibutes for Colors and Sizes: First of all, you need to create attributes for required sizes and colors with the types of colors and labels. Or else, you can also modify the existing attributes.
Configure Attributes: After creating the required attributes you have to configure them with the values that you want to display on the product pages. For color variation, you have to add the name of the color and select the same color from the color picker options. For the size attribute, you have to add the name of the sizes and specific labels for the label. For example, if you add a size of Medium the label would be M.
Add attributes to a Product: While editing a variable product you can add global attributes. For that:
- Click on the Attributes section
- Select desired attributes from the dropdown
- Expand the selected attributes and select desired values
- Click on the checkbox “Used for variations”
- Click on the “Save Attributes” Button
Create Variations: Now go to the variation tab and create variations from all available attributes.
After creating the variations you have to assign product images and prices to all the variations. Then click on the save button and check how it looks at the front end.
Create Swatches with Image Variation
You can also display images instead of colors as the Swatches button. For that:
- Change Color Attribute type to Image or create a new one
- Assign Images with respective colors
- Make variations with all attributes
- Add Prices to all the variations
If you don’t want to add images to global attributes you can also do this from the product level as well. For that:
Click on the Show “image in variation from product” check box and then you will be able to add images from the product level.