figma guide
Designing mini cart and cart drawer UI in Figma: slide-over patterns, line items, and handoff
Design mini cart and cart drawer UI in Figma with slide-over panels, line items, quantity controls, subtotals, and Dev Mode specs that pair with checkout and shipping bars.
- Published
- Updated
- Jul 02, 2026
- Read time
- 7 min
- Level
- Beginner
Quick answer
A mini cart (cart drawer) is a slide-over panel that shows current line items, quantity controls, subtotal, and checkout CTAs without leaving the page. Trigger it from the header cart icon with a badge count. Stack line items (thumbnail, title, variant, price, qty stepper, remove), optional free shipping progress, subtotal + savings, and primary checkout + secondary “View cart” buttons. Design empty, loading, error, and max-quantity states. On mobile, use full-height or bottom sheet patterns with safe-area padding. Start from the Figma guides hub and templates pillar.
Who this is for
- Product designers improving add-to-cart flow on PLP, PDP, and marketing pages.
- Design system teams standardizing cart drawer behavior across desktop and mobile.
- Engineers implementing slide-over focus traps, cart sync, and analytics on open/close.
Mini cart vs full cart page
| Surface | When to use | Primary action |
|---|---|---|
| Cart drawer | Quick review after add-to-cart | Checkout or continue shopping |
| Full cart page | Edit large carts, apply coupons, compare totals | Checkout |
| Checkout | Payment and shipping | Place order |
| Sticky bar only | Mobile PDP scroll context | Add to cart (opens drawer) |
Verdict: the drawer is for speed and confirmation; route power users to the full cart page for coupon entry and detailed edits.
CartDrawer anatomy
| Part | Spec | Notes |
|---|---|---|
| Header | ”Cart (3)” + close button | Title includes live count |
| Line item list | Scrollable stack | Max height ~60vh desktop |
| Shipping meter | Optional ShippingProgressBar | Top of list or above subtotal |
| Promo row | Link to full cart for coupons | Avoid cramped coupon field in v1 |
| Subtotal block | Subtotal, savings, estimated tax note | ”Tax calculated at checkout” |
| CTA stack | Primary checkout + secondary view cart | Full-width buttons |
| Footer trust | Secure checkout icons | One row max |
| Backdrop | Dimmed overlay | Click closes drawer |
CartDrawer
├── Variant: state=empty | loading | populated | error
├── Variant: platform=desktop | mobileSheet
├── Property: itemCount=3
├── Property: subtotal=142.50
└── Layers:
├── Backdrop
├── Panel
│ ├── Header (Title + Close)
│ ├── LineItemList
│ │ └── CartLineItem (repeat)
│ ├── ShippingProgressBar (optional)
│ ├── SummaryBlock
│ ├── CheckoutButton
│ └── ViewCartLink
└── FocusTrap (annotation)Use Auto Layout for the panel with fixed header/footer and scrollable middle. Apply effects tokens for elevation—drawer should sit above modals only when intentionally layered.
CartLineItem component
| Element | Spec | Notes |
|---|---|---|
| Thumbnail | 64–80px square, radius sm | Link to PDP |
| Title | 2-line clamp | Product name |
| Variant line | Size / color / subscription | Link to variant selectors |
| Price | Unit or line total | Show strike if on sale |
| Qty stepper | − / count / + | Min 1; max from inventory |
| Remove | Icon or text link | Confirm if qty > 5 (optional) |
| Badge | Subscription, gift, preorder | Use chips |
CartLineItem
├── Variant: layout=standard | compact
├── Variant: type=standard | subscription | bundle
├── Property: quantity=2
├── Property: maxQuantity=10
└── Layers:
├── ThumbnailLink
├── DetailsColumn
│ ├── Title
│ ├── VariantMeta
│ └── PriceRow
└── ActionsColumn
├── QuantityStepper
└── RemoveActionPrototype qty change with interactive components and disabled + state at max inventory.
Header cart trigger
| Element | Spec | Notes |
|---|---|---|
| Icon | Bag or cart outline | 24px touch target min 44px |
| Badge | Count bubble | Hide at 0; cap display “9+“ |
| Open behavior | Click opens drawer | Do not navigate away |
| Add feedback | Brief badge pulse or toast | ”Added to cart” optional |
Keep badge count in sync with drawer list—stale counts erode trust faster than a slow animation.
Layout comparison
| Pattern | Best for | Trade-off |
|---|---|---|
| Right slide-over (desktop) | Most storefronts | Covers content; needs focus trap |
| Full-height mobile sheet | Thumb reach, long carts | More screen takeover |
| Bottom sheet (mobile) | Quick peek at 1–2 items | Less room for upsells |
| Center modal cart | Legacy themes | Worse for long line lists |
| Inline dropdown cart | Header-heavy sites | Breaks on mobile |
On mobile frames, anchor CTAs above the home indicator with 16px+ bottom padding.
State matrix
| State | Trigger | UI |
|---|---|---|
| Empty | itemCount === 0 | Illustration + “Your cart is empty” + shop CTA |
| Loading | Cart hydrating | Skeleton lines |
| Populated | Items present | Full layout |
| Updating qty | API in flight | Stepper disabled + subtle spinner |
| Max qty | At inventory cap | Disabled +; tooltip |
| Error | Sync failed | Inline alert + retry |
| Subscription mixed cart | Recurring + one-time | Label lines per subscription UI |
Design empty cart with link to category landing or bestsellers—not a dead end.
Interaction with adjacent modules
| Module | Relationship |
|---|---|
| Free shipping bar | Recalculate on qty change inside drawer |
| Sticky add-to-cart | Add opens or refreshes drawer |
| Coupons | Link “Have a code?” → full cart |
| Recommendations | Optional rail below line items |
| Checkout | Primary CTA preserves cart state |
| Wishlist | ”Move to wishlist” on line item menu |
Avoid stuffing compare, gift message, and coupon field into v1 drawer—each adds scroll and error surface.
Motion and accessibility
| Concern | Spec |
|---|---|
| Enter animation | Slide from right 250–300ms ease-out |
| Exit | Reverse or fade backdrop |
| Reduced motion | Instant open/close; no slide |
| Focus | Trap focus inside panel; return on close |
| Close | Esc, backdrop click, close button |
| Scroll lock | Body scroll disabled while open |
| Screen reader | role="dialog", aria-modal="true", label “Shopping cart” |
Document focus order: close → first line item → checkout → view cart.
Handoff checklist
| Item | Dev Mode annotation |
|---|---|
| Open trigger | Header icon + programmatic open after ATC |
| Data source | Cart API / local optimistic state |
| Qty debounce | 300–500ms before PATCH |
| Remove behavior | Animate out; update badge |
| Subtotal rules | Pre-tax; document discount order |
| Checkout URL | Preserve session + UTM |
| Analytics | cart_drawer_open, cart_drawer_checkout_click, line_item_qty_change |
| Breakpoints | Drawer width 400–480px desktop; full width mobile |
| z-index | Above header; below global modals if stacked |
Use Dev Mode checklist and responsive constraints.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| Navigating to cart page on icon click | Breaks browse flow | Open drawer instead |
| No empty state | Dead end after last remove | Shop CTA + categories |
| Coupon field crammed in drawer | Validation errors off-screen | Link to full cart |
| Stale badge count | Trust issue | Sync on every mutation |
| Drawer taller than viewport, no scroll | Hidden checkout | Fixed footer CTA |
| Opening drawer on every page load | Annoying | Only after explicit add |
| Missing focus trap | Keyboard users escape to background | Implement dialog pattern |
| Showing full tax in drawer | Wrong when address unknown | ”Calculated at checkout” |
Recommended workflow
- Audit cart flows on PLP, PDP, and header—list every add-to-cart entry point.
- Build
CartLineItemwith standard, subscription, and compact variants. - Compose
CartDrawerwith empty, loading, populated states. - Add header trigger with badge and open prototype.
- Integrate shipping progress if threshold promos exist.
- Spec motion, focus, and analytics in Dev Mode.
- Mobile pass at 375px with bottom CTA and safe areas.
- Align checkout handoff with full cart page for coupon and gift flows.
FAQ
Should add-to-cart auto-open the drawer?
Yes for confirmation-first stores; no for high-frequency B2B where designers add many SKUs. Default to open on PDP; optional setting on PLP quick-add.
Show upsell recommendations in the drawer?
Only if one horizontal rail fits without pushing checkout below fold on mobile. Otherwise place recommendations on full cart page.
Guest vs logged-in drawer?
Same layout. Logged-in users may see saved cart merge toast if session sync occurs—design a one-line alert.
Drawer vs quick view?
Quick view edits selection; drawer confirms cart contents. After quick-view add, open drawer or toast—pick one pattern sitewide.
Next steps
- Design shopping cart and checkout UI in Figma — full page cart and checkout summary
- Design free shipping progress bar UI in Figma — threshold meter inside drawer
- Design sticky add-to-cart bar UI in Figma — PDP trigger into drawer
- Design product detail pages in Figma — primary add-to-cart source
- Design modals and dialogs in Figma — focus trap and overlay patterns
§ Keep reading