> 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/cart.md).

# Cart

The cart is where a browsing session turns into an order, so small changes here move revenue more than most theme settings. Vélare lets you decide what happens right after a customer adds a product, whether the cart opens as a drawer or a full page, and what extras appear inside it: a free shipping progress message, a countdown timer, product recommendations, gift wrap, a terms checkbox, and the content shown when the cart is empty. Desktop and mobile are configured separately, because the behaviour that feels smooth on a large screen can get in the way on a phone.

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

Go to **Online Store > Themes > Customize > Theme settings > Cart**.

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

### 1. Cart <a href="#cart" id="cart"></a>

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

| Setting                              | Description                                                                                                                                                                                                                                     |
| ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Action after add cart on desktop** | <p>What customers see on desktop right after they add a product to the cart.</p><ul><li><strong>Drawer</strong>: the cart drawer slides open over the page</li><li><strong>Page</strong>: the customer is redirected to the cart page</li></ul> |

### 2. Mobile settings <a href="#mobile-settings" id="mobile-settings"></a>

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

| Setting                   | Description                                                                                                                                                                                                           |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Action after add cart** | <p>What happens after a customer adds a product to cart on mobile.</p><ul><li><strong>Open mini cart</strong></li><li><strong>Notify message</strong></li><li><strong>Open cart once, notify after</strong></li></ul> |
| **Open cart as**          | <p>How the cart opens when a customer taps the cart icon in the header or the mobile navigation bar.</p><ul><li><strong>Drawer</strong></li><li><strong>Popup</strong></li></ul>                                      |

### 3. Free shipping message <a href="#free-shipping-message" id="free-shipping-message"></a>

Free shipping is one of the strongest incentives in an online store. Showing customers how close they are to qualifying reduces cart abandonment and pushes order values up, because the remaining gap is often smaller than the shipping fee they are trying to avoid.

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

| Setting                          | Description                                                                                                              |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| **Message**                      | The message shown to customers. Use `[amount]` to insert how much more the customer needs to spend to get free shipping. |
| **Free shipping minimum amount** | The minimum order value required to qualify. Enter whole numbers only, with no symbols or currency signs.                |

### 4. Cart count down <a href="#cart-count-down" id="cart-count-down"></a>

A countdown timer signals that stock is limited, which creates urgency and encourages customers to decide sooner rather than leaving the cart open.

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

| Setting                            | Description                                                        |
| ---------------------------------- | ------------------------------------------------------------------ |
| **Show on minicart and cart page** | Shows the countdown timer in both the mini cart and the cart page. |
| **Duration**                       | How long the countdown runs.                                       |

### 5. Product recommendations <a href="#product-recommendations" id="product-recommendations"></a>

Recommendations inside the cart are a low effort way to raise order value, because the customer has already decided to buy and only needs to see something relevant.

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

| Setting                            | Description                                                                                                              |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| **Enable product recommendations** | Shows recommended products in the mini cart and on the cart page.                                                        |
| **Show on mobile**                 | Also shows recommendations on mobile devices.                                                                            |
| **Heading**                        | The heading above the recommendations.                                                                                   |
| **Product recommendations type**   | <p>How the recommended products are chosen.</p><ul><li><strong>Auto</strong></li><li><strong>Selected</strong></li></ul> |
| **Product**                        | The products to recommend when the type is set to **Selected**.                                                          |

### 6. Product gift wrap <a href="#product-gift-wrap" id="product-gift-wrap"></a>

Lets customers add gift wrapping to their order from inside the cart.

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

| Setting     | Description                                                                                                                 |
| ----------- | --------------------------------------------------------------------------------------------------------------------------- |
| **Product** | <p>The product used as the gift wrap option.<br><em>Note: this only works with products that do not have variants.</em></p> |

### 7. Empty cart settings <a href="#empty-cart-settings" id="empty-cart-settings"></a>

An empty cart is a dead end unless you give the customer somewhere to go. These settings let you turn that screen into a starting point with a heading, a short message, featured collections and a button.

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

<table data-search="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Heading</strong></td><td>The main title shown when the cart is empty.</td></tr><tr><td><strong>Description</strong></td><td>A short promotional or instructional message below the heading.</td></tr><tr><td><strong>Collection list</strong></td><td>The collections shown here. They display their featured image by default. Use a metafield to change the image and text.</td></tr><tr><td><strong>Collections text color</strong></td><td>The text color used for the featured collection title.</td></tr><tr><td><strong>Button label</strong></td><td>The text on the action button that links to collections.</td></tr><tr><td><strong>Button link</strong></td><td>The URL or page the button sends customers to.<br><em>Note: the default is the Collection all page.</em></td></tr><tr><td><strong>Free shipping message</strong></td><td>A promotional message offering free delivery for orders above a certain amount.</td></tr></tbody></table>

### 8. Terms and conditions <a href="#terms-and-conditions" id="terms-and-conditions"></a>

Requires customers to accept your store's terms and conditions before they can proceed to checkout.

<table data-search="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show checkbox in mini cart and cart page</strong></td><td>Shows a terms and conditions checkbox in both the mini cart and the cart page. Customers must accept it before proceeding to checkout.</td></tr><tr><td><strong>Text</strong></td><td>The terms and conditions text displayed next to the checkbox.</td></tr></tbody></table>

### What customers see <a href="#what-customers-see" id="what-customers-see"></a>

The add to cart behaviour is the most visible choice here. **Drawer** keeps customers on the page they were browsing and encourages them to keep shopping, while **Page** takes them straight to the cart and pushes them towards checkout. On mobile the same trade off is sharper, which is why **Open cart once, notify after** exists: the first add opens the cart so the customer understands what happened, and later adds only show a short message instead of interrupting the browse.

Inside the cart, the free shipping message updates as items are added and tells the customer exactly how much more they need to spend, and the countdown gives them a reason not to postpone. Recommendations appear under the cart items in the mini cart and on the cart page, and gift wrap is offered as an extra item they can tick. The terms checkbox blocks the checkout button until it is ticked, so put it on only if you actually need that consent. When the cart is empty, customers get your heading, message and collection links instead of a blank screen.

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

* [Cart drawer](/velare/customize-your-pages/overlay-group/cart-drawer.md): the layout and blocks of the drawer these settings open
* [Product cards](/velare/customize-your-pages/product-cards.md): the quick add buttons that feed the cart from listings
* [Currency format](/velare/set-up-your-store/currency-format.md): how prices and totals are displayed in the cart
* [Header](/velare/set-up-your-store/header-group/header.md): the cart icon customers tap to open the cart
* [Vélare Intro](/velare/readme.md): overview of the theme and where to start


---

# 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/cart.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.