Variant selector

Easily customize how shoppers select product variants with flexible styles like dropdowns, pills, color swatches, or image swatches, plus advanced options for layout, borders, and device-specific visibility to boost engagement and accessibility on any storefront.

Last updated 2 months ago

Overview

The Variant selector block makes product variant selection clear and effortless. Shoppers can pick styles, colors, or sizes with dropdowns, pill buttons, and visually recognizable swatches. Whether you prefer a sleek dropdown or colorful swatches, this block offers powerful options to match your site’s style and enhance usability. With flexible layout and visibility controls, the Variant selector boosts discoverability, improves accessibility, and drives customer confidence throughout the product experience.

📝 Note: The Variant selector block offers flexible layouts and robust accessibility, especially benefitting shops with customizable or multi-option products.

Variant selector style

This group controls the display style for product variants, helping you craft an interface to suit your design, audience, and user goals. Choose from simple dropdowns or modern pill styles.

  1. Select a variant style:

    1. Dropdown — Compact and familiar (default)

    2. Pills — Each option appears as a clickable, pill-shaped button

  2. Choosing the right variant selector style can improve clarity and speed of selection.

💡 Tip: Use pills to highlight key product differences, or opt for a dropdown to keep layouts compact on crowded or mobile screens.

Visibility settings

Select when the Variant selector block appears so each device gets the best layout. Optimizing visibility for desktop and mobile prevents clutter or redundancy and maximizes customer experience.

  1. Display visibility

    1. Options to control block appearance:

      1. Do not hide — Always visible (default)

      2. Hide on desktop — Only visible on mobile layouts

      3. Hide on mobile — Only visible on desktop layouts

📝 Note: Take care when hiding the block, as it may prevent some customers from selecting their product variants on certain devices.

Available in sections

You can add the Variant selector block to these sections:

  1. Featured product

  2. Product information

Usage notes

  1. Use image swatches only with sharp, optimized images to improve speed and clarity.

  2. Mixing color swatches, image swatches, and standard selectors allows customization for varied shopper preferences and screen sizes.

💡 Tip: Combining visual swatches with clear labels allows faster, more confident decision-making, and works well for accessibility and usability.