Variant

Product variants are combinations of a product, for example those that have different colours or sizes. Product variants are a powerful way to model catalog data. For example, you can model a Product Variant for each size of pant and each color available.This is a must-have feature in the product page, as well as in the gallery product page layouts we’ve implemented, in order to present Shopify variants and let the user to choose the one they want. If you wish to create your own layout, keep in mind that you must include this element.

1. Adding Product Variants element

From the left side (Elements tab) > Single Product elements option, you will see the Variant element in the list of elements. Drag and drop it to any position of the selected structure. 

2. Content

• Picker Type: Pick a type that you wanna use for the Variant here. We have total of 4 types for you to choose: Dropdown, Image picker, Color picker, Radio button.
• Set your color Here: You can install the Custom swatch colors extension and configure the Variant color. Click “Here” link to explore more.
• Option show as swatch: Insert the option name that you wanna show as swatch here. Example: Color. And please keep in mind that this is the Variant name that you configure for your Products in the Shopify backend.
• Other options as: Choose the type for other variants here. You can show those variant options in Dropdown type or Radio type.
• Show option selected: Tick on this checkbox to show the variant name that was picked next to the variant name.
• Show option name: Tick on this checkbox to show the variant name. If you uncheck this checkbox, the Variant name will be hidden.
• Vertical/Horizontal spacing: Configure the vertical/horizontal space for the Variant here. This option is available for desktop, tablet, and mobile devices.

View the video below to know how to configure the Content tab for the Product Variant:

3. Design

3.1. General

• Alignment: Allow you to align the Variant Picker element here. You can choose Align Left, Align Right or Align Center. This option is available for desktop, tablet, and mobile devices.
• Background: Configure the background color for the Variant Picker element here.
• Box Shadow: Allow you to add a shadow for the Variant Picker element by changing the Blur, Horizontal, Vertical, etc…
• Border: Choose border style for the Variant Picker element here. You also can choose None style to disable the border.
• Border Radius: Allow you to configure the border radius for the Variant Picker element, available for desktop, tablet, and mobile devices, available for desktop, tablet, and mobile devices.

3.2. Variant Name, Variant Value, Color Picker, Dropdown

These all have settings like Typography, Text Color, Text Shadow and Spacing and more here.

You can click here to learn more about How to configure options in the Design tab.

Note: You can configure the style of some design setting on both of Normal and Focus/Hover mode.

View the video below to know how to configure the Design tab for the Product Variant: