> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/global-sections/header-and-navigation/cart-drawer.md).

# Cart drawer

A slide-out cart panel that appears when a visitor clicks the cart icon, without leaving the current page. Shows items, quantities, subtotal, and an optional free shipping progress bar.

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

***

### How to find

Cart Drawer is enabled and configured in **Theme Settings**, not in the Theme Editor sidebar:

**Theme Settings → Cart** — enable the drawer and configure cart image settings.

[**Theme Settings → Cart drawer**](/docs/avante-themes/theme-settings/cart-drawer.md) — configure what appears inside the drawer.

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

***

### Enabling the drawer

By default the cart drawer is **disabled**. To turn it on, go to **Theme Settings → Cart** and check **Enable cart drawer**.

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

When disabled, clicking the cart icon takes visitors to the full `/cart` page instead.

***

### Cart name

Avante lets you choose how the cart is labeled throughout your store: **Cart**, **Bag**, or **Basket**. This changes all button labels, headings, and drawer text to match — a small branding detail that makes the store feel more polished.

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

***

### Key features

**Free shipping bar** — show a progress bar that tells visitors how much more they need to spend to qualify for free shipping. Can be enabled separately for the cart drawer and the full cart page.

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

**"You saved"** — displays the total savings when cart items are on sale. A small nudge that reinforces the purchase decision.

**Discount code** — visitors can enter a promo code right inside the drawer without going to checkout first. Enable **Show as collapsible tab** to keep it tidy — the field stays hidden until the visitor taps to expand it.

**Order note** — a text field where visitors can leave a note with their order (gift message, delivery instructions). Also supports the collapsible tab option to save space.

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

**Shipping calculator** — estimate shipping costs right in the drawer based on country. If the customer is logged in, their default shipping address country is pre-selected automatically.

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

**Cart drawer recommendations** — product recommendations at the bottom of the drawer to encourage add-ons. Supports custom image ratio, mobile layout (one or two columns), color pills, and vendor display — same product card options as collection pages.

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

**Hide "View cart" button** — if you want the drawer to be the only cart experience, hide the button and drive visitors straight to checkout.

{% hint style="success" icon="sparkles" %}
For more cart-related settings (cart name, free shipping thresholds, cart page layout), see [**Theme Settings → Cart**](/docs/avante-themes/theme-settings/cart.md).
{% endhint %}

***

### Related

* [Theme Settings → Cart drawer](/docs/avante-themes/theme-settings/cart-drawer.md) — full reference for all Cart Drawer settings
* [Header](/docs/avante-themes/global-sections/header-and-navigation/header.md) — cart icon configuration
* [Cross-sell & Recommendations](/docs/avante-themes/sections/trust-and-social-proof.md) — product recommendation sections


---

# 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://staylime.com/docs/avante-themes/global-sections/header-and-navigation/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.