Cart

The Cart template gives shoppers a full-page review of their items before checkout. Use it when customers need to review quantities, shipping estimates, order notes, discounts, and payment methods in one place.

Open the Cart template

1. From Shopify admin, go to Online Store > Themes > Customize.
2. Use the page selector to open Cart.
3. Select the Cart section.
4. Preview both an empty cart and a cart containing multiple items, a discount, and a quantity rule before saving.

Template order

The current saved Cart template contains these sections, in order:

1. Cart
2. Recently viewed products

The Recently viewed section depends on browsing history and can be empty for a new session.

Features

Show shipping estimator

• Controls: Shows the shipping-estimate disclosure on the cart page. The current default is on.
• Use it when: Enable it when customers should be able to enter a destination before checkout.
• Verify later: Check country/region, province/state, postal code, loading, no-rate, and error states with an approved fixture.

Show order note

• Controls: Shows the order-note field. The current default is on.
• Use it when: Enable it when customers need to add delivery or order instructions that the store can act on.

Show payment icons

• Controls: Shows the payment methods enabled for the store. The current default is on.
• Use it when: Keep it on when payment-method recognition helps customers complete checkout.
• Dependency: Icons are shown only when the store has enabled payment types to display.

Spacing

Section spacing

• Controls: Sets Cart section spacing to None, Small, Medium, or Large. The current default is Medium.

Top spacing

• Controls: Adds or removes top spacing. The current default is on.

Bottom spacing

• Controls: Adds or removes bottom spacing. The current default is on.

Cart states

Empty cart

An empty cart shows the cart empty message and a continue-shopping link. The destination uses the global cart empty-button link setting when configured. Verify the final link and icon state before documenting it.

Cart with items

The full cart shows product media, product title, variant details, unit price, quantity controls, line totals, discounts when present, subtotal, total, checkout, and optional payment icons. Quantity and remove actions should be reviewed with an approved cart fixture.

Shipping estimator

When enabled, the estimator can show destination fields and a result state. The current locale includes loading, no-rate, and error messages. Do not publish a shipping promise based on a screenshot; rates depend on Shopify shipping configuration and the entered destination.

Order note

When enabled, the order note field is shown in the cart summary. Use only a fixture value during QA; never place customer addresses, phone numbers, or private delivery instructions in screenshots.

Recently viewed products

The second section is Recently viewed products. It has no merchant-selected product list; it is populated from the customer's browsing history.

Heading

• Eyebrow: Optional short label. The current default is Continue shopping.
• Heading: Section heading. The current default is Recently viewed.
• Text: Optional supporting rich text.
• Heading alignment: Left, Center, or Right; the current default is Left.
• Content width: Small, Medium, or Large; the current default is Medium.

Products

• Full width: Uses the full available width when enabled. The current default is on.
• Stack products: Uses a stacked presentation instead of a carousel-style presentation. The current default is off.
• Show carousel progress bar: Shows the progress bar when products are not stacked. The current default is on and the control is not applicable when Stack products is enabled.
• Products to show: 2–12 products; the current default is 6.
• Products per row (mobile): 1 or 2; the current default is 2.
• Products per row (desktop): 2–6 products per row; the current default is 4.

Spacing

• Section spacing: None, Small, Medium, or Large; the current default is Medium.
• Top spacing: Adds or removes top spacing. The current default is on.
• Bottom spacing: Adds or removes bottom spacing. The current default is on.

Desktop and mobile behavior

A final guide should compare the same empty and populated carts at desktop and mobile widths and verify:

• line-item media, variant details, quantity controls, and remove actions;
• shipping-estimator fields and result states;
• order-note and payment-icon placement;
• checkout controls and any additional payment actions;
• the Recently viewed section when browsing history is present or absent.

Exact breakpoints and unverified drawer/page transitions are intentionally not stated here.

Media recommendations

Use product media with meaningful alternative text. Keep test carts limited to approved fixture products and do not capture real customer or order information. Exact media dimensions require approved fixture testing.

Accessibility and motion

Verify labels and focus for quantity controls, remove actions, shipping fields, order note, checkout, and payment actions. Confirm that cart updates announce their result and that reduced-motion behavior does not hide an important price or status update.

Common checks

• If the shipping estimator is absent, confirm Show shipping estimator and the Cart template assignment.
• If payment icons are absent, confirm Show payment icons and the store's enabled payment types.
• If the order note field is absent, confirm Show order note.
• If Recently viewed products are empty, browse approved product fixtures in the same session before treating it as a theme issue.

Related guides

• Cart theme settings
• Product
• Product card
• Templates overview

[!NOTE] The labels, options, dependencies, defaults, and saved template order above come from the current Cart template and section schemas. Shipping rates, cart updates, responsive layout, and recently viewed behavior remain pending accepted browser verification.