Multipurpose theme documentation

Multipurpose Fashion Theme

Template Cart

Multipurpose Fashion Theme

Theme: Multipurpose Fashion Theme

Help Center > Pages & Templates > Cart


Overview

The Cart template (cart.json) renders the cart page-where customers review items, adjust quantities, and proceed to checkout. It includes the main cart section with line items, quantity controls, sticky summary, free shipping progress bar, order notes, discount code field, and product recommendations. The layout is responsive: desktop shows items left and sticky summary right; mobile stacks vertically.

Who This Is For

  • Merchants - Customize cart behavior (order notes, terms, free shipping threshold, recommendations) without code.
  • Prospective merchants - Cart supports AJAX quantity updates, remove items, and dynamic checkout buttons.
  • Theme Reviewers - Cart uses standard section schema; no inline CSS/JS (external main-cart.css, main-cart.js).

Template File

  • File: templates/cart.json
  • Format: JSON (Online Store 2.0)
  • Applies to: Cart page (automatic when customer has items)

Default Sections

Section Type Purpose
Main main-cart Line items, quantity controls, remove, subtotal, free shipping bar, order notes, terms, discount field, checkout button, recommendations

Main Cart Section Settings

The main-cart section offers extensive customization:

Cart

  • Enable order notes - Let customers add a note to their order (default: on).
  • Enable terms checkbox - Require agreement to terms before checkout.
  • Require terms acceptance - Disable checkout button until terms are accepted.
  • Terms page - Link to your terms and conditions page.
  • Enable dynamic checkout buttons - Show Shop Pay, Apple Pay, etc.
  • Show cents as superscript - Display cents in smaller text.
  • Show breadcrumbs - Home / Cart navigation.
  • Cart recommendations collection - Products from this collection appear as "You may also like".
  • Free shipping threshold - Amount in dollars (e.g. 50 for $50). Progress bar shows remaining amount. Set 0 to hide.
  • Sticky summary on desktop - Summary stays visible while scrolling.
  • Enable discount code field - Collapsible discount code input.
  • Show vendor on line items - Display vendor name per item.

Product Card (Recommendations)

  • Quick add, quick view, image ratio, hover effects, color swatches, savings display.

Empty Cart

  • Empty cart illustration - Custom image when cart is empty.
  • Empty cart title - e.g. "Your cart is empty".
  • Empty cart subtitle - Optional supporting text.

How to Customize

  1. Go to Customize > Use template dropdown or add an item to cart and navigate to cart.
  2. Select the Cart page.
  3. Configure the main-cart section settings (order notes, terms, free shipping, recommendations, etc.).
  4. Save.

For Merchants

  • Set a free shipping threshold to encourage larger orders; the progress bar updates in real time.
  • Use cart recommendations to cross-sell from a curated collection.
  • Enable order notes for gift messages or special instructions.
  • Cart layout (page vs drawer) is controlled in Theme settings > Cart.

For Theme Reviewers

  • Cart uses external main-cart.css and main-cart.js; no inline styles or scripts.
  • AJAX quantity updates via /cart/change.js; no full page reload.
  • Accessible: labels, ARIA attributes, keyboard support.

Cart Template – FAQs

The Cart Template controls how the shopping cart page looks and behaves. It displays selected products, quantities, pricing, and checkout options.

  • Product image and title
  • Selected variants
  • Quantity selector
  • Individual item price
  • Subtotal
  • Remove item option
  • Checkout button

A cart page is a full page customers visit before checkout. A cart drawer is a slide-out panel that appears without leaving the page. Both use the cart template logic.

Yes. Customers can increase or decrease quantities directly from the cart before checkout.

Yes. You can display complementary products, cross-sell items, or promotional messages inside the cart to increase average order value.

Yes. Automatic discounts and discount codes are reflected in the cart before checkout.

Yes. You can modify the cart template to adjust design, layout, and additional features.

A clean and simple cart reduces friction, builds trust, and encourages customers to complete their purchase.

Questions? Chat with us.

Ask questions about the theme docs

Hi! I'm your theme documentation assistant. Ask me anything about the Multipurpose theme setup, sections, or settings.

AI answers from theme docs