How To Setup Variation Swatches?

Written by the Divi Engine Documentation Team

Introduction

Follow this guide to create variation swatches.

Example

Below is an example of variation swatches. Click HERE to see variation swatches live.

How do I set up variation swatches?

Step 1: Enable Variations

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

Step 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.

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.

Label

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.

Step 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.

Variation Swatches Settings

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

Variation Swatches

• Enable Variation Swatches: Enable to use variation swatches.
• Variation Style: Select the way you want the variation fields to appear.
• Enable Tooltip (Image and Color only): Enable if you want a tooltip to appear when you hover over the variation swatch.
• Enable active swatch name: Enable to display the text of the selected option appear after the label.
• Enable Variation Label (next to options): Disable this to disable the label next to the variations.
• Text between the label and active swatch name: If you want some text to appear between the label and active swatch name.

Label Variation Type

• Label Width: Define the label width.
• Label Height: Define the label height.
• Label Border Radius: Define the label border radius.
• Label background colour: Select the label background colour.
• Active Label background colour: Select the active label background colour.
• Label Text Color: Select the label text colour. 
• Active Label Text Color: Define the active label text colour.
• Label Font Size: Define the label font size.

Colour Variation Type

• Colour Width: Define colour variation width.
• Colour Height: Define colour variation height.
• Color Border Radius: Define colour border-radius.

Image Variation Type

• Image Width: Define image variation width. 
• Image Height: Define image variation height.
• Image Border Radius: Define the image border-radius.

Out Of Stock Settings

• Out Of Stock Strikethrough? Enable to strikethrough the out of stock button variant.
• Strikethrough colour: Define the strikethrough colour.
• Strikethrough Size: Define the strikethrough size.
• Out Of Stock Hide? Enable to hide out of stock.
• Ajax variation threshold amount: Adjust the number of product variations.

Appearance

• Choose Active Style: Select how you want the active colour to display when selected - you can make the others fade out or a border for example.
• If Border - Border Colour: Define the border colour.
• If Border - Border inside Colour: Define the inside border colour.
• If Border - Active Border Colour: Define the active border colour.
• If Border - Active Border Inside Colour: Define the active inside border colour.
• If Border - Border width: Define the border width.

Variation Tooltip

• Enable Image/Color Large Preview: Enable to preview the image or colour.
• Large Preview Height: Define the preview height.
• Large Preview Width: Define the preview width.
• Tooltip Background Color: Select the background colour.
• Tooltip Padding Top & Bottom: Define the padding.
• Tooltip Padding Right & Left: Define the tooltip padding.
• Tooltip Adjust Left: Define the tooltip left size.
• Tooltip Adjust Bottom: Define the tooltip bottom size.
• Tooltip Text Color: Select the preview text colour.
• Tooltip Font Size: Define the preview font size.

Step 5: Add To Cart Module

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

More Support?

Please email us at [email protected] if you are unable to get Divi BodyCommerce working.