# 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                    |