> 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-page.md).

# Cart page

The **Cart page** is the full page version of the basket, opened when a shopper clicks the cart icon or the View cart link before checkout. It lists everything they picked, lets them change quantities or remove a line, and carries the button that starts checkout.

It is the last screen a shopper sees before paying, so what you show here decides how many carts turn into orders. The settings below let you add reassurance at that moment: a free shipping message, a shipping estimate, a discount code field, an order note, and gift wrap.

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

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

Sections designed specifically for the cart page. The cart template ships with the theme, so there is no page to create in the Shopify admin.

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

1. Go to **Online Store > Themes > Customize**.
2. Open the template selector at the top of the editor.
3. Select **Cart**.
4. In the left sidebar, add **Main cart**.
5. Make your changes, then click **Save**.
   {% endhint %}

*Result:* the preview switches to the cart page. Add a product to the preview cart first, otherwise you are styling an empty basket.

### General setting <a href="#general-setting" id="general-setting"></a>

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

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>How far the cart contents stretch across the screen.</p><ul><li><strong>Stretch width</strong>: the cart runs close to the screen edges whatever the display size.</li><li><strong>Fixed width</strong>: the cart lines up with the rest of the store, using the width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width:</strong> the section fills the whole screen and rescales itself to fit it.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>The background and text colors of the cart, taken from <strong>Theme settings > Colors</strong>. Keep it calm and high contrast, since prices and totals are read here.</td></tr><tr><td><strong>Show free shipping message</strong></td><td><p>Shows how much more a shopper needs to spend to reach free shipping, which is the most common reason a cart grows by one more item.</p><p><em>*Note: set the threshold amount in your theme settings first, otherwise the message has nothing to count towards.</em></p></td></tr><tr><td><strong>Show cart note</strong></td><td>Adds a text box where the shopper can leave an instruction with the order, such as a delivery detail or a gift message. The note reaches you with the order in the Shopify admin.</td></tr><tr><td><strong>Show estimate shipping</strong></td><td>Lets the shopper calculate delivery cost before checkout, so the total at the payment step is not a surprise. Turn it on if unexpected shipping is why carts are abandoned.</td></tr><tr><td><strong>Show discounts code</strong></td><td>Shows a field for entering a discount code on the cart page instead of waiting for checkout, which helps when your promotions are sent by email or shown on the announcement bar.</td></tr><tr><td><strong>Show gift wrap</strong></td><td><p>Offers gift wrapping as an add-on at the cart, useful during holiday seasons.</p><p><em>*Note: select the gift wrap product in the theme settings first, otherwise there is nothing to add.</em></p></td></tr></tbody></table>

### Block settings <a href="#block-settings" id="block-settings"></a>

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

| Setting                                 | Description                                                                                                                                                   |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Hide Icon with text block on mobile** | Removes the icon and text reassurance block on phones, where every extra row pushes the checkout button further down the screen.                              |
| **Hide Trust badges block on mobile**   | Removes the payment and trust badges on phones, for the same reason. Keep them visible if hesitation about payment safety is what stops your mobile shoppers. |

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

<figure><img src="/files/64bnmOJA13VPTF0x0PGJ" alt=""><figcaption></figcaption></figure>

| Setting    | Description                                                                                                 |
| ---------- | ----------------------------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the cart contents. Increase it to separate the first product line from the header.         |
| **Bottom** | Adds space between the checkout area and the footer, so the button does not sit against the links below it. |

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

* Shoppers can review and edit the whole basket on one page before paying, rather than working inside a narrow drawer.
* Each option you turn on answers a question at the moment of payment: shipping cost, discount, gift wrapping, or a note for you.

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

* [Cart drawer](/velare/customize-your-pages/overlay-group/cart-drawer.md): the panel that slides out when a shopper adds a product without leaving the page
* [Cart](/velare/customize-your-pages/cart.md): the theme settings behind the free shipping threshold and the gift wrap product
* [Layout](/velare/set-up-your-store/layout.md): the page content width used by **Fixed width**


---

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