Cart drawer

Section overview

The cart section is responsible for rendering and handling the functionality of the cart in a Shopify store. It includes a slide-out cart drawer, an alert cart overlay, and manages the display of cart items, upsells, subtotal, and checkout options.

Common use cases

• Providing a seamless checkout experience without leaving the current page

• Displaying cart items, subtotals, and discounts in a visually appealing format

• Offering upsell opportunities to increase average order value

• Implementing free shipping thresholds with progress bars

Usage tips

• Use the progress bar to encourage customers to reach free shipping thresholds

• Leverage upsell blocks to promote complementary products

• Keep the cart visually consistent with your store's design using color scheme settings

• For mobile responsiveness, the cart adapts to smaller screens with a bottom slide-up drawer instead of a side drawer on desktop

Section settings

Setting	Description
Color scheme (top)	Sets the color scheme for the top bar of the cart drawer
Color border (top)	Sets the border color style for the top bar
Primary background	Sets the main background color for the cart drawer
Secondary background	Sets the background color for item rows and sections within the cart
Color border (main)	Sets the border color style for dividers between cart sections
Enable cart notes	Allows customers to add notes to their order
Enable cart share	Enables the option for customers to share their cart with others
Enable cart SKU	Shows product SKUs in the cart items list
Color scheme (bottom)	Sets the color scheme for the bottom checkout area
Color border (bottom)	Sets the border color style for the bottom area
Color button	Sets the button style for the checkout/cart button
Cart button behavior	Determines whether the primary button links to checkout or cart page
Optional text	Displays disclaimer text below the checkout button
Show continue shopping button	Shows an additional button to continue shopping
Show button prices	Displays the cart total on the checkout button
Show cart subtotals	Shows the subtotal, discount, and total information

Block settings

Empty cart

Displays content when the cart is empty to encourage shopping.

• Block limit: 1

Setting	Description
Heading	Sets the heading text for the empty cart message
Content	Sets the content text for the empty cart message
Button label	Sets the text for the call-to-action button
URL	Sets the destination link for the button
Image	Optional image to display with the empty cart message
Show image as background	Toggles between showing the image as a background or inline
Video	Optional video to display with the empty cart message
Enable autoplay	Automatically plays the video when visible
Enable mute toggle	Shows a button to toggle video sound
Enable loop	Plays the video continuously on a loop
Minimum height	Sets the minimum height for the empty cart content area
Enable padding	Adds padding around the empty cart content
Color scheme	Sets the color scheme for the empty cart content
Color border	Sets the border style for the empty cart content
Color text	Sets the text color treatment for the empty cart content
Color button	Sets the button style for the empty cart content
Enable gradient	Applies a gradient effect to the background
Y alignment	Sets the vertical alignment of the content
X alignment	Sets the horizontal alignment of the content

Announcement

Displays an announcement message at the top of the cart.

• Block limit: 1

Setting	Description
Content	Sets the announcement message text
Color scheme	Sets the color scheme for the announcement bar
X alignment	Sets the horizontal alignment of the announcement text

Upsell checkbox

Adds a checkbox option to add an additional product to the cart.

• Block limit: 1

Setting	Description
Checkbox upsell ID	The variant ID of the product to add when checked
Label	The text label displayed next to the checkbox

Upsell featured

Shows featured products as upsell opportunities in the cart.

• Block limit: 1

Setting	Description
Collection	Selects the collection containing products to display as upsells
Upsell type	Chooses between slider, stacked, or second column display formats

Content

Displays custom content in the cart, such as promotions or announcements.

• Block limit: 5

Setting	Description
Heading	Sets the heading text for the content block
Content	Sets the main text content
Button label	Sets the text for the call-to-action button
URL	Sets the destination link for the button
Image	Optional image to display with the content
Show image as background	Toggles between showing the image as a background or inline
Video	Optional video to display with the content
Enable autoplay	Automatically plays the video when visible
Enable mute toggle	Shows a button to toggle video sound
Enable loop	Plays the video continuously on a loop
Minimum height	Sets the minimum height for the content block
Enable padding	Adds padding around the content
Color scheme	Sets the color scheme for the content block
Color border	Sets the border style for the content block
Color text	Sets the text color treatment for the content block
Color button	Sets the button style for the content block
Enable gradient	Applies a gradient effect to the background
Text position	Sets whether text appears above or below media
Y alignment	Sets the vertical alignment of the content
X alignment	Sets the horizontal alignment of the content

Progress bar

Shows a progress bar towards free shipping or other threshold-based goals.

• Block limit: 1

Setting	Description
Progress bar threshold	The amount in dollars required to reach the goal
Progress bar calculation	Determines whether to use subtotal or total for threshold calculation
Progress bar success	The message displayed when the threshold is reached