Section: Cart Page

Everything you'll need to know on how to setup your Cart Page section.

The Cart Page section is the full-page cart visitors see at /cart. It uses the same 4 blocks as the Cart Drawer (Cart items, Promo banner with milestone progress bar, Upsell options, Cart footer) — but in a roomier layout instead of a slide-in panel. Use it as a fallback for desktop visitors who prefer a full-page checkout flow, or for visitors who land directly on the cart URL.

The Cart page is a system template that automatically renders at the /cart URL. The Cart section is already in place inside the template.

1) In the theme editor, switch to the Cart template using the page selector at the top.

2) Click on the Cart Page section in the left sidebar.

Color scheme for the entire cart page. Pick from the schemes set up in Theme Settings → Colors.

The Cart Page supports the same 4 block types as the Cart Drawer, each limit: 1. They render in the order you arrange them. Drag and drop to reorder.

Displays the list of products in the cart with thumbnails, titles, variants, quantity selectors, and remove buttons. Has just one setting: Color scheme — to make this block stand out from the rest of the page if you want.

A milestone progress bar at the top of the cart that motivates visitors to add more to unlock perks. Supports up to 4 progressive milestones, each with a threshold (cart total in your shop currency), a type (Free shipping / Free gift / Discount code), an icon, and progress + unlocked messages.

Heading text shown at the top of the promo banner. Default: LAST CHANCE TO SAVE.

Subtext below the title. Default reminds visitors of the promotional thresholds.

Color scheme for the promo banner block specifically.

Each of the 4 milestones has the same fields: Enable, Threshold (cart total in shop currency), Type (Free shipping / Free gift / Discount code), Icon (Shipping / Gift / Percent), Progress message (use [amount] as a placeholder for the remaining total), Unlocked message, Free gift product (when Type is Free gift), and Discount code (when Type is Discount code). Configure them progressively — for example: Milestone 1 = $25 free shipping, Milestone 2 = $50 free gift, Milestone 3 = $75 discount code.

Bundles together several optional cart enhancers: recommended products, order note, gift wrap, shipping calculator, delivery date picker, and discount code input. Toggle each independently.

Tick this box to display a horizontal carousel of recommended products. Visitors can add items without leaving the cart.

Heading shown above the upsell carousel. Default: Recommended products.

The list of products to recommend (up to 10). Pick specific products. If left empty, falls back to Shopify's automatic recommendations.

Number of upsell products to show (2–10). Default: 4.

Tick this box to show variant options on upsell products with multiple variants.

Label on the Add button. Default: ADD.

Tick this box to display a textarea where customers can add a note to their order. The note is included with the order in your admin.

Label shown above the note field. Default: ADD A NOTE TO YOUR ORDER.

Placeholder text inside the note textarea.

Tick this box to display a gift wrap toggle. Adds a gift wrap product to the cart when ticked.

Label next to the gift wrap toggle. Default: ADD GIFT WRAPPING.

The product added when gift wrap is ticked. Create a product called Gift wrap tagged with gift-wrap.

Optional image shown next to the gift wrap toggle.

Tick this box to display the gift wrap product description below the toggle.

Tick this box to display a shipping rate calculator. Reduces checkout abandonment from shipping surprises.

Label for the calculator. Default: CALCULATE SHIPPING RATES.

Tick this box to display a date picker. Date is saved as an order note.

Label above the date picker. Default: SELECT DELIVERY DATE.

Optional note below the picker. Default: We'll do our best to deliver on your preferred date.

Tick this box to display a discount code field. Visitors can apply codes before checkout.

Label above the discount code input. Default: APPLY A DISCOUNT CODE.

The bottom area with subtotal, tax/secure notes, payment icons, and the Checkout button.

Tick this box to display the tax/shipping reminder.

Default: Taxes & Shipping calculated at checkout.

Tick this box to display up to 6 payment provider icons under the Checkout button.

Upload up to 6 payment icons. Recommended: 60 × 40 px, transparent PNG.

Tick this box to display the secure-checkout reassurance note.

Default: 100% secure and protected payments.

Most modern stores use the Cart Drawer as the primary cart UX (faster, never leaves the page). The Cart Page at /cart serves as a fallback when visitors land directly on the URL or prefer the full-page experience. You can configure both with the same milestones and upsells for consistency.

Each section has its own settings — they don't sync automatically. To keep the experience consistent, configure both with the same milestone thresholds, types, and messages. Otherwise visitors may see different perks in the drawer vs the page.

This is a global setting in Shopify, not in the theme. Go to Settings → Checkout → Cart type. Choose Page to always send visitors to /cart; choose Drawer to use the slide-in cart. The cart icon click is wired up automatically.

If you have Cart type set to Direct to checkout in Shopify settings, clicking the cart icon skips both drawer and page and goes straight to checkout. Switch to Page or Drawer to enable the cart sections.

The cart page can't be removed (Shopify always serves a cart at /cart), but you can simplify it by removing optional blocks (Promo banner, Upsell options) and keeping only Cart items + Cart footer for a minimal layout.