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:
