Overlay Cart Drawer

Theme: Multipurpose Fashion Theme

Overview

The Cart Drawer is a slide-out panel that shows the shopping cart when customers click the cart icon. It appears from the right (or configurable side), displays line items, quantities, totals, recommendations, and a checkout button. It replaces the full cart page when Theme settings > Cart > Cart type is set to Drawer or Dropdown.

Where It Appears

Header - Cart icon opens the drawer
Product cards - Add to cart may open drawer when cart type is drawer/dropdown
Anywhere with data-cart-drawer or quick add that triggers cart

Files

File	Purpose
`snippets/cart-drawer.liquid`	Drawer markup, items, recommendations, note, checkout
`sections/cart-drawer.liquid`	Section that renders the drawer snippet
`layout/theme.liquid`	Renders cart drawer when `cart_type` is drawer or dropdown
`assets/theme.js`	CartDrawer initialization
`assets/section-header.js`	Opens/closes drawer from header cart icon

Structure

cart-drawer (data-cart-drawer, data-enabled="true")
├── Overlay button (data-cart-drawer-close) - click to close
├── Aside panel (id="CartDrawer", role="dialog", aria-modal="true")
│   ├── Header (title, close button)
│   ├── Body (data-cart-drawer-body)
│   │   ├── Empty state (data-cart-empty)
│   │   ├── Items (data-cart-items)
│   │   ├── Recommendations ("Complete the look")
│   │   ├── Order note (optional)
│   │   └── Checkout button
│   └── Footer (totals)

Data Attributes

Attribute	Element	Purpose
`data-cart-drawer`	Root	Identifies cart drawer
`data-enabled`	Root	"true" when cart type is drawer or dropdown
`data-cart-drawer-close`	Overlay, close button	Closes drawer
`data-cart-drawer-body`	Body	Cart content container
`data-cart-empty`	Empty state	Shown when cart has 0 items
`data-cart-items`	Items list	Line items container

Theme Setting

Setting	Path	Effect
Cart type	Theme settings > Cart	Page = full cart page; Drawer or Dropdown = cart drawer

Behavior

Opening

Customer clicks cart icon in header (when cart type is drawer/dropdown)
Cart may be fetched/updated via AJAX
Drawer slides in from the right
Overlay appears behind it
Focus moves into drawer

Closing

Overlay click - closes
Close button - closes
Escape key - closes
Navigate to checkout - leaves page

Add to Cart

When cart type is drawer, "Add to cart" can open the drawer automatically
Quick add buttons may open drawer after adding

Cart type	Behavior
Drawer	Full slide-out panel; overlay; typically right side
Dropdown	Smaller dropdown panel; may use same component with different styling
Page	No drawer; cart link goes to `/cart`

Content

Line items - Image, title, variant, quantity, price, remove
Recommendations - From Theme settings > Cart > Recommendations collection
Order note - If Theme settings > Enable order notes
Terms checkbox - If enabled
Checkout button - Proceeds to checkout

Accessibility

role="dialog", aria-modal="true", aria-labelledby="CartDrawerTitle"
Focus trap when open
Escape closes
Overlay and close button have accessible labels

Multipurpose theme documentation