# 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](/orbit-b2b-docs/variant-drawer/labels-translations.md).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://orbit-b2b.gitbook.io/orbit-b2b-docs/variant-drawer/display-modes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.