Cart Drawer

A slide-out cart that lets customers review and modify their order without leaving the current page. Includes free shipping progress bar, quantity controls, and one-click checkout.

📁 sections/cart_drawer.liquid⏱ī¸ 2 min setup

Overview

The Cart Drawer is a critical conversion component that appears when customers add items to their cart or click the cart icon. It provides a frictionless shopping experience by allowing customers to continue browsing while managing their cart.

🛒

Slide-Out Panel

Non-intrusive drawer that doesn't interrupt browsing
đŸ“Ļ

Free Shipping Bar

Progress indicator motivating larger orders
➕

Inline Editing

Update quantities or remove items without page refresh
⚡

Quick Checkout

Direct checkout button reduces steps to purchase

When to Use

The Cart Drawer is automatically enabled for all pages when you enable it in Theme Settings. It appears when:

  • Customer clicks "Add to Cart" on any product
  • Customer clicks the cart icon in the header
  • Cart icon shows updated count after adding items
💡

The Cart Drawer is preferred over a full cart page for most stores because it keeps customers in the shopping flow. Studies show slide-out carts can reduce cart abandonment by 20-30%.

Quick Setup

1

Enable the Cart Drawer

Go to Theme Settings → Products → Cart behavior and select Cart drawer instead of "Cart page".

2

Set Free Shipping Threshold

Click on the Cart drawer section and enter your free shipping threshold (e.g., $100). Leave at 0 to disable.

3

Test the Experience

Add a product to your cart and verify the drawer opens smoothly. Test quantity changes and removal.

Section Settings

Free Shipping

SettingTypeDefaultDescription
Thresholdnumber120Order amount needed for free shipping. Displays a progress bar until reached. Set to 0 to disable.

How the Free Shipping Bar Works:

  1. Shows how much more the customer needs to spend
  2. Updates dynamically as items are added/removed
  3. Displays a celebratory message when threshold is reached
  4. Motivates customers to add more items
ℹī¸

Set your threshold slightly above your average order value (AOV) to encourage customers to add "just one more item."

Display Options

SettingTypeDefaultDescription
Payment iconscheckboxtrueShow accepted payment method icons at the bottom of the drawer.

Cart Drawer Features

Real-Time Updates

The cart drawer updates instantly without page reloads:

  • Add to cart — Items appear immediately
  • Quantity changes — Totals update as you adjust
  • Remove items — Smooth removal animation
  • Price updates — Reflects discounts and changes

Free Shipping Progress

When a threshold is set:

You're $25 away from free shipping!
[=========>          ] 75%

When threshold is reached:

🎉 You've unlocked free shipping!
[====================] 100%

Checkout Flow

The drawer provides two actions:

  1. View Cart — Opens the full cart page for detailed review
  2. Checkout — Goes directly to Shopify checkout

Best Practices

Free Shipping Strategy

  1. Set a strategic threshold — 10-20% above your current AOV
  2. Make it visible — The progress bar motivates larger orders
  3. Be honest — Only offer free shipping you can afford
  4. Consider zones — Threshold may need adjustment for international

User Experience

  1. Keep it fast — Drawer should open within 300ms
  2. Show product images — Helps customers recognize items
  3. Make removal easy — Clear X button or trash icon
  4. Allow quick edits — Quantity +/- buttons

Conversion Optimization

  1. Add upsells — Consider products in the drawer (future feature)
  2. Show savings — Display discounts clearly
  3. Reduce friction — Checkout button should be prominent
  4. Mobile optimization — Full-height drawer on small screens
💡

A/B Testing Idea: Test different free shipping thresholds. Even a $5 difference can significantly impact AOV and profit margins.

Accessibility Features

The Cart Drawer includes:

  • Focus trap — Keyboard focus stays within the drawer when open
  • Escape to close — Pressing Escape closes the drawer
  • Screen reader announcements — Cart updates are announced
  • Proper ARIA labels — Drawer identified as a dialog
  • Close button — Clearly labeled for assistive technology

Troubleshooting

Cart drawer not opening

  • Verify Cart behavior is set to "Cart drawer" in Theme Settings → Products
  • Check for JavaScript errors in browser console
  • Ensure the theme files aren't missing the cart drawer section
  • Try a hard refresh (Ctrl+Shift+R)

Free shipping bar not showing

  • Verify Threshold is set to a number greater than 0
  • Check that cart total is below the threshold
  • Ensure the setting is saved

Items not updating

  • Check for JavaScript errors in console
  • Verify Shopify cart API is responding
  • Try clearing browser cache
  • Test in incognito mode

Drawer closes unexpectedly

  • Check if clicking overlay is set to close (intentional behavior)
  • Verify no conflicting JavaScript
  • Test on different browsers

Payment icons missing

  • Enable Payment icons in cart drawer settings
  • Verify payment methods are configured in Shopify Settings → Payments
  • Not all payment methods have icons

Slow performance

  • Check image sizes of products in cart
  • Verify no blocking JavaScript
  • Test network speed

Customization Tips

Changing the Drawer Width

The drawer width can be adjusted via CSS in your theme:

.cart-drawer__content {
  max-width: 420px; /* Default is ~400px */
}

Styling the Free Shipping Bar

Customize colors in your CSS:

.cart-progress__bar span {
  background: #your-brand-color;
}

Adding Trust Badges

Consider adding trust badges near the checkout button:

  • Secure checkout icon
  • Money-back guarantee
  • Free returns badge

Related Settings

The Cart Drawer behavior is also affected by:

  • Theme Settings → Products → Cart behavior — Enable/disable drawer
  • Theme Settings → Products → Show vendor — Display vendor in cart items
  • Theme Settings → Products → Show SKU — Display SKU in cart items

📖 See Theme Settings for more options.