> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/page-templates/cart.md). # Cart Customize your store's cart page — the last step before checkout — including the product list, order summary, recommendations, and the empty-cart experience.
The Shopping Cart page is where customers review their selections before proceeding to checkout. It's a critical moment in the purchase journey — when customers reach this page, their intent to buy is high. An optimized, clear, and reassuring cart page reduces hesitation and builds confidence. The Cart page is built from three sections that work together based on the customer's state: * **Cart** — displays the products a customer has added, alongside the order subtotal. * **Cart recommendation** — shows complementary products to encourage larger order values. * **Cart empty** — appears when the cart has zero items, giving customers an immediate path to discover more products. *** ### What you can customize * **Product display** — control how items appear in the cart, including layout spacing * **Order summary** — the cart displays subtotals and routes customers securely to Shopify's checkout * **Upsell recommendations** — fine-tune the product recommendations shown below the cart * **Empty cart experience** — configure what customers see when they have no items in their cart * **Styling and container width** — apply color schemes and specific container widths to match your brand *** ### How to access this template 1. In the **Theme Editor (Customize)**, click the template selector (the dropdown menu at the very top). 2. Select **cart** from the menu. The page editor will show three built-in sections: **Cart**, **Cart recommendation**, and **Cart empty**. {% hint style="info" icon="note-sticky" %} **Note:** The Cart template is bound to the `/cart` URL. You do not need to assign it to any pages manually. {% endhint %} *** ### Page overview | Area | What customers see | Why it matters | | ------------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | | **Cart Items** | Selected products with their variants, quantities, price, and a remove button | Clear presentation builds trust and lets customers verify exactly what they are paying for | | **Order Summary** | Subtotal, applicable tax or shipping notices, and the checkout button | A clear total removes ambiguity and reduces checkout hesitation | | **Recommendations** | "You may also like" product cards below the main cart | Surfaces relevant add-ons when customers are already in buying mode | | **Empty Cart** | A friendly message and a featured collection when the cart is empty | Turns a dead-end into a discovery path by guiding customers back to your best products | *** ### Sections #### Cart This is the core section of the page. It displays everything the customer has added and guides them toward Shopify's checkout flow. *** **Section settings** **Container settings** **Invisible mode** When enabled, the cart section drops its background and padding. The cart sits directly on your page background, creating a clean, open look that feels fully integrated into the page. {% hint style="success" icon="lightbulb" %} **Tip:** Keep Invisible mode enabled to ensure the cart feels part of the page template rather than a visually isolated block. {% endhint %} **Container width** Controls how wide the main cart content stretches across desktop screens. **Options:** * *Inherit* — Uses the site-wide maximum width configured in Theme Settings. * *Full width* — Spans edge to edge, maximizing horizontal space. * *Standard* — Limits width for comfortable reading and focused attention. * *Wide* — A wider layout, good for carts with detailed line items. {% hint style="info" icon="note-sticky" %} **Note:** On mobile, this setting is ignored. The cart automatically spans full width to ensure buttons are large and easy to tap. {% endhint %} **Style & Background** These color settings only take effect if **Invisible mode** is disabled. **Inherit color scheme** When enabled, the cart uses the site-wide background and text color scheme, maintaining visual continuity with the rest of your store. **Custom background** Enable this to apply a unique background to the Cart section — useful when you want the cart area to contrast visually with the rest of the page. *** **Available blocks** The Cart section uses two fixed blocks to ensure checkout routing works correctly: | Block | What it does | | ----------------- | ---------------------------------------------------------------------------------------- | | **Cart products** | Displays all line items in the cart — product image, title, variant, quantity, and price | | **Cart summary** | Shows the order subtotal, tax notices, and the Checkout button | *** #### Cart recommendation This section appears automatically below the cart items and shows suggested products. It disappears automatically when the cart is empty. *** **Section settings** **Inner content layout** **Alignment** Positions the recommended products within the section container. **Options:** *Left / Center / Right* **Gap** Controls the space between each recommended product card. A wider gap separates products distinctly; a tighter gap creates a more connected, carousel-like feel. **Options:** *Default / 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / Custom* **Custom on mobile** Enable this to define a separate gap for phone screens, preventing product cards from getting too close together on narrow displays. {% hint style="success" icon="lightbulb" %} **Tip:** On mobile, setting Alignment to *Left* and Gap between `4` and `12px` delivers the most natural browsing feel. {% endhint %} *** **Available blocks** | Block | What it does | | ------------------------ | -------------------------------------------------------------------------------------- | | **Heading** | Displays a title above the recommendations — for example, "Complete your look" | | **Recommended products** | Shows product cards pulled from Shopify's recommendation engine based on cart contents | **Heading** Provides context for the upsell. Write a warm, action-oriented phrase like "You might also love" rather than a flat label like "Related products". **Recommended products** No configuration needed. The theme reads the items in your customer's cart and asks Shopify's recommendation algorithm to surface the most relevant products. *** #### Cart empty This section appears when a customer visits the `/cart` page with no items, or after they remove their last item from the cart. *** **Section settings** **Show empty cart recommendations** When enabled, a grid of products fills the empty cart screen. These products come from the collection you specify in **Theme settings** → **Cart**. {% hint style="warning" icon="triangle-exclamation" %} **Warning:** Disabling this leaves customers with an empty screen and no clear path forward. Always show a "Best Sellers" or "New Arrivals" collection to guide customers back into browsing. {% endhint %} *** ### Adding more sections You can add Custom Sections directly onto the Cart page template below the core cart content. {% hint style="success" icon="lightbulb" %} **Tip:** Consider adding a trust icons section below the recommendations to reassure customers about secure checkout, or a contact information block in case they have a billing question. {% endhint %}