Skip to content
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 |