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.