> 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/reign/sections/cart-drawer.md). # Cart Drawer & Upsells Reign's cart drawer is a revenue machine: a milestone **progress bar** that can auto-apply discount codes, a tiered **free gift selector**, an **upsell slideshow**, and empty-cart collection suggestions — all without apps. ## Where to find it The drawer lives in its own overlay group. Easiest way to edit it: 1. Open the theme editor and **click the cart icon** in the preview (add a product first so it isn't empty) 2. The **Cart drawer** section appears in the left sidebar with three blocks: **Free gift selector**, **Progress bar**, **Cart upsell** ⚠️ The drawer only appears when **Theme settings → Cart → Type** is **Drawer** (the default). ## Cart drawer section settings | Setting | What it does | Default | | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | | Collections (empty cart) | Pick collections to show as a slim strip when the cart is empty — turns dead ends into browsing | — | | Color scheme | Drawer colors | Scheme 1 | | Show quantity selector | Off = fixed quantities (shoppers can still remove lines; quantity edits happen on the cart page) | On | | Show size selector in drawer | Shoppers can change size right in the drawer; off = size shown as text | On | | Free gift selector in order summary | Moves the gift selector into the summary row | Off | | Compact total on checkout button | Hides the totals block; the amount moves onto the button as "Checkout · $120" (gift selector auto-moves into the summary) | Off | ### Drawer appearance Maximum width (320–560px, default 400), horizontal padding (24), font (Body or Heading), cart title size (14), body text size (13), product name size (12), line-item image width (72px). ## Progress bar block A milestone bar ("You're $35 away from a free gift!") with up to 3 pins. ### Setup | Setting | What it does | Default | | -------------------- | ------------------------------------------- | ------- | | Show progress bar | Master toggle | On | | Number of milestones | 1–3 pins, cart subtotals in ascending order | 2 | ### Each milestone (1–3) | Setting | What it does | Defaults (M1 / M2 / M3) | | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | | Reward type | Gift / Percent off / Amount off ($) / Free shipping | Gift / Free shipping / Gift | | Cart subtotal to unlock | Whole currency units (65 = $65) | 65 / 150 / 220 | | Reward value | Number for % or $ off (ignored for gift/shipping when a label is set) | 10 / 15 / 20 | | Label (optional) | Shown under the pin and in the headline | "Complimentary gift" / "Complimentary shipping" / "VIP reward" | | Discount code (optional) | 🔥 When the subtotal reaches this milestone, the code is **applied automatically** and the drawer updates live. Create the same code in **Shopify admin → Discounts** (with a matching minimum). Multiple unlocked codes are combined — they must be allowed to combine. Customer-entered codes are preserved. | — | ### Style Panel background, border strength, headline size (14), milestone label size (11), panel padding, bar fill color (also colors pins and glow), track background, "all unlocked" headline color, and a custom **all-tiers-unlocked message**. ## Free gift selector block Spend-threshold free gifts with up to **5 tiers** — either shopper-chosen ("Choose your gift" cards) or silently auto-added. This block has a lot of depth; the full setup guide is 👉 [**Free gift tiers**](/sitesbyseth-docs/reign/free-gift-tiers.md). Quick reference of its setting groups: Gift mode (manual/auto, auto source products/collection, confirm-before-remove), Gift products + threshold, all text labels (teaser, chooser, claim button, locked messages with `[amount]` placeholder), toggle-bar colors/size, panel colors, teaser card styling, chooser view styling, and the multi-tier carousel (tiers 2–5, each with its own threshold, products, and label overrides). ## Cart upsell block | Setting | What it does | Default | | ----------------------------- | ----------------------------------------------------------------------------------------- | ------------------- | | Upsell products | Up to 5 products, shown at the bottom of the drawer; items already in the cart are hidden | — | | Heading | Title | "You may also like" | | Full-width upsell | Bleed edge-to-edge; drag the block above the gift selector to render above it | On | | Autoplay slideshow + interval | Rotate suggestions (3–10s) | On / 5s | ## Cart smart upsells (cart page) The same upsell experience for the `/cart` page — a separate section on the Cart template with: **Show smart upsells** master toggle, the same product list/heading/full-width/autoplay settings, plus color scheme and padding. 💡 **Pro tip:** Set milestone 1 just above your current average order value (AOV $58 → set $65). That's the gap shoppers will stretch to close. Cheap high-margin items (socks, stickers, keychains) make the best gifts. --- # 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/reign/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.