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