Display modes

The display mode controls how the Variant Drawer is triggered on the product page. Choose the mode that best fits your store's layout and customer experience.

---

Available modes

Open on variant click

Value: swatch_click

The drawer opens automatically when a customer clicks on any variant option swatch on the product page. This replaces the native variant selection behavior with the full drawer experience.

Best for: Stores that want a seamless B2B ordering experience without adding extra buttons. Customers interact with the existing variant swatches and get the multi-quantity drawer instead of the standard single-variant selector.

How it works:

1. Customer visits a product page
2. Customer clicks a variant swatch (e.g. a color or size option)
3. The Variant Drawer slides open from the right
4. Customer selects quantities for each variant and submits

---

Button next to Add to Cart

Value: button_secondary

A secondary button appears alongside the theme's existing Add to Cart button. The original Add to Cart button remains functional for single-variant purchases.

Best for: Stores that want to offer both single-item and bulk ordering on the same page. Retail customers use the normal Add to Cart; B2B customers use the drawer button.

---

Replace Add to Cart button

Value: button_replace

The theme's Add to Cart button is replaced entirely with a button that opens the Variant Drawer. Customers must use the drawer for all purchases.

Best for: Pure B2B stores where every order should go through the multi-variant drawer.

Warning: This mode can conflict with heavily customized themes that modify the Add to Cart button with JavaScript. Test thoroughly on your theme before enabling for customers.

---

Floating sticky button

Value: sticky_floating

A floating button appears at a fixed position on the screen (typically bottom-right) that follows the customer as they scroll. Clicking it opens the drawer.

Best for: Stores with long product pages or custom layouts where the Add to Cart area may not always be visible.

---

Changing the display mode

1. Open the Variant Drawer rule in the editor
2. Navigate to Display & Actions in the left sidebar
3. Select your preferred mode from the Display mode dropdown
4. The live preview updates to reflect the selected mode
5. Click Save

---

Button labels

Regardless of display mode, you can customize the text on the trigger button via Labels → Trigger button label. The default text depends on the mode but can be overridden per locale. See Labels & translations.