> 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/skeleton/sections/cart-drawer.md). # Cart drawer The slide-out cart that opens whenever something is added to cart or the header's Cart button is clicked. It updates without page reloads and hosts three of Skeleton's biggest conversion tools as blocks: the **milestone progress bar**, **cart upsells**, and the **free gift**. **Where to find it:** open the theme editor on any page and click **Cart drawer** in the left panel. ## Settings * **Drawer style** — **Side panel** (default) slides in from the right; **Full screen** covers the whole viewport with the cart content centered. Full screen is dramatic and focuses attention completely on checkout. * **Show quick payment buttons** (on by default) — Shop Pay, PayPal, Google Pay, etc., under the checkout button — whichever accelerated methods are enabled in your store's payment settings. * **Empty cart button link** — where the "Continue shopping" button on an empty cart goes. Defaults to your all-products collection; point it at your main drop instead. ### Options * **Show quantity selector** (on by default) — +/− steppers on each line. When off, quantity shows as plain text. * **Show order note** (on by default) — a collapsible "order note" box customers can type into; the note comes through on the order. ### Terms checkbox * **Require agreement before checkout** (off by default) — customers must tick a checkbox before the checkout button activates. The quick payment buttons stay hidden until it's ticked too (they'd otherwise skip the cart). * **Agreement text** (default "I agree to the terms and conditions and the refund policy") — supports links, so link the words to your actual policy pages. ### Colors Leave any color empty to use the global theme colors. * **Background**, **Text**, **Borders** — the drawer's own palette. * **Checkout button** and **Checkout button text** — override just the checkout button. ## Blocks ### Milestone progress bar (1 max) One progress bar with up to 3 spend milestones (free shipping, free gift, a discount…). Icon pins sit along the track and get a checkmark as each milestone is reached. Set a milestone's amount to 0 to hide it. * **Progress text** (default "Spend \[amount] more to unlock \[reward]") — `[amount]` is replaced with the remaining spend, `[reward]` with the next milestone's label. * **All unlocked text** (default "You unlocked every reward") — shown once every milestone is passed. * **Milestone 1 / 2 / 3**, each with: * **Spend amount** — in your store currency (defaults: 150 / 0 / 0). Progress is measured against the *highest* milestone amount. * **Reward label** (defaults: "Free shipping" / "Free gift" / empty). * **Icon** — **None**, **Shipping**, **Gift**, or **Discount**. 💡 Progress counts the cart subtotal *excluding* free gift lines, so the gift itself never inflates the bar. ### Cart upsells (1 max) A horizontally scrolling row of add-on products under the line items. * **Heading** (default "You may also like"). * **Upsell collection** — falls back to **Theme settings → Cart → Upsell collection** when empty. * **Max products** (1–8, default 4). Smart behavior built in: products already in the cart are skipped, sold-out products never show, one-variant products add straight to cart from the button, and multi-variant products open the quick view so the customer can pick a size without leaving the cart. ### Free gift (1 max) Automatically adds a gift product to the cart when spend crosses a threshold — and removes it if the cart drops back below. ⚠️ **Read** [**Free gift setup**](/sitesbyseth-docs/skeleton/size-finder/free-gift.md) **before enabling this.** The theme adds the gift but **cannot change its price** — the gift product must be priced **$0** in your catalog, or customers are charged for it at checkout. The cart only shows "FREE" when the line really costs $0. * **Enable free gift** (on by default for the block). * **Gift products from** — **Selected products** (default) or **Collection (random pick)**. * **Gift products** — the product list for "Selected products". The gift's size is matched to the sizes already in the cart when possible. * **Gift collection** — for "Collection": a random in-stock product from this collection is added as the gift. * **Tier 1 spend threshold** (default 100) — cart subtotal (excluding gifts) required to unlock the gift, in your store currency. * **Tier 2 (optional)**: **Enable tier 2** (off by default), **Tier 2 spend threshold** (default 200), **Tier 2 gift products**, **Tier 2 gift collection**. Show the gift's progress with the Milestone progress bar block — use the Gift icon and a matching amount. 💡 **Pro tip:** the drawer is your last word before checkout, so keep it fast and reassuring: milestone bar at the top, two or three cheap upsells, terms checkbox only if your lawyer insists. If you enable the free gift, set milestone 2's amount to exactly the gift threshold so the bar and the gift always tell the same story. --- # 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/skeleton/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.