> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Cart Drawer

> Slide-out drawer cart configuration for quick shopping and checkout

## What It Does

The **Cart Drawer** section controls the slide-out cart drawer that appears when customers click the cart icon in your header. This drawer provides a quick view of cart contents, allows quantity adjustments, and offers express checkout options—all without leaving the current page.

Configure drawer width, empty cart message position, and checkout button layout for optimal mobile and desktop shopping experiences.

<Note>
  This section controls drawer **configuration** only (size, layout, empty state). Cart items rendering and cart functionality handled by separate components. Changes here affect drawer appearance/behavior globally sitewide.
</Note>

## Getting Started

<Steps>
  <Step title="Locate Cart Drawer Settings">
    In Theme Customizer, go to header or search "Cart Drawer" section. This section typically lives in header area but affects drawer that appears sitewide.
  </Step>

  <Step title="Choose Drawer Size">
    Select drawer width (Small, Medium, Large) based on your products and customer device usage. Medium works for most stores.
  </Step>

  <Step title="Set Empty Cart Position">
    Choose where empty cart message displays vertically (Top, Center, Bottom). Center is most balanced.
  </Step>

  <Step title="Configure Button Layout (Desktop)">
    Select checkout button layout for desktop: Inline (side-by-side) or Column (stacked). Inline saves vertical space.
  </Step>
</Steps>

## Settings

<Tabs>
  <Tab title="Section Settings">
    <AccordionGroup>
      <Accordion title="Empty Cart Content Vertical Position" icon="arrow-up-arrow-down">
        **Type:** Select dropdown\
        **Options:** Top, Center, Bottom\
        **Default:** Center

        Controls where the "Your cart is empty" message displays when cart has no items.

        ### Position Options

        **Top:**

        * Message appears near top of drawer
        * Below cart title ("Shopping Cart"), above drawer middle
        * Creates bottom whitespace in drawer

        **Center (Default):**

        * Message vertically centered in drawer
        * Balanced, natural reading position
        * Equal whitespace above and below

        **Bottom:**

        * Message appears near bottom of drawer
        * Creates top whitespace in drawer
        * Unusual, typically avoid unless design requirement

        ### Choosing Position

        **Center when:** (Recommended for most stores)

        * Standard design, no specific branding requirements
        * Want balanced, professional appearance
        * Empty state message is 1-2 lines

        **Top when:**

        * Custom design pushes primary content upward
        * Want consistent top alignment with other drawer states
        * Empty message includes additional content (images, links below text)

        **Bottom when:**

        * Specific brand aesthetic (e.g., footer focus)
        * Testing unusual layout for differentiation
        * Generally avoid—feels awkward for users expecting centered content

        ### Best Practices

        **Message content:**

        * Default message usually "Your cart is empty" (editable in theme translation files)
        * Keep concise (1-2 sentences max)
        * Consider adding "Continue Shopping" link below message (requires theme customization)

        **Mobile consideration:**

        * On mobile, drawer is smaller height
        * Top/Center/Bottom spacing compresses
        * Center tends to work best across device sizes

        **Testing:**

        * Empty cart (remove all items)
        * Open cart drawer
        * Check message position—should feel natural, not awkward

        **Recommendation:** Use Center (default) unless you have specific design reason to change. Top is secondary option; Bottom rarely ideal.
      </Accordion>

      <Accordion title="Cart Drawer Size" icon="maximize">
        **Type:** Select dropdown\
        **Options:** Small, Medium, Large\
        **Default:** Medium

        Controls the width of the cart drawer when opened.

        ### Size Options

        **Small:**

        * **Width:** \~300-350px (approximate)
        * **Best for:** Minimal carts, simple products
        * **Pro:** More browsing space remains visible behind drawer
        * **Con:** Cramped for products with long names or large images
        * **Use when:** Products simple (digital goods, services), mobile-first audience

        **Medium (Default):**

        * **Width:** \~400-450px (approximate)
        * **Best for:** Most stores, standard products
        * **Pro:** Balance between cart detail and page visibility
        * **Con:** None—versatile for most use cases
        * **Use when:** Standard e-commerce (apparel, home goods, general retail)

        **Large:**

        * **Width:** \~500-600px (approximate)
        * **Best for:** Complex products, detailed cart info
        * **Pro:** Maximum space for product images, descriptions, upsells
        * **Con:** Covers more browsing area, feels heavy on smaller screens
        * **Use when:** Products need detail (variants, customizations), desktop-heavy traffic

        ### Choosing Drawer Size

        **Consider product complexity:**

        * Simple products (t-shirts, basic items): Small or Medium
        * Products with variants (sizes, colors): Medium
        * Complex products (customizable, bundles): Medium or Large

        **Consider product names:**

        * Short names ("Classic Tee"): Small works
        * Medium names ("Men's Organic Cotton T-Shirt"): Medium
        * Long names with details: Large (avoids truncation)

        **Consider cart images:**

        * No images in cart: Small sufficient
        * Small product thumbnails: Small or Medium
        * Large product images: Medium or Large

        **Consider audience device:**

        * Mobile-heavy: Small or Medium (leaves more screen visible)
        * Desktop-heavy: Medium or Large (utilize screen space)
        * Balanced: Medium (works well both)

        ### Testing Process

        1. Add 2-3 products to cart (mix of simple and complex)
        2. Open cart drawer
        3. Check readability of product names, image clarity, button spacing
        4. Test on desktop and mobile (drawer behavior may differ)
        5. Choose size where everything feels comfortable, not cramped or overly spacious

        ### Best Practices

        **Mobile behavior:**

        * On mobile (\< 768px), drawer often becomes full-screen or near-full regardless of setting
        * This setting primarily affects desktop/tablet experience
        * Still test on mobile—sizing may affect internal cart spacing

        **Don't go too large:**

        * Large drawer covers significant browsing area
        * Users may want to continue shopping while cart open
        * Balance drawer utility vs page access

        **Match brand aesthetic:**

        * Minimal brands: Small (airy, unobtrusive)
        * Standard brands: Medium (professional)
        * Luxury/detailed brands: Large (showcase cart contents)

        **Recommendation:** Start with Medium (default), adjust to Small for minimal products or Large for complex products with details. Test with actual products in cart.
      </Accordion>

      <Accordion title="Buttons Layout Type" icon="table-columns">
        **Type:** Select dropdown\
        **Options:** Inline, Column\
        **Default:** Inline\
        **Info:** "This layout is only for desktop"

        Controls checkout button layout on desktop (does not affect mobile).

        ### Layout Options

        **Inline (Default):**

        * Buttons displayed side-by-side horizontally
        * Example: `[View Cart] [Checkout]` (two buttons in same row)
        * **Pro:** Compact, saves vertical space in drawer
        * **Con:** Less prominent call-to-action

        **Column:**

        * Buttons stacked vertically
        * Example:
          ```
          [Checkout]
          [View Cart]
          ```
        * **Pro:** More prominent, especially primary "Checkout" button
        * **Con:** Takes more vertical space

        ### Choosing Layout

        **Inline when:**

        * Want compact drawer (vertical space constrained)
        * Both buttons equally important (View Cart and Checkout)
        * Drawer already tall (many items in cart)
        * Minimal aesthetic preference

        **Column when:**

        * Want prominent call-to-action ("Checkout" button stands out)
        * Guiding customers to checkout over viewing full cart page
        * Drawer has vertical space to spare
        * Primary/secondary button hierarchy desired

        ### Desktop vs Mobile

        **Important:** This setting **only affects desktop** (per info text).

        **Desktop:**

        * Inline or Column layout as selected
        * Wide drawer accommodates both layouts comfortably

        **Mobile:**

        * Layout determined by mobile-specific styling (usually stacked/column)
        * This setting ignored on mobile
        * Mobile drawers typically full-screen, buttons always stacked

        ### Button Types

        **Typical cart drawer buttons:**

        1. **Checkout** (primary action) - Proceeds to checkout page
        2. **View Cart** (secondary action) - Goes to full cart page
        3. Sometimes **Continue Shopping** (close drawer, return to browsing)

        ### Best Practices

        **Inline layout:**

        * Ensure both buttons legible (not too narrow/cramped)
        * Primary button (Checkout) should have more prominent styling (color, bold)
        * Test with longest button text ("Continue Shopping" vs "Checkout")

        **Column layout:**

        * Primary button (Checkout) displays first/top (most prominent position)
        * Secondary actions below (View Cart, Continue Shopping)
        * Consistent button width (full-width stacked looks cleaner)

        **CTA hierarchy:**

        * Regardless of layout, make Checkout button most prominent (color, size, weight)
        * View Cart button secondary styling (outline, less vibrant)
        * Continue Shopping tertiary (text link or subtle button)

        **Mobile testing:**

        * Even though setting is desktop-only, test mobile to see default mobile layout
        * Ensure mobile buttons easily tappable (48x48px minimum touch target)

        **Recommendation:** Use Inline (default) for clean, compact drawer. Switch to Column if you want prominent "Checkout" CTA or have drawer vertical space to utilize.
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Best practices

<CardGroup cols={2}>
  <Card title="Medium Drawer for Most Stores" icon="compress">
    Start with Medium drawer size—works for 80% of stores. Adjust to Small for simple products or Large for complex products with variants/customizations.
  </Card>

  <Card title="Center Empty Message" icon="align-center">
    Keep empty cart message vertically centered (default). Creates balanced, professional appearance when cart is empty. Top/Bottom rarely needed.
  </Card>

  <Card title="Inline Buttons Save Space" icon="grip-lines">
    Use Inline button layout (default) for compact drawer. Switch to Column only if emphasizing "Checkout" CTA or have vertical space to spare.
  </Card>

  <Card title="Test with Real Products" icon="cart-shopping">
    Add 2-3 actual products to cart and test drawer on desktop and mobile. Check product name readability, image clarity, button spacing before launching.
  </Card>

  <Card title="Mobile Goes Full-Screen" icon="mobile-screen">
    On mobile, drawer often full-screen regardless of size setting. Settings primarily affect desktop/tablet. Always test mobile separately.
  </Card>

  <Card title="Prominent Checkout Button" icon="circle-check">
    Ensure "Checkout" button visually stands out (color, size) regardless of Inline or Column layout. Primary CTA should be unmistakable.
  </Card>

  <Card title="Fast Checkout Experience" icon="bolt">
    Cart drawer purpose is quick checkout without page navigation. Keep it fast—avoid heavy images, excessive upsells that slow drawer load.
  </Card>

  <Card title="Accessibility Matters" icon="universal-access">
    Ensure drawer keyboard-navigable (Tab through items/buttons, Esc to close). Test with screen reader—all cart items and totals should be announced.
  </Card>
</CardGroup>

## Common Use Cases

### Standard Retail Drawer

**Settings:** Medium drawer, Center empty message, Inline buttons

**Setup:** Default configuration works for most general retail (apparel, home goods, accessories). Balanced space, professional appearance.

**Best for:** Most e-commerce stores without special requirements

### Simple Digital Products

**Settings:** Small drawer, Center empty message, Inline buttons

**Setup:** Small drawer for digital goods (courses, ebooks, software). Product names short, no physical details needed, minimal cart.

**Best for:** Digital downloads, services, memberships, simple SKUs

### Complex Customizable Products

**Settings:** Large drawer, Center empty message, Column buttons

**Setup:** Large drawer for products with variants, customizations (engraved jewelry, custom apparel). Column buttons emphasize checkout CTA.

**Best for:** Customizable products, bundles, products with many options

### Mobile-First Fashion Store

**Settings:** Small drawer, Center empty message, Inline buttons

**Setup:** Small drawer leaves more browsing space on tablets/small desktops. Fashion brands benefit from keeping product grid visible behind drawer.

**Best for:** Fashion, apparel, mobile-heavy traffic

### Conversion-Optimized Layout

**Settings:** Medium drawer, Center empty message, Column buttons

**Setup:** Column buttons make "Checkout" prominent (full-width, top position). Optimized for pushing customers to checkout page immediately.

**Best for:** High-conversion focus, impulse purchases, limited-time sales

## Layout Behavior

### Desktop Layout

**Drawer appearance:**

* Slides in from right side of screen
* Overlays current page (doesn't push content left)
* Semi-transparent overlay darkens page behind drawer
* Close by clicking overlay, X button, or Esc key

**Size variations:**

* Small: \~300-350px wide (\~20-25% of 1440px screen)
* Medium: \~400-450px wide (\~30% of 1440px screen)
* Large: \~500-600px wide (\~35-40% of 1440px screen)

**Button layouts:**

* Inline: Buttons side-by-side (e.g., `[View Cart] [Checkout]`)
* Column: Buttons stacked vertically

### Mobile Layout

**Drawer appearance:**

* Full-screen or near-full-screen (90-100% width)
* Slides up from bottom or in from right (theme-dependent)
* Buttons always stacked (Column layout), regardless of setting

**Size setting:**

* Limited impact on mobile (drawer uses most/all screen width)
* May affect internal spacing/padding

### Empty vs Filled States

**Empty cart:**

* "Your cart is empty" message displays
* Position controlled by "Empty cart content vertical position" setting
* No items, subtotal, or checkout buttons

**Filled cart:**

* Cart items list (product images, names, quantities, prices)
* Subtotal/total display
* Checkout buttons (View Cart, Checkout)
* Optional: Shipping estimate, discount codes, cart notes

## Related Sections

* **[Header](/themes/mojave/header/header)** - Contains cart icon that triggers drawer
* **[Cart Page (Template)](/themes/mojave/pages-templates/cart)** - Full cart page (accessed via "View Cart" button)
* **[Cart Recommendations](/themes/mojave/cart-recommendations)** - Upsell products in cart drawer/page
* **[Checkout Settings](https://admin.shopify.com/settings/checkout)** - Shopify Admin checkout configuration

## Technical Notes

### Drawer Trigger

Cart drawer opens when customer clicks:

* Cart icon in header (shopping bag/cart icon with item count badge)
* "Add to Cart" button (theme setting—can open drawer or go to cart page)

**Configuring trigger:**

* Theme settings → Cart → "Cart type" → Select "Drawer" (vs "Page")
* If set to "Page," cart button redirects to `/cart` page instead of opening drawer

### Drawer Close Methods

**User actions that close drawer:**

* Click X (close button) in drawer
* Click semi-transparent overlay outside drawer
* Press Esc key (keyboard accessibility)
* Click "Continue Shopping" link (if theme includes it)

**Programmatic close:**

```javascript theme={null}
// JavaScript to close cart drawer
document.querySelector('.cart-drawer__overlay').click();
```

### CSS Classes (Common Patterns)

```css theme={null}
.cart-drawer { /* Main drawer container */ }
.cart-drawer--small { /* Small size modifier */ }
.cart-drawer--medium { /* Medium size modifier */ }
.cart-drawer--large { /* Large size modifier */ }

.cart-drawer__buttons--inline { /* Inline button layout */ }
.cart-drawer__buttons--column { /* Column button layout */ }

.cart-drawer__empty { /* Empty cart state */ }
.cart-drawer__empty--top { /* Empty message top position */ }
.cart-drawer__empty--center { /* Empty message center position */ }
.cart-drawer__empty--bottom { /* Empty message bottom position */ }
```

### Performance Considerations

**Drawer content:**

* Cart items load asynchronously (Ajax) when drawer opens
* Heavy product images in cart can slow drawer open animation
* Recommendation: Optimize cart product images (200-300px width sufficient)

**Cart recommendations:**

* If using Cart Recommendations section, these load after drawer opens
* Can add 500ms-1s to perceived drawer open time
* Consider lazy-loading recommendations for faster initial drawer display

### Accessibility

**Keyboard navigation:**

* Tab: Cycles through cart items, quantity inputs, buttons
* Shift+Tab: Reverse cycle
* Esc: Closes drawer
* Enter/Space: Activates buttons

**Screen reader:**

* Drawer announces "Shopping cart, dialog" when opened
* Cart item count announced ("3 items in cart")
* Each product name, quantity, price announced
* Checkout button clearly labeled

**Focus management:**

* Opening drawer moves focus to drawer container (allows immediate keyboard nav)
* Closing drawer returns focus to cart icon (trigger)

### Mobile Behavior

**Responsive breakpoints:**

* Desktop: Above \~768px (drawer size setting applies)
* Mobile: Below \~768px (drawer typically full-screen/near-full)

**Swipe gestures:**

* Many themes support swipe-right to close drawer on mobile
* Swipe-left to open not standard (cart icon click more common)

### Ajax Cart Updates

**Quantity changes:**

* Updating quantity in drawer sends Ajax request to `/cart/change.js`
* Cart totals update without page reload
* Smooth UX compared to full page refresh

**Item removal:**

* Removing item sends Ajax request to `/cart/change.js` with quantity 0
* Item fades out, cart recalculates

## Troubleshooting

**Drawer not opening when cart icon clicked:**

* Check Theme Settings → Cart → "Cart type" set to "Drawer" (not "Page")
* Browser console errors? May be JavaScript conflict with apps
* Try disabling apps one-by-one to identify conflict
* Hard refresh (Cmd/Ctrl+Shift+R) to clear cache

**Drawer too narrow/wide on desktop:**

* Adjust "Cart drawer size" setting (Small/Medium/Large)
* Check browser zoom level (should be 100%)
* Inspect CSS—custom theme code may override size settings

**Buttons layout not changing:**

* "Buttons layout type" only affects desktop (mobile always stacked)
* Test on desktop screen width >768px
* Hard refresh browser to clear CSS cache
* Check theme code for CSS overrides

**Empty cart message in wrong position:**

* Ensure items removed from cart (drawer truly empty)
* Change "Empty cart content vertical position" setting
* Preview/refresh to see changes
* May need to close/reopen drawer for changes to apply

**Drawer content cut off/scrolling weird:**

* Too many items in cart (drawer has max-height, scrolls vertically—expected)
* Cart recommendations section may push content down (consider removing or
  simplifying)
* Test drawer height with 1, 5, 10 items to see scroll behavior

**Mobile drawer covers entire screen:**

* Expected behavior on mobile (drawer usually 90-100% screen width)
* "Cart drawer size" setting mostly affects desktop
* Check mobile-specific styles in theme code if adjustment needed

**Checkout button not working:**

* Check browser console for JavaScript errors
* Verify checkout not disabled in Shopify settings (Admin → Settings → Checkout)
* Test in private/incognito window (browser extensions may interfere)
* Some apps modify checkout button—try disabling cart-related apps

**Drawer animation janky/slow:**

* Heavy product images slow rendering—optimize images (\< 100KB)
* Too many cart items (10+ products can slow drawer)
* Cart recommendations with many products add load time
* Check browser performance tab for render bottlenecks

**Drawer not showing updated cart count:**

* Ajax cart not updating properly—check JavaScript console
* May be caching issue—hard refresh browser
* Theme may need cart drawer snippet update (older themes)

**Accessibility issues (keyboard/screen reader):**

* Ensure theme up-to-date (accessibility improvements in newer versions)
* Test with browser's accessibility inspector (Chrome DevTools → Lighthouse)
* drawer should be `<dialog>` or have `role="dialog"`
* Focus trap should keep Tab within drawer when open