How to Customize Product Selector Styles on Your Storefront

About Product Selector Styling

Product selector styling allows you to control how customers interact with choices on a product details page. This includes options for product variants, pricing plans, quantities, and upsell items. By selecting a display format that suits your products, you can create a clearer and more intuitive shopping experience that aligns with your store's design.

Available Selector Styles

Your CRM offers two primary styles for displaying product choices: Dropdown and Pills.

Dropdown Style

This style presents options within a compact, collapsible menu. It is the default setting for existing stores.

• Best for: Products with many variant options, maintaining a traditional selection method, or keeping the page layout more condensed.

Pills Style

This style displays all available options as selectable, button-like choices directly on the page.

• Best for: Products with fewer options, stores wanting a more visual and immediate selection experience, or when making all choices highly visible is a priority.
• Note: Only one option can be selected per variant group (e.g., one size, one color). Customizing the colors for the quantity selector is only available when the Pills style is active.

How to Configure Selector Styles

Follow these steps to change how product options are displayed on your storefront.

1. Open your Store Builder within the CRM.
2. Navigate to and edit the Product Details Page.
3. Click on the main Product Element on the page.
4. In the settings panel that appears, find the setting labeled Variants styling.
5. Choose your preferred display style: either Dropdown or Pills.
6. Use the Builder Preview to review how the product details page looks and functions with your new style selection.
7. Once satisfied, save and publish your changes.

Important Notes and Behavior

• Changing to the Pills style will visually show all variant options on the page.
• Multi-price selectors (for different pricing plans) will adopt the same Dropdown or Pills style you configure for variants.
• The selector styles and their behavior are optimized and visible on both desktop and mobile storefronts.
• When a customer selects a product variant, the system will automatically switch to the image assigned to that specific variant, if one exists. If no image is assigned to the chosen variant, the displayed image will not change. Note that manually selecting a different product image will not change the selected variant.