# Overview

The Variant Drawer replaces the standard product variant selector with a full-screen slide-out drawer. Customers can see all available variants at once, adjust quantities per variant, and add everything to cart in one action — ideal for B2B buyers who order multiple sizes, colors, or styles at once.

***

## How it works

1. You create a **Variant Drawer rule** and define:
   * **Who** sees the drawer (customer targeting)
   * **What** products show the drawer (product targeting)
   * **How** it appears (display mode, design, labels)
   * **Constraints** (minimum/maximum quantities)
2. When a matching customer visits a product page, the drawer trigger appears based on your chosen display mode.
3. The customer opens the drawer, selects quantities per variant, and submits the order.

***

## Key features

| Feature                       | Description                                                                                       |
| ----------------------------- | ------------------------------------------------------------------------------------------------- |
| **Multi-variant ordering**    | Customers select quantities for every variant (size, color, etc.) in a single drawer              |
| **Grouped variant display**   | For 2-option products (e.g. Color + Size), variants are grouped by the first option with swatches |
| **MOQ & max quantity**        | Enforce minimum order quantities per variant, per product total, and maximum per variant          |
| **Multiple display modes**    | Open on variant swatch click, as a secondary button, replace Add to Cart, or as a floating button |
| **Action buttons**            | Configurable Add to Cart and Start Order buttons with more actions coming (Inquiry, Chat)         |
| **Full design customization** | 25+ design tokens to control colors, borders, fonts, and spacing — plus custom CSS                |
| **Per-locale labels**         | Translate drawer title, button labels, and action text into every language your store supports    |
| **Zero-latency styling**      | Design settings are stored in metafields and read directly in Liquid — no extra API calls         |
| **Live admin preview**        | Preview the drawer in the app with real product data from your store                              |
| **Priority system**           | When multiple rules match, the highest priority wins                                              |

***

## Storefront display

The Variant Drawer has two main areas:

### Drawer body

* **Option swatches** — For 2-option products, the first option (e.g. Color) shows as clickable swatches. Selecting a swatch filters the variant list below.
* **Variant rows** — Each row shows the variant name/badge, price (with compare-at price and discount badge if applicable), and a quantity stepper.
* **MOQ notice** — If minimum quantities are configured, a notice banner appears at the top of the body.

### Drawer footer

* **Subtotal** — Shows the running total and piece count as the customer adjusts quantities.
* **Action buttons** — Add to Cart (primary) and Start Order (secondary) buttons. Each can be individually enabled/disabled.

***

## Requirements

* Shopify Online Store 2.0 theme
* The **Variant Drawer Trigger** app block must be added to your product page template in Theme Editor
* Customer targeting with tags or groups requires customers to be logged in

***

## Related guides

* [Create a rule](/orbit-b2b-docs/variant-drawer/create-rule.md)
* [Display modes](/orbit-b2b-docs/variant-drawer/display-modes.md)
* [Order constraints (MOQ & max)](/orbit-b2b-docs/variant-drawer/order-constraints.md)
* [Design customization](/orbit-b2b-docs/variant-drawer/design.md)
* [Labels & translations](/orbit-b2b-docs/variant-drawer/labels-translations.md)
* [Add to your storefront](/orbit-b2b-docs/variant-drawer/storefront.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/overview.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.