Skip to main content

​
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.
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.

​
Getting Started

1

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.
2

Choose Drawer Size

Select drawer width (Small, Medium, Large) based on your products and customer device usage. Medium works for most stores.
3

Set Empty Cart Position

Choose where empty cart message displays vertically (Top, Center, Bottom). Center is most balanced.
4

Configure Button Layout (Desktop)

Select checkout button layout for desktop: Inline (side-by-side) or Column (stacked). Inline saves vertical space.

​
Settings

Type: Select dropdown
Options: Top, Center, Bottom
Default: CenterControls 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.
Type: Select dropdown
Options: Small, Medium, Large
Default: MediumControls 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.
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.

​
Best practices

Medium Drawer for Most Stores

Start with Medium drawer size—works for 80% of stores. Adjust to Small for simple products or Large for complex products with variants/customizations.

Center Empty Message

Keep empty cart message vertically centered (default). Creates balanced, professional appearance when cart is empty. Top/Bottom rarely needed.

Inline Buttons Save Space

Use Inline button layout (default) for compact drawer. Switch to Column only if emphasizing “Checkout” CTA or have vertical space to spare.

Test with Real Products

Add 2-3 actual products to cart and test drawer on desktop and mobile. Check product name readability, image clarity, button spacing before launching.

Mobile Goes Full-Screen

On mobile, drawer often full-screen regardless of size setting. Settings primarily affect desktop/tablet. Always test mobile separately.

Prominent Checkout Button

Ensure “Checkout” button visually stands out (color, size) regardless of Inline or Column layout. Primary CTA should be unmistakable.

Fast Checkout Experience

Cart drawer purpose is quick checkout without page navigation. Keep it fast—avoid heavy images, excessive upsells that slow drawer load.

Accessibility Matters

Ensure drawer keyboard-navigable (Tab through items/buttons, Esc to close). Test with screen reader—all cart items and totals should be announced.

​
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

​
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 to close cart drawer
document.querySelector('.cart-drawer__overlay').click();

​
CSS Classes (Common Patterns)

.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