Variant Selector Display Options on Product Page

Modified on Fri, 20 Mar at 3:51 AM

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:

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.

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
.

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.

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.

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?

Open your
Store Builder
and edit the Product Details Page.
Select the
Product Element
.
In the settings panel, locate
Variants styling
.
Choose between
Dropdown
or
Pills
display.
If using Pills, customize the color styles for selected and unselected states.
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
.

Images: