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
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)
When a matching customer visits a product page, the drawer trigger appears based on your chosen display mode.
The customer opens the drawer, selects quantities per variant, and submits the order.
Key features
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
Last updated
Was this helpful?