> 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/other-pages/cart.md).

# Cart

## Shopping Cart page

The Shopping Cart page is where your customers review what they've added before heading to checkout. It's one of the most important pages on your store — when customers land here, they're seriously considering buying. The better you make this page, the more confident they'll feel completing their purchase.

The Cart page is built from three private sections that work together:

* **Cart** — displays the products customers have added
* **Cart recommendation** — shows complementary or popular products to encourage more sales
* **Cart empty** — appears when the cart has no items, helping customers find something to buy

***

### What you can customize

* **Product display** — control how items appear in the cart, including images, prices, and quantities
* **Order summary** — show or hide the order total, shipping estimates, and checkout button
* **Product recommendations** — display related products to increase average order value
* **Empty cart experience** — help customers find products when their cart is empty
* **Background and spacing** — customize the visual style and layout of each section
* **Color schemes** — apply different color themes to each section

***

### How to access this template

1. In the **Theme Editor (Customize)**, click the **template selector** (dropdown at the top of the page).
2. Select **Pages** → **Cart**.
3. The page editor will show all three sections: **Cart**, **Cart recommendation**, and **Cart empty**.

> **💡 Tip:** The Cart template automatically appears at `yourstore.com/cart`. You don't need to assign it to a specific page — it's automatically applied to the cart URL.

***

### Page overview

| Area                    | What customers see                                                                                                     | Why it matters                                                                                                 |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| **Cart**                | The list of items the customer has added — product image, name, variant, quantity, price per item, and a remove option | This is the core of the page. Clear, well-presented items build trust and help customers verify their choices. |
| **Cart summary**        | The right column (on desktop) showing subtotal, shipping note, taxes info, and the checkout button                     | Seeing the total and a clear path to checkout removes hesitation and drives conversions.                       |
| **Cart recommendation** | A row of product cards shown above the footer — "You may also like"                                                    | Surfaces additional products without interrupting the checkout flow, increasing average order value.           |
| **Cart empty**          | Friendly message + featured collection of products — shown when there are 0 items in the cart                          | Turns an empty cart from a dead end into a discovery opportunity.                                              |

***

### Sections

#### Cart

This is the main section of the Cart page. It displays all products the customer has added, along with the order summary sidebar.

***

**Section settings**

**Invisible mode**

When enabled, this strips out the section's background color and padding so the cart blends seamlessly into your page. The cart content sits directly on your page background — creating a clean, modern look.

When disabled, the section gets its own background and spacing as defined by the other settings.

**Default:** *Enabled*

> **💡 Tip:** Most stores keep Invisible mode enabled so the cart feels like an integrated part of their page design. Only disable it if you want the cart section to visually stand apart from the rest of the page.

**Container width**

Controls the maximum width of the cart layout. A wider container gives your products more room; a narrower container creates a more focused, readable layout.

**Options:**

* *Inherit* — Uses your theme's default container width. Best for most stores.
* *Full width* — Stretches the cart edge-to-edge. Use when you want maximum visual impact.
* *Standard* — Limits the cart to your theme's standard width (\~1440px). Creates a clean, contained layout.
* *Wide* — Uses a wider-than-standard container (\~85% of the viewport). Good for stores with lots of product information.

**Default:** *Inherit*

> **📌 Note:** On mobile devices, the container is always full width regardless of this setting.

***

**Style & Background**

These settings let you change the visual appearance of the cart section. They only appear when **Invisible mode** is disabled.

**Inherit color scheme** — When enabled, the section uses your theme's default color scheme. When disabled, you can choose a custom color scheme from the **Color Scheme** dropdown.

**Default:** *Inherit (enabled)*

**Custom background** — Enable this to add a custom background color or gradient behind the cart section.

**Default:** *Disabled*

**Background** — When Custom background is enabled, choose what type:

* *None* — No custom background
* *Color* — A solid color behind the section

**Default:** *None*

**Color style** — When Background is set to Color, choose:

* *Solid* — A single flat color
* *Gradient* — A two-color gradient (top to bottom)

**Color code** — The actual color value. When Color style is Solid, pick a hex color. When Gradient, define a CSS gradient string.

**Default:** *Solid — #ffffff / Gradient — linear-gradient(#ffffff, #000000)*

***

**Spacing**

These settings control the padding (inner space) around the cart section. They only appear when **Invisible mode** is disabled.

**Padding** — Toggle to enable custom padding values. When disabled, the section uses your theme's default spacing.

**Default:** *Disabled*

**Top / Bottom / Left / Right** — Set the padding for each side of the section, from 0 to 200px in 2px steps.

**Default:** *0px*

**Custom on mobile** — Enable this to set different padding values specifically for mobile devices.

**Default:** *Disabled*

**Mobile Top / Bottom / Left / Right** — Padding values for mobile, from 0 to 100px in 2px steps.

**Default:** *0px*

***

**Available blocks**

The Cart section uses fixed private blocks — these are pre-configured and cannot be replaced. They are:

| Block                      | What it does                                                                        |
| -------------------------- | ----------------------------------------------------------------------------------- |
| **\_blck\_cart\_products** | Displays all products in the cart — images, names, variants, quantities, and prices |
| **\_blck\_cart\_summary**  | Shows the order total, shipping estimate note, tax info, and the checkout button    |

***

#### Cart recommendation

This section displays product recommendations above the footer on the cart page — items customers may also like. It only appears when there are products in the cart.

***

**Section settings**

**Invisible mode**

When enabled, removes the section's background and padding for a seamless look. When disabled, the section gets its own background as defined by the style settings.

**Default:** *Disabled*

**Container width**

Controls the maximum width of the recommendations section.

**Options:** *Inherit / Full width / Standard / Wide*

**Default:** *Inherit*

> **📌 Note:** Always full width on mobile regardless of this setting.

***

**Inner content layout — Alignment**

Controls the horizontal alignment of the recommendation product grid within the section.

**Options:**

* *Left* — Products align to the left edge of the section
* *Center* — Products are centered within the section
* *Right* — Products align to the right edge

**Default:** *Center*

***

**Inner content layout — Gap**

Controls the spacing between product cards in the recommendation row.

**Options:** *Default / 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / Custom*

**Default:** *Custom — 40px*

**Custom gap** — When Gap is set to Custom, enter a value from 0 to 200px.

**Default:** *40px*

***

**Custom on mobile**

Enable this to set different alignment and gap values for mobile devices.

**Default:** *Disabled*

**Mobile Alignment** — Same options as desktop: Left / Center / Right

**Default:** *Left*

**Mobile Gap** — Same options as desktop

**Default:** *20*

**Mobile Custom gap** — Custom gap value for mobile, from 0 to 200px

**Default:** *4px*

> **💡 Tip:** On mobile, left-aligning the product grid and tightening the gap to 4–12px makes the layout feel more natural on narrow screens.

***

**Style & Background**

**Inherit color scheme** — When enabled, uses your theme's default color scheme.

**Default:** *Enabled*

**Color Scheme** — When Inherit color scheme is disabled, choose a color scheme. This applies a complete color palette (background, text, button, accent) to this section.

**Default:** *Scheme 1*

**Custom background** — Enable to add a color background behind the recommendations section.

**Default:** *Disabled*

**Background** — When Custom background is enabled: *None* or *Color*

**Color style** — When Background is Color: *Solid* or *Gradient*

**Color code** — The actual color values for your chosen background style.

**Default:** *Solid — #ffffff*

***

**Spacing**

**Padding** — Toggle to enable custom padding. When disabled, uses theme defaults.

**Default:** *Disabled*

**Top / Bottom / Left / Right** — Padding from 0 to 200px in 2px steps.

**Default:** *0px*

**Custom on mobile** — Enable different mobile padding values.

**Default:** *Disabled*

**Mobile Top / Bottom / Left / Right** — Padding from 0 to 100px in 2px steps.

**Default:** *0px*

***

**Available blocks**

| Block                                              | What it does                                                 |
| -------------------------------------------------- | ------------------------------------------------------------ |
| **blck\_title**                                    | A heading above the product list — e.g., "You may also like" |
| **\_blck\_cart\_recommendation\_product\_listing** | Displays the recommended products as a grid of product cards |

***

**Block details**

**blck\_title (Heading)**

A heading block that appears above the recommendation product grid. Use it to set a compelling label like "Complete your look" or "You may also like".

The heading inherits your theme's heading typography settings and can be styled with size, color, and spacing controls in the Theme Editor.

***

**\_blck\_cart\_recommendation\_product\_listing**

Displays recommended products as a grid of product cards. The products shown are controlled by Shopify's product recommendation algorithm, based on the items currently in the cart.

***

#### Cart empty

This section appears when the customer's cart is completely empty — no items added yet. It replaces the full Cart section and gives customers a path forward: usually a featured collection of products to explore.

***

**Section settings**

**Show empty cart recommendations**

Enable this to display product recommendations in the empty cart area. The specific products shown are configured in **Theme settings** → **Cart**.

**Default:** *Enabled*

> **💡 Tip:** Keep this enabled! Even when a cart is empty, this is a valuable opportunity to show customers your best products and keep them engaged.

***

**Invisible mode**

When enabled, removes background and padding so the empty cart section blends into your page.

**Default:** *Disabled*

**Container width**

Controls the maximum width of the empty cart content.

**Options:** *Inherit / Full width / Standard / Wide*

**Default:** *Inherit*

***

**Style & Background**

**Inherit color scheme** — When enabled, uses your theme's default color scheme.

**Default:** *Enabled*

**Color Scheme** — When disabled, pick a custom color scheme.

**Default:** *Scheme 1*

**Custom background** — Enable to add a background behind the empty cart section.

**Default:** *Disabled*

**Background** — When Custom background is enabled: *None* or *Color*

**Color style** — When Background is Color: *Solid* or *Gradient*

**Color code** — Actual color values.

**Default:** *Solid — #ffffff*

***

**Spacing**

**Padding** — Enable custom padding values.

**Default:** *Disabled*

**Top / Bottom / Left / Right** — Padding from 0 to 200px in 2px steps.

**Default:** *0px*

**Custom on mobile** — Enable mobile-specific padding.

**Default:** *Disabled*

**Mobile Top / Bottom / Left / Right** — Padding from 0 to 100px.

**Default:** *0px*

***

**Available blocks**

| Block                                     | What it does                                                                                 |
| ----------------------------------------- | -------------------------------------------------------------------------------------------- |
| **\_blck\_cart\_empty\_collection\_list** | Displays a grid of products from a selected collection — the main content of your empty cart |

***

### Tips & best practices

> **💡 Tip:** Keep your Cart section in **Invisible mode** and use your page's background color. This creates a cohesive, modern feel where the cart content flows naturally with the rest of your page.

> **💡 Tip:** The Cart recommendation section is a powerful upsell tool. Make sure your "You may also like" heading is compelling — test phrases like "Complete your look" or "Customers also bought" to see what resonates with your audience.

> **💡 Tip:** Set a consistent mobile gap (20px or less) in the Cart recommendation section. On narrow screens, a tight gap prevents the layout from feeling stretched or sparse.

> **⚠️ Warning:** The Cart empty section only shows products from a collection. Make sure your collection in **Theme settings** → **Cart** has products — otherwise the empty cart will show nothing.

***

### Common questions

**Q: How do I change which products appear in the Cart recommendation section?**

A: The product recommendations are controlled by Shopify's algorithm and cannot be manually selected per product. You can adjust the recommendation type in **Theme settings** → **Cart** (e.g., "Related products," "Complementary products," etc.).

**Q: Can I add custom sections below the Cart on the cart page?**

A: Yes! Below the built-in Cart, Cart recommendation, and Cart empty sections, you can use **Add section** to insert any Custom Section — like a promotional banner, newsletter signup, or testimonial row.

**Q: How do I change the empty cart message?**

A: The empty cart message is controlled by Shopify's cart settings, not the theme. Go to **Store Admin** → **Settings** → **Store languages** to edit the "Your cart is empty" message.

**Q: Can I show the cart as a slide-out drawer instead of a full page?**

A: Yes. The theme supports a Mini Cart overlay (slide-out drawer) configured in **Theme settings** → **Cart**. The full Cart page at `yourstore.com/cart` remains available as a fallback.

***

### Related pages

* Global Theme Settings — configure defaults for container width, colors, and spacing
* Custom Section guide — add custom sections to your cart page
* Product Page Template — the page customers come from before reaching the cart
* [Checkout settings](https://help.shopify.com/en/manual/checkout-settings) (Shopify Help) — manage checkout flow and order confirmation