Variant picker

Variant picker block allows customers to select product variants (e.g., size, color) in a user-friendly manner.

Settings:

1. Desktop variant style: Choose between Dropdown or Buttons layouts.

Dropdown

Variant options appear as dropdown menus.

Buttons

1. Button layout: Only applies when variant style is set to "Buttons".

   • Default: Full-width layout.

   • 2 Columns: Buttons arranged in two equal-width columns.

   • 3 Columns: Buttons arranged in three equal-width columns.

2. Swatches: let customers see and select color or pattern options visually. Navigate to “Theme settings → Swatches” to configure swatch appearance.

   • Enable swatches: Toggle to display swatches for color or pattern variants.

   • Size:

     • Regular: Default swatch size.

     • Large: Bigger swatch for better visibility.

3. Size guide: adds a link to a size chart for relevant variant types (like Size or Fit).

   • Enable popup link: Displays a clickable "Size Guide" link beside relevant variants.

   • Variant trigger name(s): Enter the names of variant options that should trigger the size guide popup (e.g., Size, Taille). Use commas to separate multiple names.

   • Link label: Text shown for the link (e.g., “Size Chart”).

   • Page: Choose the page that the size guide link should open.

4. Mobile layout:

• Mobile variant style: Offers the same layout choices as Desktop settings: Dropdown and Buttons.