> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/overlay-group/cart-drawer.md).

# Cart drawer

The **Cart drawer** is a side panel that slides in over the current page so shoppers can review and edit their cart without leaving the product or collection they were looking at. It can also carry conversion helpers: a free shipping progress message, a cart note, a shipping estimate, gift wrap, and a discount code field. Because it is a global section, it behaves the same everywhere in the store.

Use it when you want to keep shoppers browsing after they add an item, instead of sending them to the cart page.

<figure><img src="/files/t20ZqTEecK6ybnGSdgAo" alt=""><figcaption></figcaption></figure>

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Open **Theme settings > Cart** and set the cart type to **Drawer**.
3. In the left sidebar, open the **Overlay** group and click **Cart drawer**.
4. Enable the options you need in the settings panel.
   {% endhint %}

*Result:* clicking the cart icon in the header opens the drawer instead of loading the cart page.

### Section settings <a href="#section-settings" id="section-settings"></a>

| Setting                        | Description                                                                                                                                                                                                                                         |
| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show free shipping message** | Shows shoppers how much more they need to spend to unlock free shipping, encouraging larger orders. Configure it in **Theme settings > Cart > Free shipping message**. \[[Learn more](/velare/customize-your-pages/cart.md#free-shipping-message)]. |
| **Show cart note**             | Gives shoppers a box for anything the order form does not cover, such as a delivery instruction or a gift message.                                                                                                                                  |
| **Show estimate shipping**     | Puts an estimated shipping cost in front of shoppers before they commit, so the total at checkout is not a surprise that loses the sale.                                                                                                            |
| **Show gift wrap**             | Lets shoppers add wrapping to an order they are sending as a present, which is worth turning on around the holidays. Requires gift wrap products to be set up in **Theme settings** first.                                                          |
| **Show discounts code**        | Lets shoppers redeem a promo code without waiting until checkout. Leave it off if you rarely run codes, since an empty code box sends shoppers off to hunt for one.                                                                                 |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* With the drawer cart type selected, adding to cart from anywhere in the store opens this panel instead of navigating away.
* Each option above adds one more element inside the drawer, so enable only what your store actually uses. A drawer with note, estimate, gift wrap, and discount field all on becomes long on mobile.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Overlay group](/velare/customize-your-pages/overlay-group.md): the other panels and popups
* [Cart](/velare/customize-your-pages/cart.md): where the cart type is set to drawer
* [Header](/velare/set-up-your-store/header-group/header.md): the cart icon that opens this drawer


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/overlay-group/cart-drawer.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.