Skip to content
Cart drawer
Section overview
The Cart section manages the display and functionality of the shopping cart in your Shopify store, providing both overlay and sidebar cart options with customizable appearance and features.
Common use cases
- Creating a slide-out cart drawer for a seamless shopping experience
- Displaying cart items, subtotals, and checkout options
- Adding upsell products or promotional content to the cart interface
- Providing shipping threshold indicators with progress bars
Usage tips
- Choose between overlay and sidebar cart styles based on your store's design
- Customize color schemes for the top, main, and bottom areas of the cart
- Use cart blocks to add empty cart messaging, announcements, or promotional content
- Consider mobile responsiveness by testing both drawer styles (the mobile view defaults to bottom positioning)
- For upsell features, carefully select products that complement items typically added to cart
Section settings
| Setting | Description |
|---|---|
| Top color scheme | Sets the background and text color for the top section of the cart drawer. |
| Top color border | Determines the border style for the top section of the cart drawer. |
| Primary background | Sets the main background color for the cart drawer content area. |
| Secondary background | Sets the secondary background color for alternating elements within the cart. |
| Main color border | Determines the border style for the main content area of the cart. |
| Enable cart notes | Allows customers to add notes to their order during checkout. |
| Enable cart share | Enables cart sharing functionality. |
| Enable cart SKU | Shows product SKUs in the cart items list. |
| Show cart subtotals | Displays subtotal prices for individual line items. |
| Bottom color scheme | Sets the background and text color for the bottom section of the cart drawer. |
| Bottom color border | Determines the border style for the bottom section of the cart drawer. |
| Bottom color button | Sets the style for buttons in the bottom section of the cart. |
| Cart button behavior | Determines whether the primary button leads to checkout or cart page. |
| Optional text | Adds disclaimer or promotional text below the checkout buttons. |
| Show continue shopping button | Displays a button to continue shopping below the checkout button. |
| Show button prices | Shows prices on the checkout and cart buttons. |
Block settings
Empty cart
Displays content when the cart is empty, providing a message and call-to-action for customers.
- Block limit: 1
| Setting | Description |
|---|---|
| Heading | Sets the heading text for the empty cart message. |
| Content | Provides detailed messaging for when the cart is empty. |
| Button label | Sets the text for the call-to-action button. |
| URL | Determines where the button links to when clicked. |
| Image | Adds a featured image to the empty cart display. |
| Image background | Adds a background image behind content. |
| Video | Adds a video to the empty cart display. |
| Enable video autoplay | Automatically plays the video when visible. |
| Enable mute button | Shows a button to toggle sound for the video. |
| Enable video loop | Continuously loops the video. |
| 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 background and text color for the empty cart message. |
| Color border | Determines the border style for the empty cart message. |
| Color button | Sets the style for the call-to-action button. |
| Enable gradient | Applies a gradient effect to the background. |
| Vertical alignment | Controls the vertical positioning of content. |
| Horizontal alignment | Controls the horizontal positioning of content. |
| Text position | Determines whether text appears above or below media. |
Announcement
Displays an announcement message at the top of the cart drawer.
- Block limit: 1
| Setting | Description |
|---|---|
| Content | Sets the text for the announcement message. |
| Color scheme | Sets the background and text color for the announcement. |
| Horizontal alignment | Controls the horizontal positioning of the announcement text. |
Upsell checkbox
Adds a checkbox upsell for a specific product variant that can be added to cart.
- Block limit: 1
| Setting | Description |
|---|---|
| Variant ID | The Shopify variant ID for the product to be upsold. |
| Label | The text describing the upsell offer shown next to the checkbox. |
Upsell featured
Displays featured products as upsell recommendations in the cart.
- Block limit: 1
| Setting | Description |
|---|---|
| Collection | Selects a collection of products to display as upsell recommendations. |
Content
Adds custom content sections within the cart drawer.
- Block limit: 5
| Setting | Description |
|---|---|
| Heading | Sets the heading text for the content block. |
| Content | Provides the main text for the content block. |
| Button label | Sets the text for the call-to-action button. |
| URL | Determines where the button links to when clicked. |
| Image | Adds a featured image to the content block. |
| Image background | Adds a background image behind content. |
| Video | Adds a video to the content block. |
| Enable video autoplay | Automatically plays the video when visible. |
| Enable mute button | Shows a button to toggle sound for the video. |
| Enable video loop | Continuously loops the video. |
| Minimum height | Sets the minimum height for the content block. |
| Enable padding | Adds padding around the content. |
| Color scheme | Sets the background and text color for the content block. |
| Color border | Determines the border style for the content block. |
| Color button | Sets the style for the call-to-action button. |
| Enable gradient | Applies a gradient effect to the background. |
| Vertical alignment | Controls the vertical positioning of content. |
| Horizontal alignment | Controls the horizontal positioning of content. |
| Text position | Determines whether text appears above or below media. |
Progress bar
Displays a progress bar showing how close the customer is to reaching a threshold for promotions like free shipping.
- Block limit: 1
| Setting | Description |
|---|---|
| Threshold | The amount that must be reached to complete the progress bar. |
| Calculation | Determines whether to use cart subtotal or total for calculations. |
| Success message | The message displayed when the threshold has been reached. |