> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Cart page

> Shopping cart page template displaying cart items, totals, and checkout controls

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:

<AccordionGroup>
  <Accordion title="Section Width" icon="left-right">
    Control the width of the cart container:

    * **Narrow** (default) - Optimized for cart readability (\~900px)
    * **Page** - Standard page width (\~1200px)
    * **Fluid** - Extends to container edges

    <Note>
      Narrow width is recommended for cart pages as it creates focused checkout experience with optimal line item readability.
    </Note>
  </Accordion>

  <Accordion title="Color Scheme" icon="palette">
    * Select from available theme color schemes
    * **Default:** scheme-1
  </Accordion>

  <Accordion title="Spacing" icon="arrows-up-down">
    * **Top Spacing**: 0, 1, 2 (default), 4, or 6
    * **Bottom Spacing**: 0, 1, 2 (default), 4, or 6
  </Accordion>

  <Accordion title="Borders" icon="border-top-left">
    * **None** (default)
    * **Top Border**
    * **Bottom Border**
    * **Both Borders**
  </Accordion>
</AccordionGroup>

***

## Cart Features

While template settings are minimal, the cart automatically includes:

### Cart Header

<AccordionGroup>
  <Accordion title="Cart Title" icon="heading">
    * Displays "Shopping Cart" or localized equivalent
    * Rendered as H1 heading
    * Centered alignment
  </Accordion>

  <Accordion title="Shipping Progress Bar" icon="truck">
    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

    <Tip>
      Enable shipping notifications in theme settings to boost average order value by showing customers how close they are to free shipping.
    </Tip>
  </Accordion>

  <Accordion title="Continue Shopping Link" icon="arrow-left">
    * Link back to products/collections
    * Directs to `/collections/all` by default
    * Helps customers add more items
    * Always visible (empty or full cart)
  </Accordion>
</AccordionGroup>

### Empty Cart State

<Accordion title="Empty Cart Display" icon="cart-shopping">
  When cart is empty:

  * **Heading:** "Your cart" or localized title
  * **Subheading:** "Your cart is empty" message
  * **Continue Shopping Link:** Prominent link to browse products

  <Note>
    The empty cart state encourages shopping rather than leaving customers at a dead end.
  </Note>
</Accordion>

### Cart Items Section

<Accordion title="Line Items" icon="list">
  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

  <Warning>
    Quantity changes update inventory in real-time. If item becomes unavailable during checkout, customer will be notified.
  </Warning>
</Accordion>

### Cart Summary

<AccordionGroup>
  <Accordion title="Subtotal" icon="calculator">
    * Displays cart subtotal before shipping/taxes
    * Updates dynamically as quantities change
    * Formatted in shop currency
    * Prominent display (large, bold)
  </Accordion>

  <Accordion title="Payment Terms" icon="calendar-days">
    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.)

    <Note>
      Payment terms display is automatic when installment payment methods are enabled in Shopify Payments settings.
    </Note>
  </Accordion>

  <Accordion title="Discount Code Field" icon="tag">
    * Input field for discount/promo codes
    * Apply button
    * Shows applied discounts with amounts
    * Remove discount option
    * Error messages for invalid codes

    <Tip>
      Cart-level discount codes are different from automatic discounts. Both can apply simultaneously.
    </Tip>
  </Accordion>

  <Accordion title="Cart Notes" icon="note-sticky">
    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)
  </Accordion>

  <Accordion title="Checkout Button" icon="credit-card">
    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.)
  </Accordion>
</AccordionGroup>

### Additional Features

<AccordionGroup>
  <Accordion title="Loading Indicator" icon="spinner">
    * Spinner shown during cart updates
    * Prevents duplicate actions while processing
    * Improves UX during AJAX operations
  </Accordion>

  <Accordion title="Cart Recommendations" icon="lightbulb">
    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

    <Note>
      Cart recommendations are controlled by separate section settings and can be reordered or removed from the cart template.
    </Note>
  </Accordion>

  <Accordion title="Dynamic Checkout Buttons" icon="bolt">
    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
  </Accordion>
</AccordionGroup>

***

## Best practices

<CardGroup cols={2}>
  <Card title="Cart page design" icon="pen-ruler">
    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.
  </Card>

  <Card title="Shipping thresholds" icon="truck-fast">
    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.
  </Card>

  <Card title="Mobile optimization" icon="mobile-screen">
    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.
  </Card>

  <Card title="Trust signals" icon="shield-check">
    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.
  </Card>

  <Card title="Cart abandonment prevention" icon="user-xmark">
    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.
  </Card>
</CardGroup>

***

## Use Cases

<CardGroup cols={2}>
  <Card title="Standard E-commerce" icon="store">
    Full cart review with quantity edits, discount codes, and clear checkout path
  </Card>

  <Card title="High-Value Items" icon="gem">
    Detailed item review with payment installment options and trust signals
  </Card>

  <Card title="Quick Purchase" icon="gauge-high">
    Streamlined cart with express checkout buttons for fast conversion
  </Card>

  <Card title="Gift Shopping" icon="gift">
    Cart notes for gift messages and special delivery instructions
  </Card>
</CardGroup>

***

## Related Pages & Sections

<CardGroup cols={2}>
  <Card title="Cart Drawer" icon="sidebar">
    Slide-out mini cart for quick review without leaving current page
  </Card>

  <Card title="Cart Recommendations" icon="heart">
    Product suggestion section that can be added to cart template
  </Card>

  <Card title="Checkout" icon="credit-card">
    Shopify's checkout page (not customizable via templates in most plans)
  </Card>
</CardGroup>

***

## Extending the Cart Page

Enhance the cart template by adding sections:

<CardGroup cols={2}>
  <Card title="Trust Indicators" icon="badge-check">
    Add security badges, guarantees, and trust signals above checkout button
  </Card>

  <Card title="Cart Recommendations" icon="sparkles">
    Display "Frequently bought together" or "Complete the look" products
  </Card>

  <Card title="FAQ Accordion" icon="circle-question">
    Answer common pre-purchase questions (shipping, returns, sizing)
  </Card>

  <Card title="Newsletter Signup" icon="envelope">
    Capture emails from cart visitors who don't complete purchase
  </Card>
</CardGroup>

<Tip>
  Add sections to cart template: **Online Store → Themes → Customize → Cart** (Sections can be added above or below main cart)
</Tip>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="Items Not Adding to Cart" icon="circle-exclamation">
    **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
  </Accordion>

  <Accordion title="Quantity Not Updating" icon="hashtag">
    **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
  </Accordion>

  <Accordion title="Discount Code Not Working" icon="tag">
    **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)

    <Note>
      Discount code errors usually display helpful messages explaining why code didn't apply.
    </Note>
  </Accordion>

  <Accordion title="Checkout Button Disabled" icon="ban">
    **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.
  </Accordion>
</AccordionGroup>

***

## 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

<Note>
  The cart page is a critical conversion point. Small improvements to cart UX can significantly impact checkout completion rates and revenue.
</Note>