Variant

Author: Henry Pham 273 views

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

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. 

With Variant element, you can build some layouts below:

Product Variant style 1
Product Variant style 2
Product Variant style 3

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. This extension is for free now. 
  • 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

  • Typography: This option allows you to customize the Font-size, Font-weight, Font-family, Line Height, Text-transform, etc… for the Variant name here.
  • Text Color: Configure the color for the Variant name here.
  • Text Shadow: Allow you to add a shadow for the Variant name by changing the Blur, Horizontal, Vertical, etc…
  • Spacing: Set the spacing (by the way increase margin/ padding) between the Variant name and other options here. This option is available for desktop, tablet, and mobile devices.

3.3. Variant Value

You can configure all settings on this option same as the Variant Name option.

3.4. Color Picker

  • Width: Configure the Width of the Variant Color Picker here.
  • Height: Configure the Height of the Variant Color Picker here.
  • Background, Box Shadow, Border, Border Radius, Spacing options: you guys can configure those options above same as the General option.

Note: You can configure the style of the Color Picker on Normal, Hover and Active mode.

3.5. Dropdown

  • Alignment: Allow you to align the Variant Dropdown. You can choose Align Left, Align Right or Align Center. This option is available for desktop, tablet, and mobile devices.
  • Typography: This option allows you to customize the Font-size, Font-weight, Font-family, Line Height, Text-transform, etc… for the Variant Dropdown here.
  • Color: Configure the color for the Variant Dropdown text here.
  • Width: Configure the Width for the Variant Dropdown here.

  • Background, Box Shadow, Border, Border Radius, Outline, Transition, Spacing options: You guys can configure those options above the same as the General option.

Click here to learn more about How to configure options in the Design tab.

Note: You can configure the style of the Variant Dropdown on both of Normal and Focus mode.

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

Leave a Comment

On this page