How To Setup Variation Swatches?

Divi BodyCommerce allows you to change the appearance of the variation select option from the default select box to either a label (button), colour or image option. How is this done? Please follow the information below.


Below is an example of how each option looks. Click HERE to see variation swatches live.

How do I set up variation swatches?

1.) Enable Variations.

First, head over to BodyCommerce > Variation Swatches and enable so that you see the "Yes" button.

2.) Create At Least One Attribute.

Second, you need to go over to Products > Attributes and create a new (or edit an existing) attribute. Under the settings, there will be an option to select the type of variation. As you can see below I have created three attributes: Color, Material and Size with the types being colour, image and label respectively.

3.) Create Options.

Next, you want to create options for your attribute/s. To do this click on “Configure terms” on the right-hand side of each attribute.


Name: This will be the label/button text on the frontend (so I have just made it “L” instead of “large”).

Color & Image.

Both of these types are the same in terms of settings.

Name: This is the name of the attribute type (won’t be shown on the frontend unless the image is missing, it will default to this as text)

At the bottom, you will see an input box to enter the colour code or the image URL. Inter in the HEX or RGB code for the colour attribute – save and you will see the colour appear there as a preview – you are good to go. It is very similar to the image attribute, you upload the image to the media library and then copy the URL, paste this URL in the box labelled “image”, save and you will see a preview of the image – you are all good here now.

4.) Add At Least One Attribute & Create Variable Products.

All you need to do now is to add at least one attribute to a product and create variations.

More Settings

Go to BodyCommerce > Variation Swatches to see the settings page.

  1. First, choose the appearance of the variation  - do you want them to be square or circle.
  2. Next style each of the variations types using our settings - change the width, height and colour if applicable.
  3. If you are using the label variation swatch you can enable the settings called "Out Of Stock Strike Through?" - this will add a strike through the label. DO NOT ENABLE THIS if you are using the select dropdown as this will change all the text to be in stock or out of stock.
  4. "Enable active swatch name" - If you want to have the text of the selected option appear after the label, enable this. For example, if you have the label 'Colour', it will be 'Colour Blue' when you select the blue option. - Used on the colour variation ONLY
  5. If you have the above enabled, you can add some text that goes in between, for example, you could have the text 'chosen is:' and it will say 'Colour chosen is: Blue' for example.

5.) Add To Cart Module.

Make sure you have Add To Cart module on the Product Page.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us