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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.brickspacelab.com/paper/sections/sitewide/cart-drawer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.