> For the complete documentation index, see [llms.txt](https://sitesbyseth.gitbook.io/sitesbyseth-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sitesbyseth.gitbook.io/sitesbyseth-docs/showcase/sections/cart-drawer.md). # Cart drawer The slide-in cart, opened by the header's cart icon. Everything conversion-related in it is a **block** — the milestone bar, the free gift teaser, extra milestones, and upsells — so you add, configure, or remove each feature independently. Items always list between the bar and the upsells. 👉 In the editor, the Cart drawer section is listed in the sidebar on every page. Click it, then use **Add block** for the features you want. ## Section settings ### Layout * **Style** — `Full screen card` (default; the cart takes over the screen as a rounded card) or `Side panel` (classic drawer from the right). * **Edge spacing** (0–40px, default 12px) — breathing room between the drawer and the screen edges. * **Corner radius** (0–30px, default 18px) — how rounded the card is. * **Background dim** (0–80%, default 40%) — darkness of the page behind the drawer. ### Header * **Title** — leave empty for "Cart". * **Show item count** (on) — the number badge next to the title. ### Colors All optional — leave empty to inherit theme colors. * **Background**, **Text**, **Accent** (gift tag, milestone highlights and sale prices), **Checkout button**, **Checkout button text**. ### Options * **Show quantity selector** (on) — the − / + stepper on each line; off shows quantity as plain text (good for one-per-customer drops). * **Show order note** (on) — an "Add an order note" field in the footer. * **Show taxes note** (on) — "Shipping and taxes calculated at checkout." * **Checkout button text** — leave empty for "Checkout". ### Empty cart * **Empty cart text** — leave empty for "Your cart is empty". * **Button text** — leave empty for "Continue shopping". * **Button link** — where the button goes; defaults to your All products collection. ### Checkout agreement * **Require agreement before checkout** (off) — adds a checkbox the buyer must tick to unlock the checkout button. * **Agreement text** (rich text, default "I agree to the terms of service and the no-return policy on drops.") — the label next to the checkbox. Both the toggle *and* text must be set for the checkbox to appear. ## Blocks ### Milestone bar (max 1) The progress bar above the cart items. A milestone appears once it has a threshold above 0 and a label; all milestones share one track, and the label above the bar always names the *next* locked reward ("Spend $40 more to unlock free shipping"). * **Show free shipping milestone** (on) + **Free shipping threshold** (default 150, in your store currency; 0 hides it). ⚠️ This draws the marker — create the matching real free-shipping rate under **Settings → Shipping and delivery**. * **Show free gift milestone** (on) — the gift marker. Its threshold comes from **Theme settings → Free gift**, so the marker always matches the real unlock rule. It only draws when the gift is enabled, in stock, spend-based (not "qualifying products only"), and the spend amount is above 0. * **Milestone 1 / 2 / 3** — three built-in custom slots, each with a **Spend threshold** (0 hides it), **Reward label**, and **Icon** (`Star` / `Tag` / `Gift` / `Truck` / `Discount`). ### Free gift (max 1) A teaser row inside the cart showing the still-locked gift and how to unlock it ("Unlocks at $100 — added automatically"). The gift product and rules come from **Theme settings → Free gift**. Once unlocked, the teaser hides and the gift appears as its own cart line. * **Teaser title** — leave empty to use the gift product's title. ### Extra milestone (max 4) More custom milestones beyond the bar's built-in three. * **Spend threshold** (default 250), **Reward label** (default "Free sticker pack"), **Icon** (`Star` / `Tag` / `Gift` / `Truck` / `Discount`). ⚠️ Extra milestones need the **Milestone bar block** present — they're markers on its track. ### Upsells (max 1) A "Complete the fit" row of add-on products under the cart items. * **Upsell collection** — falls back to **Theme settings → Cart → Default upsell collection** when empty. * **Heading** (default "Complete the fit"). * **Max upsell products** (1–6, default 3). Products already in the cart and the free-gift product are filtered out automatically. Single-variant products get a one-tap **Add** button; products with options get a **View** link instead. ## Pro tip 💡 Order your milestones so they escalate: free shipping at $150, a gift at $200, "Free sticker pack" at $250. The bar's "next reward" label automatically points at the nearest locked one, so every subtotal has an obvious next step — that label is the highest-leverage sentence in your cart. --- # 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://sitesbyseth.gitbook.io/sitesbyseth-docs/showcase/sections/cart-drawer.md?ask=&goal= ``` `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.