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.
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
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.
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 |
Options
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.
Circle
Toggle this option on to change the shape of the Color swatches from square to circle.
*Enabling Circle will disable the Radius option.
Radius
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.