> 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/theme-settings/cart.md). # Cart Configure cart behavior, post-add actions, free shipping bar, pre-order notice and consent checkbox — everything between "add to cart" and checkout. {% hint style="info" %} **Theme Editor → Theme settings → Cart** {% endhint %} ### The cart is where browsers become buyers Every friction point between "add to cart" and "checkout" costs you a conversion. Avante's cart settings are designed to remove those friction points — with the right post-add behavior, a visual free shipping motivator, clear pre-order expectations, and a consent checkbox that handles compliance without a third-party app. *** ### General **Choose name and icon** — selects the cart button label and icon style in the header: `Cart`, `Basket`, or `Bag`. **Enable cart drawer** — clicking the cart button opens a slide-in drawer instead of navigating to the cart page. **Action after adding to cart** — controls what happens when a customer clicks Add to cart: | Option | Behavior | Best for | | ------------------------------------------- | ----------------------------------------------------------------- | -------------------------------------------- | | **Display cart drawer** | Opens the cart drawer immediately | Stores where multi-item purchases are common | | **Display success window with suggestions** | Shows a confirmation popup with product recommendations (upsells) | Stores that want to surface related products | | **Disabled** | Item added silently, no interruption | High-intent, single-SKU stores | {% hint style="info" %} To configure the Success window with suggestions, go to **Theme settings →** [**Cart drawer**](/docs/avante-themes/theme-settings/cart-drawer.md). {% endhint %} {% hint style="success" icon="sparkles" %} **Pro tip:** Set the action to **Display cart drawer** and keep **Enable cart drawer** on — this creates a seamless one-tap path from product page to checkout. {% endhint %} **Disable shopping functionality** — hides the cart and all Add to cart buttons across the store. Useful for B2B or catalog-only stores. *** ### Checkbox Adds an optional consent checkbox to the cart before checkout — for age verification, GDPR acknowledgment, or Terms and Conditions. | Setting | Description | | -------------------- | --------------------------------------------------------------------------------------- | | **Enable checkbox** | Shows the checkbox in the cart | | **Make it required** | Prevents checkout until the checkbox is ticked | | **Text** | Label text next to the checkbox. Supports links (e.g. to your Privacy Policy or Terms). | {% hint style="warning" %} Adding a checkbox does not automatically make your store GDPR compliant. See [Shopify's GDPR guide](https://help.shopify.com/en/manual/privacy-and-security/privacy/gdpr/comply-with-gdpr) for more information. {% endhint %} *** ### Media Controls how product images appear in the cart. | Setting | Description | | ------------------------------ | --------------------------------------------------- | | **Image ratio** | Aspect ratio for product images in the cart | | **Focal point** | Which part of the image stays centered when cropped | | **Fit media inside container** | Scales images to fit without cropping | *** ### Free shipping bar A free shipping threshold shown as a visual progress bar is one of the highest-converting features in e-commerce. When a customer can see they're $12 away from free shipping, they add another item. | Setting | Description | | -------------------------------- | --------------------------------------------------------------- | | **Enable on cart page** | Shows the bar on the /cart page | | **Enable on cart drawer** | Shows the bar inside the cart drawer | | **Free shipping minimum amount** | One or several thresholds, one per line — see the formats below | | **Progress color** | Color of the bar before the threshold is reached | | **Complete color** | Color of the bar when the threshold is met | **Free shipping minimum amount** is a multi-line field, so you can set a different threshold for each market. Enter one amount per line, in any of these three formats: | Format | Example | When it applies | | ----------- | ----------- | ------------------------------------------------------------- | | Amount only | `300` | Every market | | Currency | `USD:300` | The cart currency is USD | | Country | `DE:EUR:80` | The customer's country is Germany **and** the currency is EUR | The theme reads the lines from top to bottom and stops at the first one that matches. A line with an amount only matches everything, so put your country- and currency-specific lines first and keep the general amount on the last line. ``` DE:EUR:80 USD:300 300 ``` {% hint style="info" %} If an amount was saved earlier for the `cart.free_shipping_minimum` string in the language editor, that number is still used and this field is ignored. Clear it in the language editor to switch over to per-market lines. {% endhint %} *** ### Preorder notice A message shown in the cart when it contains a pre-order item — a product that uses the `product.preorder` template. Pre-order carts are where customers hesitate most: a single line explaining that the order ships as one parcel removes the "when will the rest arrive?" question before checkout. Everything in this group is off by default. | Setting | Description | | --------------------------- | ----------------------------------------------------------------- | | **Enable on cart page** | Shows the notice on the /cart page | | **Enable on cart drawer** | Shows the notice inside the cart drawer | | **Text** | The message itself | | **Enable badge on product** | Adds a pre-order badge to the pre-order line item inside the cart | The two toggles are independent — enabling the notice on the cart page does not enable it in the cart drawer. The default text reads: *There is a pre-order item in your cart. The entire order will be shipped in one package once all items are in stock.* Style, corner radius, text size and colors for the notice are set in the same group. {% hint style="info" %} **Enable badge on product** works only together with **Show product pre-order badge** in **Theme settings →** [**Product card**](/docs/avante-themes/theme-settings/product-card.md). If that badge is turned off, nothing appears in the cart. {% endhint %} --- # 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://staylime.com/docs/avante-themes/theme-settings/cart.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.