Skip to main content
The Main Cart template displays the dedicated cart page where customers review items, adjust quantities, apply discounts, and proceed to checkout at /cart URL. This full-page cart experience provides comprehensive item management, totals, shipping notifications, payment terms, and checkout options for thorough review before purchase. Use this template to create a focused checkout experience with optimal line item readability that reduces cart abandonment and builds purchase confidence.

​
Template Settings

The Main Cart template provides layout and styling controls:
Control the width of the cart container:
  • Narrow (default) - Optimized for cart readability (~900px)
  • Page - Standard page width (~1200px)
  • Fluid - Extends to container edges
Narrow width is recommended for cart pages as it creates focused checkout experience with optimal line item readability.
  • Select from available theme color schemes
  • Default: scheme-1
  • Top Spacing: 0, 1, 2 (default), 4, or 6
  • Bottom Spacing: 0, 1, 2 (default), 4, or 6
  • None (default)
  • Top Border
  • Bottom Border
  • Both Borders

​
Cart Features

While template settings are minimal, the cart automatically includes:

​
Cart Header

  • Displays “Shopping Cart” or localized equivalent
  • Rendered as H1 heading
  • Centered alignment
Optional shipping threshold notification:
  • Controlled by: Theme settings → Cart → Shipping notification
  • Features:
    • Shows progress toward free shipping threshold
    • Displays remaining amount needed
    • Encourages increased cart value
Enable shipping notifications in theme settings to boost average order value by showing customers how close they are to free shipping.

​
Empty Cart State

When cart is empty:
  • Heading: “Your cart” or localized title
  • Subheading: “Your cart is empty” message
  • Continue Shopping Link: Prominent link to browse products
The empty cart state encourages shopping rather than leaving customers at a dead end.

​
Cart Items Section

For each product in cart:Display:
  • Product image (clickable to product page)
  • Product title and variant details
  • Price (original and discounted if on sale)
  • Quantity selector (+/- buttons or input field)
  • Line total (price × quantity)
  • Remove button/link
Functionality:
  • Update quantity without page reload (AJAX)
  • Remove items instantly
  • Automatic price recalculation
  • Real-time subtotal updates
Quantity changes update inventory in real-time. If item becomes unavailable during checkout, customer will be notified.

​
Cart Summary

  • Displays cart subtotal before shipping/taxes
  • Updates dynamically as quantities change
  • Formatted in shop currency
  • Prominent display (large, bold)
If using Shopify’s installment payment options:
  • Displays payment plan eligibility
  • Shows installment amounts (e.g., “4 payments of $25”)
  • Pay later options (Shop Pay Installments, Afterpay, Klarna, etc.)
Payment terms display is automatic when installment payment methods are enabled in Shopify Payments settings.
  • Input field for discount/promo codes
  • Apply button
  • Shows applied discounts with amounts
  • Remove discount option
  • Error messages for invalid codes
Cart-level discount codes are different from automatic discounts. Both can apply simultaneously.
Optional special instructions field:
  • Text area for customer notes
  • Appears in order details
  • Useful for gift messages, delivery instructions
  • Optional feature (can be disabled in theme)
Primary call-to-action to proceed:
  • Large, prominent button
  • “Checkout” or “Proceed to Checkout” label
  • Directs to /checkout URL
  • Disabled if cart is empty
  • May show payment icons below (Visa, Mastercard, etc.)

​
Additional Features

  • Spinner shown during cart updates
  • Prevents duplicate actions while processing
  • Improves UX during AJAX operations
Optional product recommendations below cart:
  • “You may also like” or similar heading
  • Product suggestions based on cart contents
  • Encourages additional purchases
  • Powered by Shopify’s recommendation engine
Cart recommendations are controlled by separate section settings and can be reordered or removed from the cart template.
Express checkout options:
  • “Buy now” style buttons (Shop Pay, PayPal, Apple Pay, Google Pay)
  • One-click checkout for supported payment methods
  • Appear above or below main checkout button
  • Configurable in theme settings

​
Best practices

Cart page design

Keep narrow width for focused experience, use high-contrast checkout button, show clear pricing breakdown, display trust badges near checkout button, minimize distractions. Cart pages should prioritize conversion and avoid busy designs.

Shipping thresholds

Set threshold 20-30% above average order value, display progress clearly (“Add $15 more for free shipping!”), use encouraging copy not demanding tone, test different threshold amounts for optimal AOV. Configure in theme settings.

Mobile optimization

Use large touch targets for quantity buttons, easy-to-tap remove buttons, sticky checkout button (always visible), simplified single-column layout, finger-friendly input fields. Over 60% of traffic is mobile - test thoroughly on actual devices.

Trust signals

Display accepted payment methods, show security badges (SSL, verified merchant), include money-back guarantee, highlight free returns policy, show customer reviews/ratings count. Add Trust Indicators section below cart summary to reduce abandonment.

Cart abandonment prevention

Show shipping costs early, display total processing time, offer multiple payment options, enable express checkout (Shop Pay, PayPal), provide easy exit (“Continue Shopping”), consider exit-intent popups. Average abandonment rate is 70% - small UX improvements significantly impact revenue.

​
Use Cases

Standard E-commerce

Full cart review with quantity edits, discount codes, and clear checkout path

High-Value Items

Detailed item review with payment installment options and trust signals

Quick Purchase

Streamlined cart with express checkout buttons for fast conversion

Gift Shopping

Cart notes for gift messages and special delivery instructions

Cart Drawer

Slide-out mini cart for quick review without leaving current page

Cart Recommendations

Product suggestion section that can be added to cart template

Checkout

Shopify’s checkout page (not customizable via templates in most plans)

​
Extending the Cart Page

Enhance the cart template by adding sections:

Trust Indicators

Add security badges, guarantees, and trust signals above checkout button

Cart Recommendations

Display “Frequently bought together” or “Complete the look” products

FAQ Accordion

Answer common pre-purchase questions (shipping, returns, sizing)

Newsletter Signup

Capture emails from cart visitors who don’t complete purchase
Add sections to cart template: Online Store → Themes → Customize → Cart (Sections can be added above or below main cart)

​
Troubleshooting

Possible Causes:
  • JavaScript errors (check browser console)
  • Inventory issues (out of stock)
  • Variant selection problems
  • Add to cart button not working
Solutions:
  1. Test in incognito mode (rule out cache/extensions)
  2. Check product inventory levels
  3. Verify product has variants selected
  4. Check browser console for errors
Check:
  • JavaScript is enabled
  • Cart AJAX functions are working
  • No theme conflicts
  • Inventory availability (can’t exceed stock)
Solutions:
  1. Hard refresh page (Cmd/Ctrl + Shift + R)
  2. Clear browser cache
  3. Test with theme updates
Verify:
  • Code is active (check start/end dates in Shopify Admin)
  • Code applies to cart contents (product/collection restrictions)
  • Minimum purchase requirements met
  • Code hasn’t reached usage limit
  • Customer is eligible (customer group restrictions)
Discount code errors usually display helpful messages explaining why code didn’t apply.
Reasons:
  • Cart is empty
  • Items out of stock
  • Quantity exceeds available inventory
  • Cart processing (spinner showing)
Normal behavior: Button should be disabled when cart is empty or updating.

​
Quick Summary

  • Purpose: Full-page shopping cart review and checkout interface
  • Width: Narrow (default) for optimal checkout focus
  • Key Features: Item management, quantity editing, discount codes, payment terms, shipping notifications
  • Empty State: Encourages shopping with “Continue Shopping” link
  • Checkout: Direct path to /checkout with prominent CTA button
  • Extensions: Can add Trust Indicators, Recommendations, FAQ sections
  • Mobile: Fully responsive with touch-optimized controls
The cart page is a critical conversion point. Small improvements to cart UX can significantly impact checkout completion rates and revenue.