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

# Order Details

> Customer order history and details page

## What It Does

The **Order Page** template displays when logged-in customers view their order history at `/account` under "Orders" section, or when viewing specific order details at `/account/orders/[order-id]`. This page shows all past orders with details (order number, date, status, items, totals) and allows customers to track shipments and reorder products.

<Note>
  This is a **static template section** with no customizable settings. Order display functionality is standard Shopify behavior. Customization requires code editing.
</Note>

## Template Content

### Order History View

**Typical orders list includes:**

* **Heading** - "Order History" or "My Orders"
* **Order cards/rows** - Each past order displayed as card or table row
* **Order number** - Unique order ID (e.g., #1001, #1002)
* **Order date** - When order placed
* **Order status** - Fulfilled, Unfulfilled, Partially Fulfilled, Cancelled, Refunded
* **Order total** - Final amount paid
* **View order button** - Links to detailed order page

### Order Details View

**Individual order page (`/account/orders/[order-id]`) includes:**

* **Order number & date**
* **Order status** - Fulfillment and payment status
* **Items ordered** - Product names, variants, quantities, prices
* **Subtotal, shipping, tax, discounts, total**
* **Shipping address**
* **Billing address**
* **Payment method** (last 4 digits of card, or payment type)
* **Tracking information** (if available) - Tracking number, carrier link
* **Reorder button** (optional) - Add all items to cart for easy reordering

## User Experience

**Viewing orders flow:**

1. Customer logs in, navigates to account dashboard
2. Clicks "Orders" in account navigation
3. Sees list of all past orders (order history)
4. Clicks "View order" on specific order
5. Lands on detailed order page
6. Views items, total, shipping address, tracking info
7. Optionally clicks tracking link to check shipment status
8. Optionally clicks "Reorder" to add items to cart

## Best practices

<CardGroup cols={2}>
  <Card title="Clear Order Status" icon="circle-check">
    Display order status prominently (Fulfilled, Shipped, Delivered, Cancelled). Customers need immediate status visibility.
  </Card>

  <Card title="Tracking Links Prominent" icon="truck-fast">
    If tracking available, make tracking number/link prominent. Customers frequently check order pages for tracking.
  </Card>

  <Card title="Reorder Functionality" icon="rotate-right">
    Include "Reorder" button on order details (adds all items to cart). Convenient for repeat purchases.
  </Card>

  <Card title="Order Date Clear" icon="calendar">
    Display order date in readable format ("January 15, 2024" not "2024-01-15"). Improves scannability.
  </Card>

  <Card title="Downloadable Invoice" icon="file-invoice">
    Optionally include "Download Invoice" link (PDF invoice). Useful for business customers, expense tracking.
  </Card>

  <Card title="Contact Support Link" icon="headset">
    Include "Contact us about this order" link. Makes it easy for customers to reach support regarding specific order.
  </Card>

  <Card title="Mobile-Optimized" icon="mobile">
    Order page sees heavy mobile traffic (customers checking orders on-the-go). Ensure all details readable, buttons tappable.
  </Card>

  <Card title="Pagination for Many Orders" icon="ellipsis">
    If customer has 20+ orders, paginate order history (10-20 per page). Improves page load and usability.
  </Card>
</CardGroup>

## Order Status Types

### Fulfillment Status

**Unfulfilled:**

* Order placed but not shipped yet
* Items being prepared/packed
* Typical for new orders (first 1-2 days)

**Partially Fulfilled:**

* Some items shipped, others pending
* Multiple shipments (backorder situations)
* Tracking available for fulfilled items

**Fulfilled:**

* All items shipped
* Tracking information available
* Final fulfillment status (delivered afterwards tracked by carrier)

**Cancelled:**

* Order cancelled (by customer or merchant)
* Payment refunded (if already charged)
* Items not shipped

**Refunded:**

* Order refunded after fulfillment
* Items may have been returned
* Payment returned to customer

### Payment Status

**Pending:**

* Payment authorization pending
* Manual payment capture required (merchant must capture)

**Paid:**

* Payment captured
* Standard status for most orders

**Refunded:**

* Full or partial refund issued
* Money returned to customer

**Voided:**

* Payment authorization voided (before capture)
* Funds never captured from customer

## Related Pages

* **[Account Dashboard](/themes/mojave/pages-templates/customers/account)** - Account hub (links to Orders page, shows recent orders)
* **[Login Page](/themes/mojave/pages-templates/customers/login)** - Must be logged in to view orders
* **[Addresses](/themes/mojave/pages-templates/customers/addresses)** - Addresses used for shipping (displayed on order page)

## Technical Notes

### Order Object

**Liquid access:**

```liquid theme={null}
{{ customer.orders }} - All customer's orders
{{ order.name }} - Order number (e.g., #1001)
{{ order.created_at }} - Order date
{{ order.fulfillment_status }} - Status
{{ order.line_items }} - Items in order
```

**Order properties available:**

* Order number, date, status
* Line items (products, variants, quantities, prices)
* Totals (subtotal, shipping, tax, discounts, total)
* Addresses (shipping, billing)
* Tracking info (if fulfilled)

### Tracking Integration

**Tracking numbers:**

* Added in Shopify Admin when order fulfilled
* Admin → Orders → \[Order] → Fulfill items → Enter tracking number + carrier
* Automatically appears on customer's order page
* Link generated to carrier's tracking page (USPS, UPS, FedEx, etc.)

**Tracking email:**

* Shopify automatically emails customers when tracking added
* Email includes tracking link
* Customer can also check tracking on order page

### Reorder Functionality

**How reorder works:**

1. Customer clicks "Reorder" button on order details page
2. All items from that order added to cart
3. Quantities match original order
4. Customer redirected to cart page
5. Can adjust quantities or proceed to checkout

**Implementation:**

* Requires custom code or theme support
* Not all themes include reorder button out-of-box
* Can be added via apps or custom development

### Order History Limits

**No hard limit:**

* All customer orders display in order history
* Can view orders from years ago (as long as customer account exists)
* Shopify retains order data indefinitely

**Pagination:**

* Themes may paginate for many orders (10-20 per page)
* Improves page load for customers with 50+ orders

### Guest Orders

**Guest checkout orders:**

* Not linked to customer account (no account at time of purchase)
* Don't appear in customer's order history (if they create account later)
* Accessible only via order status page (emailed after purchase)

**Linking guest orders:**

* If customer creates account with same email as guest order, Shopify may auto-link
* Or customer can contact support to link guest orders to account

## Troubleshooting

**Orders not showing:**

* Verify logged in to correct account (email used at time of purchase)
* Check orders placed with same email (guest orders may not show—see above)
* Verify orders actually placed (check order confirmation email)
* Contact store support if orders missing (may need manual linking)

**Can't view order details:**

* Check logged in (session may have expired)
* Try hard refresh (Cmd/Ctrl+Shift+R)
* Check order ID correct in URL (ensure viewing own order, not someone else's)
* Theme bug possible (contact theme support)

**Tracking link not working:**

* Verify tracking number entered correctly in Admin
* Check carrier link (sometimes carrier websites down)
* Try copying tracking number, paste in carrier website directly
* Allow 24 hours after fulfillment (tracking may not be active immediately)

**Order status not updating:**

* Status synced from Admin (may take a few minutes to update)
* Hard refresh browser (Cmd/Ctrl+Shift+R)
* Check Admin status (if Admin shows updated, refresh customer page)
* Allow 1-2 hours for third-party fulfillment updates

**Reorder button not working:**

* Check all products still available (out-of-stock items may prevent reorder)
* Product may have been deleted (can't reorder discontinued items)
* JavaScript error possible (check browser console)
* Try adding items manually if reorder fails

**Order page showing wrong orders:**

* Verify logged in to correct account (not shared device with someone else's session)
* Check email associated with account (Admin → Customers → \[Customer])
* May be seeing another customer's orders (security issue—report immediately)

**Mobile order page not loading:**

* Check internet connection (require online to load order data)
* Try desktop browser (test if mobile-specific issue)
* Clear mobile browser cache
* Verify logged in on mobile

## Key Takeaways

* **No template settings** - Order page is static, no Theme Customizer customization
* **View all past orders** - Order history lists all customer orders (no time limit)
* **Order details page** - Click order to view detailed breakdown (items, totals, addresses, tracking)
* **Order status displayed** - Fulfillment status (Unfulfilled/Fulfilled) and payment status (Paid/Refunded)
* **Tracking information** - Tracking numbers and carrier links appear when order fulfilled
* **Reorder functionality** - Optionally add "Reorder" button (requires theme support or custom code)
* **Guest orders separate** - Guest checkout orders don't appear in account (unless manually linked)
* **Mobile usage high** - Customers frequently check orders on mobile (ensure mobile-optimized)
* **Customization via code** - Add features (invoices, reorder, custom layouts) via theme editing or apps

For custom order page features (invoices, advanced filtering, custom order fields), explore Shopify apps or hire a developer.
