Cart Page Template

The cart page displays all items a customer has added to their shopping cart. It shows product details, quantities, prices, and provides options to update quantities, remove items, and proceed to checkout.

Overview

The cart page is where customers review their selected items before checkout. It displays a list of cart items with product information, quantity controls, pricing, and an order summary. Customers can update quantities, remove items, add notes, and proceed to checkout. The page also shows an empty state when the cart is empty.

Where to Use

The cart page template (cart.json) is automatically used when:

  • A customer clicks the cart icon in the header
  • A customer navigates to /cart URL
  • A customer clicks "View cart" after adding items
  • A customer is redirected to cart from checkout

Access the template:

  • Go to Online Store → Themes → Customize
  • Navigate to Templates → Cart
  • Customize the cart section

Cart icon:

  • Appears in header navigation
  • Shows item count badge
  • Links to cart page
  • Updates automatically when items are added

Settings

Layout

Text Alignment

  • What it does: Controls text alignment for cart header, summary, and buttons
  • Options:
    • Left: Text aligned to the left (default)
    • Center: Text centered
    • Right: Text aligned to the right
  • Default: Left
  • Tip:
    • Left: Standard alignment, good for most stores
    • Center: Creates balanced, centered appearance
    • Right: Less common, unique alignment

Colors

Color Scheme

  • What it does: Selects a color scheme for the cart page
  • Controls background color, text colors, card colors, link colors, and button colors
  • Tip: Choose a scheme that matches your brand

Styling

Card Border Radius

  • What it does: Corner rounding on cart item cards and summary card
  • Range: 0-40px
  • Step: 2px
  • Default: 8px
  • Tip:
    • 0px: Sharp corners, modern look
    • 4-8px: Subtle rounding (recommended)
    • 12-20px: Moderate rounding, softer appearance
    • 24-40px: Very rounded, very soft appearance

Padding

Top Padding

  • What it does: Space above the cart content
  • Range: 0-100px
  • Step: 5px
  • Default: 40px
  • Mobile: Automatically reduced to 75% of desktop value
  • Tip:
    • 20-40px: Standard spacing (recommended)
    • 50-80px: More spacious, premium feel
    • 100px: Maximum spacing, very spacious

Bottom Padding

  • What it does: Space below the cart content
  • Range: 0-100px
  • Step: 5px
  • Default: 40px
  • Mobile: Automatically reduced to 75% of desktop value
  • Tip:
    • 20-40px: Standard spacing (recommended)
    • 50-80px: More spacious, premium feel
    • 100px: Maximum spacing, very spacious

How It Works

Page Structure

The cart page displays:

  1. Cart Header:

    • Cart title ("Cart")
    • Item count subtitle (e.g., "2 items")

  2. Cart Content (when items exist):

    • Cart Items: List of products in cart
    • Order Summary: Pricing breakdown and checkout button

  3. Empty Cart State (when cart is empty):

    • Empty cart icon
    • Empty cart message
    • Continue shopping button

Cart Items

Each cart item displays:

  • Product Image: Product thumbnail
  • Product Title: Product name (links to product page)
  • Variant Information: Selected variant details (if applicable)
  • Price: Item price
  • Quantity Selector: Increase/decrease quantity buttons and input
  • Remove Button: Remove item from cart
  • Line Total: Total price for item (price × quantity)
  • SKU: Product SKU (if available)
  • Stock Status: In stock or out of stock indicator

Cart Item Features:

  • Quantity Updates: Real-time quantity updates via AJAX
  • Remove Items: Remove items without page reload
  • Product Links: Click product title to view product
  • Variant Display: Shows selected variant options
  • Stock Indicators: Displays stock availability

Order Summary

Summary displays:

  • Subtotal: Total of all items before discounts
  • Discounts: Applied discounts (if any)
  • Total: Final order total
  • Checkout Button: Proceeds to checkout
  • Dynamic Checkout Buttons: Express checkout options (Shop Pay, Apple Pay, etc.)
  • Continue Shopping Button: Returns to products

Summary Features:

  • Real-time Updates: Totals update when quantities change
  • Discount Display: Shows applied discounts
  • Express Checkout: Quick checkout options
  • Full-width Button: Checkout button spans full width

Empty Cart State

Empty state displays:

  • Shopping Cart Icon: Visual indicator
  • Title: "Your cart is empty"
  • Description: "Looks like you haven't added anything to your cart yet."
  • Continue Shopping Button: Returns to products

Empty State Features:

  • Friendly Message: Helps customers understand
  • Clear Action: Continue shopping button
  • Visual Indicator: Shopping cart icon

Cart Functionality

AJAX Updates:

  • Quantity changes update without page reload
  • Item removal updates cart instantly
  • Totals recalculate automatically
  • Cart count updates in header

Cart Notes:

  • Customers can add order notes
  • Notes appear in order details
  • Useful for special instructions

Stock Management:

  • Shows stock availability
  • Prevents adding out-of-stock items
  • Updates when stock changes

Common Use Cases

Standard Shopping Cart

What it does:

  • Displays cart items
  • Shows order summary
  • Provides checkout button
  • Allows quantity updates

Use Case: Standard e-commerce cart functionality

Cart with Discounts

What it does:

  • Shows subtotal
  • Displays discount amount
  • Shows final total
  • Applies discounts automatically

Use Case: Cart with discount codes or automatic discounts

Empty Cart

What it does:

  • Shows empty state
  • Displays friendly message
  • Provides continue shopping option
  • Encourages browsing

Use Case: When customer hasn't added items or cleared cart

Cart with Multiple Items

What it does:

  • Lists all cart items
  • Shows individual line totals
  • Calculates total
  • Allows managing each item

Use Case: Customer shopping for multiple products

Tips & Best Practices

✅ Do's

  • Keep it simple: Simple design reduces friction
  • Show clear totals: Make pricing clear and visible
  • Enable express checkout: Offer quick checkout options
  • Show stock status: Help customers know availability
  • Make checkout prominent: Large, clear checkout button
  • Allow easy updates: Simple quantity controls
  • Show product images: Visual confirmation of items
  • Display discounts clearly: Show savings prominently
  • Test cart functionality: Ensure all features work
  • Optimize for mobile: Ensure mobile experience is good

❌ Don'ts

  • Don't hide totals: Make pricing clear and visible
  • Don't complicate checkout: Keep checkout process simple
  • Don't forget mobile: Test on phones and tablets
  • Don't hide remove button: Make it easy to remove items
  • Don't skip empty state: Help customers when cart is empty
  • Don't forget stock status: Show availability clearly
  • Don't hide discounts: Display savings prominently
  • Don't complicate quantity: Keep quantity controls simple
  • Don't forget product links: Allow viewing product details
  • Don't skip testing: Test all cart functionality

Cart Item Guide

Product Information

Displayed:

  • Product image (thumbnail)
  • Product title (clickable)
  • Variant details (if applicable)
  • SKU (if available)
  • Stock status

Best Practices:

  • Use clear product images
  • Show variant information clearly
  • Display stock status prominently
  • Make product title clickable

Quantity Controls

Features:

  • Increase quantity button (+)
  • Decrease quantity button (-)
  • Quantity input field
  • Real-time updates

Best Practices:

  • Make buttons easy to click
  • Show current quantity clearly
  • Update totals instantly
  • Prevent invalid quantities

Pricing

Displayed:

  • Item price
  • Line total (price × quantity)
  • Subtotal
  • Discounts (if any)
  • Final total

Best Practices:

  • Show pricing clearly
  • Display line totals
  • Show discounts prominently
  • Make total prominent

Order Summary Guide

Pricing Breakdown

Subtotal:

  • Sum of all item prices
  • Before discounts
  • Clear and visible

Discounts:

  • Applied discount codes
  • Automatic discounts
  • Show savings amount

Total:

  • Final order total
  • After discounts
  • Most prominent price

Checkout Options

Standard Checkout:

  • Primary checkout button
  • Full checkout process
  • Standard payment methods

Express Checkout:

  • Shop Pay
  • Apple Pay
  • Google Pay
  • PayPal
  • Other express options

Best Practices:

  • Make checkout button prominent
  • Offer express checkout options
  • Keep checkout process simple
  • Show security indicators

Examples

Example 1: Standard Cart

Settings:

  • Text Alignment: Left
  • Card Border Radius: 8px
  • Padding: 40px top/bottom
  • Color Scheme: Default

Result: Clean, standard cart page with left-aligned content

Example 2: Centered Cart

Settings:

  • Text Alignment: Center
  • Card Border Radius: 12px
  • Padding: 60px top/bottom
  • Color Scheme: Brand colors

Result: Centered cart page with balanced appearance

Example 3: Rounded Cart

Settings:

  • Text Alignment: Left
  • Card Border Radius: 24px
  • Padding: 40px top/bottom
  • Color Scheme: Light colors

Result: Soft, rounded cart cards with modern appearance

Troubleshooting

Cart Not Updating

  • Check: Verify cart JavaScript is loading
  • Check: Check browser console for errors
  • Check: Ensure AJAX requests are working
  • Check: Test quantity updates

Items Not Displaying

  • Check: Verify cart has items
  • Check: Check cart-item snippet
  • Check: Verify product data is available
  • Check: Test with different products

Totals Not Calculating

  • Check: Verify pricing is correct
  • Check: Check discount calculations
  • Check: Ensure JavaScript is working
  • Check: Test with different quantities

Checkout Button Not Working

  • Check: Verify checkout URL is correct
  • Check: Test button click
  • Check: Ensure cart has items
  • Check: Check for JavaScript errors

Empty State Not Showing

  • Check: Verify cart is empty
  • Check: Check empty state HTML
  • Check: Test with empty cart
  • Check: Verify CSS is loading

Mobile Issues

  • Check: Test on mobile devices
  • Check: Verify responsive design
  • Check: Test quantity controls
  • Check: Ensure buttons are tappable

Cart Management

Adding Items to Cart

From Product Page:

  • Select variant (if applicable)
  • Choose quantity
  • Click "Add to Cart"
  • Item added to cart

From Collection Page:

  • Quick add (if enabled)
  • Add to cart directly
  • Item added to cart

Updating Cart

Quantity Updates:

  • Use quantity controls
  • Updates happen instantly
  • Totals recalculate automatically

Removing Items:

  • Click remove button
  • Item removed instantly
  • Cart updates automatically

Cart Notes

Adding Notes:

  • Cart note field (if enabled)
  • Add special instructions
  • Notes included in order

Use Cases:

  • Gift messages
  • Delivery instructions
  • Special requests

Related Templates

  • Product Page - Add products to cart
  • Collection Page - Browse and add products
  • Checkout Page - Complete purchase (after cart)

Related Sections

  • Cart Section - Cart page display (this section)
  • Cart Item Snippet - Individual cart item display
  • Header - Cart icon and count

Related Snippets

  • cart-item - Cart item display
  • button - Checkout and continue shopping buttons
  • lucide-icon - Shopping cart icon in empty state

Next Steps:

  • Learn about Product Page Template (add to cart)
  • Customize cart styling
  • Test cart functionality
  • Enable express checkout
  • Add cart notes feature
  • Optimize cart for mobile
  • Monitor cart abandonment