How to use the Variants Style add-on


In this article, we will take a deep dive into the Variants Style add-on and how it enables you to customize your product swatches.


What is the Variants Style add-on?

Variants Style is an add-on that gives you granular control and customization over how product swatches are displayed on your store.

The Variants Style add-on is a Pro add-on and is only available for the Growth, Advanced, and Enterprise plan only. Our comparison chart will help you decide on the best EcomSolid plan for your needs.


Add Variants Style to your theme or page

Step 1: Decide if you want the Variants Style add-on for your whole store or just a single page.

Since Variants Style is a global add-on, it can be used in 3 places for different purposes. The configuration stays the same regardless of where you place the add-on.


In the Theme Editor

Global Add-ons: This is the default position for the add-on when first added. Works theme-wide - all pages that use a Product section.


Page Add-ons: Works on all pages of one specific Page type (Home Page, Product Pages, Collection Pages, Search page, etc.)



In the Page Editor

When you create a new page and add the Variants Style add-on, it will take effect on that one specific page only.

Step 2: Once you’ve decided, open the Editor.

Step 3: Select the Add-Ons section on the left sidebar, and hit the “Add Add-on” button at the bottom.

Step 4: The Library will appear with the Add-ons tab already selected, type “Variants Style” in the search bar.

Step 5: Hit “Add

After a few seconds, the add-on will be implemented on your theme/page. The add-on’s configurations can be accessed at any time by in the Add-Ons tab on the left sidebar.

The next sections will cover the Variant Style add-on’s configuration.


Configure the Content tab

The Content tab is made up of 4 main configuration zones: Variant Color, Variant Image, Variant Sale Tag, and Options.


Variant Color

This zone helps you display the product’s different color variations as actual colors. If you would like to display text instead, toggle Variation Color off.

When Variation Color is turned on, you have the settings for Variation Title and Custom Colors.

In the Variation Title field, input the exact title of the product shown in Shopify Admin > All Products

The Variant Title field supports setting up all three of your option titles (Shopify allows for a maximum of 03 options). You can input all three titles in this field, separated by a comma.

Example: Color, Size, Material


The Variation Title field is case-sensitive, so you need to input the exact label that shows in your product’s setting in Shopify Admin.


For example, for the product Blue Gem Hydration Mask, the tile for the variation that shows color is “Color”, so we input “Color” to the Variation Title field.

Moving on to the Custom Colors menu, there are 4 color options by default, which can be edited, duplicated, or removed using the pencil, clone, and trash icon, respectively.


If one or some of your options’ names already match the color here, they will be displayed as colored swatches instead of text.


Since the product in this example has 3 color options in total (Blue, Teal, and White), we will remove one option before editing the rest.

To edit a color swatch, hit the arrow on the far left to expand its parameters:

  • Option Name: Input the name of your product’s color option shown in Shopify Admin in this field. This field is not case-sensitive. 
    *If the name you input does not match any color options your product has in Shopify Admin, the swatch will not change to a colored swatch.



  • Color: This is when you can actually select a color to display using the color palette or color hex code.


Variant Image 

This zone allows you to use images as the background for swatches. Toggling Variant Image off will revert you to displaying texts.

When Variation Image is turned on, two more settings will appear: Variation Title and Custom Images.

Variation Title: Input the exact title of the product shown in Shopify Admin > All Products

In this demo, we configure the Size options (52, 65, and 90 oz) to display images.

All three swatches are already displaying images:


These are variant images previously set up in the Blue Gem Hydration Mask product in Shopify Admin.

If you want to display a custom image that is not yet in Shopify Admin, then use the Custom Images menu:

  • Option Name: Enter the exact name of the variant. For example: “52 oz”
    *If the name you input does not match any options your product has in Shopify Admin, the swatch will not change to the custom image you select.
  • Image: Click on the “Upload” button to upload an image from your device storage, or click on Gallery to choose an image you previously uploaded.


Variant Sale Tag

Toggle this on will expand more configurations to let you display a sale tag above your swatches:

Variation Title: Enter the exact title of the variation as displayed in Shopify Admin. In this demo, we’ll display the sale tag above the Size swatches, so we input “Size” into this field.

Sale Text Format: Edit the label of the sale tag


   Enter text here Value calculated by Shopify in percentage Enter text here



Show Tooltip: Show an alternate text whenever a swatch is hovered on.

Hide Sold Out Variant: Cross out out-of-stock variant.

For example, the Teal color is completely out-of-stock, therefore the teal swatch will be displayed with an X mark on top of it.

*When Hide Sold Out Variant is enabled, out-of-stock swatches will not display Tooltip.


Hide Non-existent Variant: Any variant that does not exist will be hidden.
For example, the color White is only available in the largest 90 oz size, so when customers click on the white swatch, 52 oz and 65 oz swatches are hidden.


Configure the Design tab

The Design tab brings more tools to help you fine-tune your swatches’ appearance.


Variant Color

Custom Size

When Custom Size is enabled, you’ll have two additional parameters:

  • Size Segment Style

  • Size Select Style

If you pick “Select” as the style for the Variant section, then adjust this parameter to change the size of the swatch.



Toggle this option on to change the shape of the Color swatches from square to circle.

*Enabling Circle will disable the Radius option.


Round all corners of the Color swatches, dragging the slider to the max will turn the swatches to a circle shape.


Variant Image

Similar to Variant Color 


Variant Sale Tag

You have the ability to adjust Text Color, Background Color, and Border Radius.

Text Color

Select from the color palette or input a hex color code in the box.


Background Color

Select from the Color palette or input a hex color code in the box.

Border Radius

Use the slider or input in the mini box to adjust the border-radius in pixels.

Check out more articles here, and if you need any further assistance, our EcomSolid Support Team is always happy to help. We can be reached at any time via email or live chat.


Was this helpful?