# Design customization

The Variant Drawer supports over 25 design tokens that control every visual aspect of the drawer. Changes are reflected instantly in the admin preview and applied to the storefront via CSS custom properties.

***

## How design tokens work

1. You customize colors, sizes, and borders in the **Design** section of the rule editor.
2. When you save, the design settings are stored in a Shopify metafield.
3. On the storefront, the Liquid template reads the metafield and applies the design as CSS variables — **zero extra API calls**, so the drawer renders with the correct styling immediately on open.

***

## Design tokens reference

### Drawer shell

| Token                 | CSS variable                  | Default   | Description                           |
| --------------------- | ----------------------------- | --------- | ------------------------------------- |
| **Drawer background** | `--vd-drawer-bg`              | `#ffffff` | Background color of the entire drawer |
| **Header border**     | `--vd-drawer-header-border`   | `#e1e3e5` | Bottom border of the drawer header    |
| **Title color**       | `--vd-drawer-title-color`     | `#1a1a1a` | Color of the drawer title text        |
| **Title font size**   | `--vd-drawer-title-font-size` | `16px`    | Font size of the drawer title         |

### Option swatches

| Token                    | CSS variable                       | Default   | Description                                |
| ------------------------ | ---------------------------------- | --------- | ------------------------------------------ |
| **Swatch border**        | `--vd-option-swatch-border`        | `#c9cccf` | Border color of unselected option swatches |
| **Swatch active border** | `--vd-option-swatch-active-border` | `#1a1a1a` | Border color of the selected/active swatch |

### Variant rows

| Token                     | CSS variable                  | Default   | Description                                          |
| ------------------------- | ----------------------------- | --------- | ---------------------------------------------------- |
| **Row divider**           | `--vd-variant-divider`        | `#f1f1f1` | Border between variant rows                          |
| **Variant title color**   | `--vd-variant-title-color`    | `#1a1a1a` | Color of the variant badge/name                      |
| **Retail price color**    | `--vd-variant-retail-color`   | `#6d7175` | Color of the struck-through retail price             |
| **Wholesale price color** | `--vd-variant-wholesale`      | `#1a1a1a` | Color of the current/wholesale price                 |
| **Discount badge color**  | `--vd-variant-discount-color` | `#d82c0d` | Color of the discount percentage badge (e.g. "-20%") |

### Quantity stepper

| Token                  | CSS variable              | Default   | Description                              |
| ---------------------- | ------------------------- | --------- | ---------------------------------------- |
| **Stepper border**     | `--vd-qty-stepper-border` | `#c9cccf` | Border of the quantity stepper control   |
| **Stepper background** | `--vd-qty-stepper-bg`     | `#ffffff` | Background of the quantity stepper input |

### Footer

| Token                | CSS variable          | Default   | Description                        |
| -------------------- | --------------------- | --------- | ---------------------------------- |
| **Footer border**    | `--vd-footer-border`  | `#e1e3e5` | Top border of the footer area      |
| **Subtotal color**   | `--vd-subtotal-color` | `#1a1a1a` | Color of the subtotal text         |
| **Validation color** | `--orb2b-error-color` | `#d82c0d` | Color of validation error messages |

### Action buttons

| Token                           | CSS variable                 | Default   | Description                                             |
| ------------------------------- | ---------------------------- | --------- | ------------------------------------------------------- |
| **Primary button background**   | `--vd-action-primary-bg`     | `#1a1a1a` | Background of the primary action button (Add to Cart)   |
| **Primary button text**         | `--vd-action-primary-text`   | `#ffffff` | Text color of the primary action button                 |
| **Secondary button background** | `--vd-action-secondary-bg`   | `#ffffff` | Background of the secondary action button (Start Order) |
| **Secondary button text**       | `--vd-action-secondary-text` | `#1a1a1a` | Text and border color of the secondary action button    |
| **Button border radius**        | `--vd-action-border-radius`  | `8px`     | Corner rounding of all action buttons                   |

### MOQ notice

| Token                 | CSS variable      | Default   | Description                               |
| --------------------- | ----------------- | --------- | ----------------------------------------- |
| **Notice background** | `--vd-moq-bg`     | `#fff8e1` | Background color of the MOQ notice banner |
| **Notice border**     | `--vd-moq-border` | `#ffe18b` | Border color of the MOQ notice banner     |
| **Notice text**       | `--vd-moq-text`   | `#6e4e00` | Text color of the MOQ notice banner       |

### Trigger button

| Token                     | CSS variable                 | Default   | Description                                          |
| ------------------------- | ---------------------------- | --------- | ---------------------------------------------------- |
| **Trigger background**    | `--vd-trigger-bg`            | `#1a1a1a` | Background of the trigger button on the product page |
| **Trigger text**          | `--vd-trigger-text`          | `#ffffff` | Text color of the trigger button                     |
| **Trigger border radius** | `--vd-trigger-border-radius` | `8px`     | Corner rounding of the trigger button                |

### Custom CSS

| Token          | Description                                                                                                                                       |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Custom CSS** | Free-form CSS injected into the drawer root. Use this for advanced customizations beyond the token system. Target classes with `.orb2b-` prefixes |

***

## Using the design editor

1. Open the Variant Drawer rule in the editor
2. Navigate to **Design** in the left sidebar
3. Click on any color swatch to open the color picker
4. Adjust numeric values (font size, border radius) with the number inputs
5. Add custom CSS in the text area at the bottom if needed
6. The live preview in the center canvas updates in real time
7. Click **Save** to apply changes to the storefront

***

## Design and the live preview

The admin preview uses the exact same CSS variable names and class names as the storefront. What you see in the preview is a 1:1 match with the live storefront — including the option swatches, variant rows, quantity steppers, footer, and action buttons.

***

## Tips

* To match your store's brand, start by setting the **Primary button background** to your brand color.
* Use **Custom CSS** sparingly. The token system covers most customization needs. Custom CSS is injected as a `<style>` tag inside the drawer and scoped to the drawer root.
* The **Discount badge** only appears when a variant has a compare-at price higher than the selling price. Customize its color to make it stand out or blend in.
* Design settings are synced to a metafield on every save, so storefront rendering is instant — no JavaScript fetch needed for initial styling.


---

# 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/design.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.