Cart drawer

Section overview

The cart section provides a slide-out drawer and alert popup for displaying the shopping cart contents and checkout functionality in a Shopify store.

Common use cases

• Main shopping cart experience for e-commerce websites

• Cart upsell opportunities to increase average order value

• Cart progress bar to encourage customers to reach free shipping thresholds

• Quick checkout process with different button behavior options

Usage tips

• Configure the progress bar threshold to encourage higher purchases

• Utilize cart upsells to promote related products at the checkout stage

• Customize sidebar blocks for important shipping, return, or promotion information

• Mobile responsiveness is built-in with different layouts for mobile and desktop views, particularly in the upsell slider section

Section settings

Setting	Description
Top bar color scheme	Sets the color scheme for the top bar of the cart drawer
Top bar color border	Determines the border style for the top bar
Top bar color button	Sets the style for buttons in the top bar
Main section color scheme	Sets the primary color scheme for the main cart area
Secondary background	Sets the color scheme for secondary elements within the cart
Main color border	Determines the border style for main cart items
Enable cart note	Allows customers to add notes to their order
Enable cart share	Enables functionality for customers to share their cart
Show cart subtotals	Shows subtotal breakdowns including discounts
Bottom bar color scheme	Sets the color scheme for the bottom bar of the cart drawer
Bottom bar color border	Determines the border style for the bottom bar
Bottom bar color button	Sets the style for buttons in the bottom bar
Cart button behavior	Choose between directing to checkout or cart page
Checkout disclaimer	Add a disclaimer text below the checkout button
Show continue shopping button	Displays a button to continue shopping
Show button prices	Shows prices within checkout buttons
Sidebar color scheme	Sets the color scheme for the sidebar blocks
Sidebar color border	Determines the border style for sidebar blocks
Progress bar threshold	Set the threshold amount to reach for free shipping or other promotions
Progress bar success	Message displayed when the progress bar threshold is met
Enable progress bar	Toggles display of the progress bar feature
Checkbox upsell ID	Variant ID for the upsell product checkbox
Label	Text displayed for the upsell checkbox
Cart upsell products	Collection to use for upsell product slider
Button label	Text for the button shown when cart is empty
Button URL	URL that the empty cart button links to

Block settings

Content

These blocks appear in the sidebar of the cart drawer and can be used to provide additional information or promotional content.

Block limit: 4

Setting	Description
Icon	64px icon image to display at the top of the block
Heading	Title text for the content block
Content	Rich text content for the block