> ## Documentation Index > Fetch the complete documentation index at: https://voyager-theme.fasil.in/llms.txt > Use this file to discover all available pages before exploring further. # Cart drawer > The slide-in cart — how it opens, refreshes, and renders accelerated checkout. The Voyager cart is a drawer by default — it slides in from the right edge on any cart-icon click, on any add-to-bag submission, and on the empty cart-icon click. It coexists with the full cart page at `/cart`; both share the same data and Liquid logic. ## Triggers The drawer opens in four situations: | Trigger | Behaviour | | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Cart icon click** | Any element with `[data-cart-open]` — usually the bag icon in the header. | | **Add-to-bag submission** | When a `form[action*="/cart/add"]` submits successfully via AJAX, the drawer auto-opens on the new line item. | | **Post-add server fallback** | If AJAX is blocked (password-protected dev stores), the form submits natively, the page reloads with `?cart_added=1`, and the drawer auto-opens on next paint. | | **Programmatic** | Call `window.refreshCart()` from any custom script — it re-fetches the drawer's markup but doesn't auto-open. | The drawer closes on backdrop click, on the close (`×`) button, on **Continue shopping**, on `Escape`, and on **Proceed to Checkout** (which then routes to Shopify's hosted Checkout). ## How the live refresh works The cart drawer is server-rendered from the Liquid `{{ cart }}` object. To keep the displayed item count, prices, and discounts honest after every add, Voyager uses Shopify's **Section Rendering API**: ```js theme={null} // inside theme.js async function refreshCart() { const r = await fetch('/?sections=cart-drawer'); const json = await r.json(); const html = json['cart-drawer']; // …parse and swap the drawer's innerHTML… } ``` The fetch is small (just the drawer markup, not the whole page) and runs after every successful add-to-bag. The result: line totals, the subtotal, and the item count chip in the header are always in sync without a full page reload. If you're writing a custom integration — a "Buy with us" button on a custom Liquid section, for example — call `window.refreshCart()` after your POST to `/cart/add.js` to keep the drawer fresh. ## Accelerated checkout The drawer's checkout button is followed by the accelerated-checkout stack rendered by Shopify's standard `payment_button` filter: | Wallet | Renders when | | -------------- | ---------------------------------------------------------- | | **Shop Pay** | The customer has Shop Pay enabled (most do) | | **Apple Pay** | On Safari over HTTPS with a wallet configured | | **Google Pay** | On Chrome with a wallet configured | | **PayPal** | If you've enabled PayPal Express in your Payments settings | You don't configure these in the theme — they're a function of your Shopify Payments setup. The drawer just gives them room to render. If you don't have any third-party wallets enabled, only the primary **Proceed to Checkout** button appears. ## Empty state When `cart.item_count == 0`, the drawer renders a quiet empty state — a script-style "Empty" wordmark, a one-line invitation, and a **Continue shopping** link to your `all` collection. ``` Empty Your bag is quiet. Begin with a shirt or a pair of trousers from the Summer collection. [Continue shopping] ``` Every piece of copy in the drawer — the header eyebrow, the empty headline, the empty body, the CTA, the subtotal label, the shipping note, both buttons — is **merchant-editable** via the section's own schema in the Theme Customizer. The cart drawer is now a true section (not a snippet), so its settings appear in the customizer just like any other section. ## Editable copy Open the Theme Customizer → click the cart icon to open the drawer in preview → **Cart drawer** section in the right-rail picker. | Setting | Default | Where it renders | | --------------------------------- | ----------------------------------------------------------------------------------------- | -------------------------------------------------- | | **Eyebrow above piece count** | `Your bag` | Small caps above the "N pieces" line in the header | | **Script headline** (empty state) | `Empty` | The large script word in the empty state | | **Body** (empty state) | `Your bag is quiet. Begin with a shirt or a pair of trousers from the Summer collection.` | The paragraph below the script | | **CTA label** (empty state) | `Continue shopping` | The link inside the empty state | | **Subtotal label** | `Subtotal` | The left side of the totals row in the footer | | **Shipping note** | `Shipping & taxes calculated at checkout · Complimentary worldwide` | The small line under the subtotal | | **Checkout button** | `Proceed to Checkout →` | The primary CTA in the footer | | **Continue shopping button** | `Continue shopping` | The text link below the checkout button | The copy is intentionally on-brand rather than generic — tune all eight strings to your house voice without editing theme code. ## Mobile vs desktop | Viewport | Behaviour | | ---------------------- | ------------------------------------------------------------------------------------------------------------------ | | **Desktop (≥ 768 px)** | Drawer slides in from the right edge, occupies \~440 px width, leaves the rest of the page dimmed by the backdrop. | | **Mobile (\< 768 px)** | Drawer covers the full viewport width. Backdrop is implicit (no dim layer needed). | On both, the body scroll is locked while the drawer is open (`document.body.style.overflow = 'hidden'`) so swipes inside the drawer scroll the line items, not the page beneath. ## Cart settings A handful of theme-level cart settings affect the drawer's contents. Find them in **Theme settings → Cart**. | Setting | Default | Effect | | ---------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------- | | **Cart type** | `Drawer` | Set to `Page` if you'd rather the cart icon link to `/cart` directly; set to `Notification` for a small popup instead of a full drawer. | | **Show order notes** | `true` | Renders an expandable "Add a note" field above the subtotal. | | **Show discount code field** | `true` | Displays applied discount codes (Shopify validates entry at Checkout — the field is read-only here). | ## What's next The product modal that fires from any collection-card "Select Options" click. The full-page cart, for visitors who'd rather not work in a drawer.