Variant Selector Display Options on Product Page

What’s New?

We’ve introduced flexible display options for product selectors on the Product Details Page (PDP), giving merchants better control over how customers choose product variants and pricing options. The selector UI is now more visual, consistent, and optimized across devices.

Key enhancements include:

  1. Variant Picker Style Options
  • Merchants can now choose how variants appear on the PDP.

  • Two display formats are available: 

    Dropdown

     or 

    Pills

    .

  • The Pills layout shows all options clearly, improving discoverability and making selection more intuitive for customers.
  1. Unified Selector Experience
  • Variant selectors, quantity pickers, upsell options, and multi-price selectors now follow a consistent UI pattern across desktop and mobile.

  • The same selector behavior is reflected in both 

    Page Builder

     and 

    Builder Preview

    .

  1. Price Selector Styling Alignment

  • Multi-price selectors now follow the same 

    pills

     or 

    dropdown configuration and styling behavior

     used for variant selectors.

  • Ensures consistent design across all selection components.
  1. Improved Rendering & Mobile Fixes

  • Fixed issues where 

    multi-price selectors were not rendering correctly

     in some scenarios.

  • Resolved mobile dropdown popup positioning issues to improve usability.
  1. Quantity Selector Updates

  • Quantity color customization is now available 

    only when using the Pills style

    , simplifying configuration and ensuring consistent design behavior.

How to Use It?

  1. Open your 

    Store Builder

     and edit the Product Details Page.

  2. Select the 

    Product Element

    .

  3. In the settings panel, locate 

    Variants styling

    .

  4. Choose between 

    Dropdown

     or 

    Pills

     display.

  5. If using Pills, customize the color styles for selected and unselected states.
  6. Save and publish your changes.

Key Points to Note:

  • Dropdown remains the 

    default variant display format

     for existing stores.

  • The Pills style shows all variant options visually and supports 

    single selection per variant group

    .

  • The selector UI now behaves consistently across 

    variants, pricing options, quantity selectors, and upsells

    .

  • Improvements apply to both 

    desktop and mobile storefront experiences

    .