Product Variants

Updated 21 days ago

The Product Variants section allows users to select different options for a product, such as size, color, or style. This is a critical part of the product page, as it directly impacts the purchasing experience.

Visibility

  • Enable or Disable – Use the eye icon to show or hide the section

  • Delete – Remove the section if it’s no longer needed

Display Settings

Control how variant options are presented.

Style – Choose between:

  • Radio Button – Displays options as selectable buttons

  • Dropdown – Displays options in a dropdown menu

Quantity Selector – Turn this on or off to allow users to choose product quantity

Label Style

This controls how the variant label (e.g., “Size”, “Color”) appears.

You can customize:

  • Font – Choose a font that matches your brand

  • Size/Weight – Adjust how bold or subtle the text appears

  • Line Height – Control spacing between lines

  • Letter Spacing – Fine tune spacing between characters

  • Text Color – Choose a readable color

  • Capitalization – Set how the text appears

Variants

This section controls how the variant options themselves are styled.

Text Style:

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Active Color – Color for selected variant

  • Inactive Color – Color for unselected variants

  • Unavailable Color – Color for unavailable options

  • Capitalization

Background:

  • Selected Color – Background for selected variant

  • Unselected Color – Background for unselected variants

  • Radius – Adjust corner roundness

  • Padding – Control spacing inside each option

Border:

  • Selected Color – Border color for selected variant

  • Unselected Color – Border color for unselected variants

  • Width – Adjust thickness

Background and Spacing

This controls the layout of the entire variants section.

Background:

  • Color – Set the section background color

  • Radius – Adjust corner roundness

  • Padding – Control spacing inside the section

  • Margin – Manage spacing outside the section

Border:

  • Color – Choose border color

  • Width – Adjust thickness

  • Sides – Select which sides should display the border

Benefits:

  • Prevents purchase confusion and drop-offs

  • Improves conversion rates with better selection UX

  • Supports inventory transparency

Related Articles

Announcement bar

1 min read

Button

2 min read

Image Block

1 min read

Image Banner

1 min read