Variant Selector Display Options on Product Page

/in

We’ve introduced flexible display options for product selectors on the Product Details Page (PDP), providing merchants with enhanced control over how customers select product variants and pricing options. The selector UI is now more visual, consistent, and optimised for various devices.

Key Enhancements Include:

  1. Variant Picker Style Options

  • Merchants can now decide how variants are displayed on the PDP.
  • Two display formats are available:

    Dropdown

    or

    Pills

    .

  • The Pills layout clearly showcases all options, enhancing 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 both desktop and mobile.
  • The same selector behaviour is reflected in both

    Page Builder

    and

    Builder Preview

    .

  1. Price Selector Styling Alignment

  1. Improved Rendering & Mobile Fixes

  1. Quantity Selector Updates

  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 either

    Dropdown

    or

    Pills

    display.

  5. If using Pills, customise the colour styles for selected and unselected states.
  6. Save and publish your changes.
  • Dropdown remains the

    default variant display format

    for existing stores.

  • The Pills style visually presents all variant options 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

    .

image
image
image