Overview
Cart drawer is a slide-out cart panel that allows customers to view, edit, and complete their purchase without leaving the current page. It supports dynamic cart updates, product recommendations, free shipping progress, gift wrapping, cart note, and more — helping improve conversion and reduce cart abandonment.
Where this section appears
Cart drawer is a core theme component and is automatically used when customers click:
Cart icon in header
Add-to-cart (Ajax add)
Buy / Add button (depending on theme behavior)
It replaces the traditional cart page experience with a faster, inline cart interaction.
Main features
Real-time cart updates
Add / remove items instantly (Ajax)
Change quantity without page reload
Automatic price & subtotal update
Discount & volume pricing supported
Empty cart experience
When cart is empty, the drawer can show:
Continue shopping button
orRecommended collections grid
Discount code block (optional)
Login prompt for customers (optional)
Free shipping progress bar
Shows how much more customers need to spend to unlock free shipping.
Requires:
Free shipping enabled in theme settings
"Show free shipping bar" enabled in section
Cart content
Product information
Each cart item can show:
Product image
Vendor (optional)
Variant / properties
Selling plan (subscriptions)
Pre-order note (optional)
Discount labels
Unit price (if available)
Quantity controls
Increase / decrease buttons
Min / max / step supported
Auto inventory validation
Remove item button
Error handling
Shows validation errors such as:
Quantity rule violations
Inventory limits
Checkout issues
Product recommendations
The drawer can display recommended products based on cart items.
Features:
Dynamic loading
Slider layout
Configurable item limit
Supports image ratio setting
Helps increase:
AOV (average order value)
Cross-sell conversions
Footer actions
The cart drawer footer can include multiple interactive panels.
Gift wrapping (optional)
Allows customers to add gift wrapping product.
Requires:
Gift wrapping enabled in theme settings
Gift wrapping product assigned
Includes:
Gift wrapping selector
Quantity bubble indicator
Drawer panel UI
Cart note (optional)
Customers can add a note for their order.
Example uses:
Delivery instructions
Gift message
Special requests
Shipping calculator (optional)
Customers can estimate shipping cost directly in cart.
Pricing & totals
Cart drawer shows:
Subtotal
Total discount
Cart-level discounts
Tax / shipping notice
Policy links (optional)
Supports:
Automatic discount detection
Combined discounts
Volume pricing display (B2B compatible)
Checkout & actions
Buttons supported:
View cart (optional)
Checkout (primary CTA)
Secure checkout indicator
Additional features
Discount code input
Supports:
Apply discount in drawer
Blur / masked code (optional)
Customer login prompt
Shown when:
Customer accounts enabled
Customer not logged in
Encourages faster checkout.
Layout & behavior
Drawer size
Controlled by:
Drawer size setting
Scroll behavior
Independent scroll area for cart items
Footer remains accessible
Accessibility
ARIA labels included
Keyboard accessible
Screen reader support
Live region updates
Best practices
Enable free shipping bar to increase order value
Use product recommendations to boost cross-sell
Enable gift wrapping for gifting stores
Keep drawer lightweight for best performance
Avoid too many footer panels (UX overload)
Limitations
Requires JavaScript (Ajax cart)
Some apps may override drawer behavior
Shipping calculator depends on Shopify shipping setup
Product recommendations require available products
Common use cases
Quick cart without page reload
Upsell / cross-sell in cart
Show free shipping incentive
Gift purchase experience
B2B / volume pricing carts
Conversion-optimized checkout flow
Need help?
If you need help customizing Cart drawer behavior, layout, or integrations, contact theme support.
Comments
0 comments
Please sign in to leave a comment.