Variant

Variants can let you offer different versions of a product, such as sizes and colors, so customers can find exactly what they want. A list of variants available for a product is a must-have feature displayed on its product details page.

Drag and drop the Product Variant from the left sidebar to any position you would like.

1. Content

1.1 Picker type

Pick a type of layout that you wanna use for the Variant here. We have a total of 5 types for you to choose from: Dropdown, Image picker, Color picker , Radio button, and Shopify Color

• Dropdown: clicking the dropdown displays a list downward. For more than 5 options or to save space, standard dropdown menus are often preferred. You can change the design of this dropdown, such as font, color, width,.. in Design tab -> Dropdown.

Note: If you don’t want the arrow when utilizing the dropdown style, you can select Hide dropdown arrow option.

• Image picker: variant images are photos specifically assigned to a product’s available options, such as color, size, or material. When a customer selects a specific variant (e.g., a Red t-shirt instead of a Blue one), the image automatically updates to reflect that selection. This makes the product pages feel more professional and easier to shop.
  + To adjust image picker’s design, you can change the width and height of the image, image fit, opacity, borders…

+ Option show as swatch: Insert the option name that you wanna show as a swatch here. Example: Color. If you have different variants for your products, you can fill in this option with more than one name. For example, “Color,Material”

Please keep in mind that this is the Option name that you set up for your Products in the Shopify backend.

• Color picker: A setup where some attributes (like color) are shown as visual pills or buttons. The key design options include width, height, border radius,…

Furthermore, you have to install the “Custom Color Swatches” extension and configure the Variant color. Click “here” link to explore more about that extension.

• Radio button: Allows users to select one option from a set of available choices. Use radio buttons when users need to view all available options before making a selection. Unlike a color picker, radio buttons display text labels instead of visual color options.

• Other options: Combine 2 types of picker if you want. You can show those variant options in Dropdown type or Radio type for other variants here.

1.2 Product variant display.

• Disable unavailable variants: The alternative will be fuzzy and not clickable while that variant is unavailable.
• Disable sold-out variants: The variant would be highlighted with a cross/slass or hidden and unclickable when the variant is sold out.

• Show option selected: Show the variant name that was picked next to the variant name.
• Show option name: Show the variant name. If you uncheck this checkbox, the Variant name will be hidden.

To change the design of the option name and variant name, you can go to Design tab -> Variant name and Variant value.

1.3 History state on URL

Each variant has an ID. The URL at the top bar will change when you select a different variant based on the one you just made.

Result:

1.3 Vertical/Horizontal spacing

Configure the vertical/horizontal space for the Variant here. This option is available for desktop, tablet, and mobile devices.

2. Design

2.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: Allows you to add a shadow for the Variant Picker element by changing the Blur, Horizontal, Vertical, etc…
• Border: Choose the border style for the Variant Picker element here. You also can choose the None style to disable the border.
• Border Radius: Allows 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.

2.2. Variant and Option style

These all have settings like Typography, Text Color, Text Shadow, Spacing, and further with the Width + Height setting for the Varaint Image. Also, you can click here to learn more about How to configure options in the Design tab.

You can configure the style of some design settings on both Normal and Focus/Hover modes.