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

# Order Object

> Display order confirmation, thank you pages, and order details

The `order` object contains information about completed orders and is available on order confirmation pages (thank you pages). It provides access to all order details including items, totals, shipping information, and customer data.

<Info>
  **Usage**: Available on order confirmation/thank you pages - use to display order details and confirmation information
</Info>

## Basic Order Information

Access the core order details for confirmation pages:

<CodeGroup>
  ```mustache Basic Order Confirmation theme={null}
  <div class="order-confirmation">
      <header class="order-header">
          <h1>{{#lang}}Thank you for your order!{{/lang}}</h1>
          <p class="order-number">
              {{#lang}}Order number{{/lang}}: <strong>{{order.id}}</strong>
          </p>
      </header>
      
      <div class="order-status">
          <p class="status-message">
              {{#lang}}We have received your order and will process it shortly.{{/lang}}
          </p>
          <p class="email-confirmation">
              {{#lang}}A confirmation email has been sent to{{/lang}} {{order.customer.email}}
          </p>
      </div>
  </div>
  ```

  ```mustache Order Summary Card theme={null}
  <div class="order-summary-card">
      <div class="order-info">
          <h2>{{#lang}}Order Summary{{/lang}}</h2>
          
          <div class="order-details">
              <div class="detail-row">
                  <span class="label">{{#lang}}Order Number{{/lang}}:</span>
                  <span class="value">{{order.id}}</span>
              </div>
              <div class="detail-row">
                  <span class="label">{{#lang}}Total Amount{{/lang}}:</span>
                  <span class="value total">{{order.value}} {{order.currency}}</span>
              </div>
          </div>
      </div>
  </div>
  ```
</CodeGroup>

## Available Properties

### Core Order Properties

| Property                | Type   | Description                              |
| ----------------------- | ------ | ---------------------------------------- |
| `order.id`              | String | Order number                             |
| `order.value`           | String | Order total amount incl. tax (formatted) |
| `order.value_excl_tax`  | String | Order total amount excl. tax (formatted) |
| `order.tax_amount`      | String | Tax amount on order (formatted)          |
| `order.currency`        | String | Currency used for the order              |
| `order.shipping_amount` | String | Shipping cost (formatted)                |
| `order.shipping_name`   | String | Shipping method chosen during order      |
| `order.payment_method`  | String | Payment method used for the order        |

### Customer Properties

| Property                       | Type   | Description             |
| ------------------------------ | ------ | ----------------------- |
| `order.customer.email`         | String | Customer email address  |
| `order.customer.firstname`     | String | Customer first name     |
| `order.customer.lastname`      | String | Customer last name      |
| `order.customer.ship_address`  | String | Customer address Line 1 |
| `order.customer.ship_address2` | String | Customer address Line 2 |
| `order.customer.ship_zipcode`  | String | Customer postal code    |
| `order.customer.ship_city`     | String | Customer city           |
| `order.customer.ship_country`  | String | Customer country        |
| `order.customer.ship_phone`    | String | Customer phone number   |

## Order Items

Display the products that were purchased:

<CodeGroup>
  ```mustache Basic Order Items theme={null}
  <div class="order-items">
      <h3>{{#lang}}Items Ordered{{/lang}}</h3>
      
      <div class="items-list">
          {{#order.items}}
          <div class="order-item">
              <div class="item-details">
                  <h4 class="item-title">{{title}}</h4>
                  <p class="item-sku">{{#lang}}SKU{{/lang}}: {{sku}}</p>
                  
                  {{#variant}}
                      <p class="item-variant">{{variant}}</p>
                  {{/variant}}
                  
                  <div class="item-pricing">
                      <span class="item-price">{{price}}</span>
                      <span class="item-quantity">× {{qty}}</span>
                  </div>
              </div>
          </div>
          {{/order.items}}
      </div>
  </div>
  ```

  ```mustache Detailed Order Items Table theme={null}
  <div class="order-items-table">
      <h3>{{#lang}}Order Details{{/lang}}</h3>
      
      <table class="items-table">
          <thead>
              <tr>
                  <th>{{#lang}}Product{{/lang}}</th>
                  <th>{{#lang}}Price{{/lang}}</th>
                  <th>{{#lang}}Quantity{{/lang}}</th>
              </tr>
          </thead>
          <tbody>
              {{#order.items}}
              <tr class="item-row">
                  <td class="product-info">
                      <div class="product-details">
                          <div class="product-text">
                              <h4>{{title}}</h4>
                              <p class="product-sku">{{sku}}</p>
                              {{#variant}}
                                  <p class="product-variant">{{variant}}</p>
                              {{/variant}}
                          </div>
                      </div>
                  </td>
                  <td class="item-price">{{price}}</td>
                  <td class="item-quantity">{{qty}}</td>
              </tr>
              {{/order.items}}
          </tbody>
          <tfoot>
              {{#order.value_excl_tax}}
              <tr class="subtotal-row">
                  <td colspan="2">{{#lang}}Subtotal (excl. tax){{/lang}}</td>
                  <td>{{order.value_excl_tax}}</td>
              </tr>
              {{/order.value_excl_tax}}
              {{#order.shipping_amount}}
              <tr class="shipping-row">
                  <td colspan="2">{{#lang}}Shipping{{/lang}} ({{order.shipping_name}})</td>
                  <td>{{order.shipping_amount}}</td>
              </tr>
              {{/order.shipping_amount}}
              {{#order.tax_amount}}
              <tr class="tax-row">
                  <td colspan="2">{{#lang}}Tax{{/lang}}</td>
                  <td>{{order.tax_amount}}</td>
              </tr>
              {{/order.tax_amount}}
              <tr class="total-row">
                  <td colspan="2"><strong>{{#lang}}Total{{/lang}}</strong></td>
                  <td><strong>{{order.value}} {{order.currency}}</strong></td>
              </tr>
          </tfoot>
      </table>
  </div>
  ```
</CodeGroup>

### Order Item Properties

When looping through `order.items`, each item has these properties:

| Property     | Type   | Description                           |
| ------------ | ------ | ------------------------------------- |
| `product_id` | String | Product ID                            |
| `title`      | String | Product title                         |
| `sku`        | String | Product/variant article number        |
| `variant_id` | String | Variant ID                            |
| `variant`    | String | Variant designation                   |
| `price`      | String | Product unit price (formatted)        |
| `price_raw`  | String | Product unit price without formatting |
| `qty`        | Number | Quantity ordered of the product       |

## Shipping Information

Display shipping address using the available customer properties:

<CodeGroup>
  ```mustache Shipping Details theme={null}
  <div class="shipping-info">
      <h3>{{#lang}}Shipping Address{{/lang}}</h3>
      
      <div class="address-card">
          <div class="address-name">
              {{order.customer.firstname}} {{order.customer.lastname}}
          </div>
          
          <div class="address-details">
              <p>{{order.customer.ship_address}}</p>
              {{#order.customer.ship_address2}}
                  <p>{{order.customer.ship_address2}}</p>
              {{/order.customer.ship_address2}}
              <p>{{order.customer.ship_zipcode}} {{order.customer.ship_city}}</p>
              <p>{{order.customer.ship_country}}</p>
          </div>
          
          {{#order.customer.ship_phone}}
              <div class="address-phone">
                  <i class="icon-phone"></i>
                  {{order.customer.ship_phone}}
              </div>
          {{/order.customer.ship_phone}}
      </div>
  </div>
  ```

  ```mustache Customer Information theme={null}
  <div class="customer-info">
      <h4>{{#lang}}Customer Information{{/lang}}</h4>
      <div class="customer-details">
          <p class="customer-name">{{order.customer.firstname}} {{order.customer.lastname}}</p>
          <p class="customer-email">{{order.customer.email}}</p>
          {{#order.customer.ship_phone}}
              <p class="customer-phone">{{order.customer.ship_phone}}</p>
          {{/order.customer.ship_phone}}
      </div>
      
      <h4>{{#lang}}Shipping Address{{/lang}}</h4>
      <div class="shipping-address">
          <p>{{order.customer.ship_address}}</p>
          {{#order.customer.ship_address2}}<p>{{order.customer.ship_address2}}</p>{{/order.customer.ship_address2}}
          <p>{{order.customer.ship_zipcode}} {{order.customer.ship_city}}</p>
          <p>{{order.customer.ship_country}}</p>
      </div>
  </div>
  ```
</CodeGroup>

## Payment Information

Display payment method information:

<CodeGroup>
  ```mustache Payment Details theme={null}
  <div class="payment-info">
      <h3>{{#lang}}Payment Information{{/lang}}</h3>
      
      <div class="payment-method">
          <div class="method-details">
              <i class="payment-icon icon-{{order.payment_method}}"></i>
              <span class="method-name">{{order.payment_method}}</span>
          </div>
      </div>
  </div>
  ```
</CodeGroup>

## Customer Support

Provide support information and next steps:

<CodeGroup>
  ```mustache Customer Support theme={null}
  <div class="customer-support">
      <h3>{{#lang}}Need Help?{{/lang}}</h3>
      
      <div class="support-options">
          {{#shop.phone}}
          <div class="support-option">
              <i class="icon-phone"></i>
              <div class="option-content">
                  <h4>{{#lang}}Phone Support{{/lang}}</h4>
                  <p>{{#lang}}Questions about your order?{{/lang}}</p>
                  <a href="tel:{{shop.phone}}">
                      {{shop.phone}}
                  </a>
              </div>
          </div>
          {{/shop.phone}}
      </div>
      
      <div class="support-note">
          <p>{{#lang}}Please have your order number ready when contacting support{{/lang}}: <strong>{{order.id}}</strong></p>
      </div>
  </div>
  ```
</CodeGroup>

## Complete Order Confirmation Example

<CodeGroup>
  ```mustache Complete Order Confirmation Page theme={null}
  <div class="order-confirmation-page">
      <!-- Success Header -->
      <header class="confirmation-header">
          <div class="success-icon">
              <i class="icon-check-circle"></i>
          </div>
          <h1>{{#lang}}Thank you for your order!{{/lang}}</h1>
          <p class="confirmation-message">
              {{#lang}}Your order has been successfully placed and you will receive a confirmation email shortly.{{/lang}}
          </p>
      </header>
      
      <!-- Order Summary -->
      <section class="order-summary">
          <div class="summary-header">
              <h2>{{#lang}}Order Summary{{/lang}}</h2>
              <div class="order-meta">
                  <span class="order-number">{{#lang}}Order{{/lang}} #{{order.id}}</span>
              </div>
          </div>
          
          <!-- Order Items -->
          <div class="order-items">
              {{#order.items}}
              <div class="order-item">
                  <div class="item-details">
                      <h4>{{title}}</h4>
                      {{#variant}}<p class="variant">{{variant}}</p>{{/variant}}
                      <div class="item-pricing">
                          <span>{{price}} × {{qty}}</span>
                      </div>
                  </div>
              </div>
              {{/order.items}}
          </div>
          
          <!-- Order Totals -->
          <div class="order-totals">
              {{#order.value_excl_tax}}
              <div class="total-line">
                  <span>{{#lang}}Subtotal (excl. tax){{/lang}}</span>
                  <span>{{order.value_excl_tax}}</span>
              </div>
              {{/order.value_excl_tax}}
              {{#order.shipping_amount}}
              <div class="total-line">
                  <span>{{#lang}}Shipping{{/lang}} ({{order.shipping_name}})</span>
                  <span>{{order.shipping_amount}}</span>
              </div>
              {{/order.shipping_amount}}
              {{#order.tax_amount}}
              <div class="total-line">
                  <span>{{#lang}}Tax{{/lang}}</span>
                  <span>{{order.tax_amount}}</span>
              </div>
              {{/order.tax_amount}}
              <div class="total-line grand-total">
                  <span>{{#lang}}Total{{/lang}}</span>
                  <span>{{order.value}} {{order.currency}}</span>
              </div>
          </div>
      </section>
      
      <!-- Order Details Grid -->
      <section class="order-details-grid">
          <!-- Customer & Shipping Information -->
          <div class="detail-section">
              <h3>{{#lang}}Customer Information{{/lang}}</h3>
              <div class="customer-info">
                  <p><strong>{{order.customer.firstname}} {{order.customer.lastname}}</strong></p>
                  <p>{{order.customer.email}}</p>
                  {{#order.customer.ship_phone}}<p>{{order.customer.ship_phone}}</p>{{/order.customer.ship_phone}}
              </div>
              
              <h4>{{#lang}}Shipping Address{{/lang}}</h4>
              <div class="address">
                  <p>{{order.customer.ship_address}}</p>
                  {{#order.customer.ship_address2}}<p>{{order.customer.ship_address2}}</p>{{/order.customer.ship_address2}}
                  <p>{{order.customer.ship_zipcode}} {{order.customer.ship_city}}</p>
                  <p>{{order.customer.ship_country}}</p>
              </div>
          </div>
          
          <!-- Payment Information -->
          <div class="detail-section">
              <h3>{{#lang}}Payment & Shipping{{/lang}}</h3>
              <div class="payment-info">
                  <p><strong>{{#lang}}Payment Method{{/lang}}:</strong> {{order.payment_method}}</p>
                  {{#order.shipping_name}}
                      <p><strong>{{#lang}}Shipping Method{{/lang}}:</strong> {{order.shipping_name}}</p>
                  {{/order.shipping_name}}
              </div>
          </div>
      </section>
      
      <!-- Next Steps -->
      <section class="next-steps">
          <h3>{{#lang}}What happens next?{{/lang}}</h3>
          <div class="steps-list">
              <div class="step">
                  <i class="icon-mail"></i>
                  <p>{{#lang}}You'll receive an email confirmation at{{/lang}} {{order.customer.email}}</p>
              </div>
              <div class="step">
                  <i class="icon-package"></i>
                  <p>{{#lang}}We'll process and pack your order{{/lang}}</p>
              </div>
              <div class="step">
                  <i class="icon-truck"></i>
                  <p>{{#lang}}Your order will be shipped using{{/lang}} {{order.shipping_name}}</p>
              </div>
          </div>
      </section>
      
      <!-- Customer Support -->
      <section class="customer-support">
          <h3>{{#lang}}Questions about your order?{{/lang}}</h3>
          <p>{{#lang}}Contact our customer service team with your order number{{/lang}}: <strong>{{order.id}}</strong></p>
          
          <div class="support-contacts">
              {{#shop.phone}}
              <a href="tel:{{shop.phone}}" class="support-link">
                  <i class="icon-phone"></i>
                  {{shop.phone}}
              </a>
              {{/shop.phone}}
          </div>
      </section>
      
      <!-- Continue Shopping -->
      <section class="continue-shopping">
          <a href="/" class="continue-btn">
              {{#lang}}Continue Shopping{{/lang}}
          </a>
      </section>
  </div>
  ```
</CodeGroup>

## Best Practices

<CardGroup cols={2}>
  <Card title="Clear Information" icon="eye">
    Display all essential order information prominently and clearly
  </Card>

  <Card title="Customer Support" icon="headset">
    Provide easy access to customer service with order number context
  </Card>

  <Card title="Email Integration" icon="mail">
    Include order details that match the confirmation email format
  </Card>

  <Card title="Mobile Friendly" icon="mobile">
    Ensure order confirmation works well on all devices
  </Card>
</CardGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Product Object" icon="box" href="/theme-development/pages/product">
    Learn about individual product page implementation
  </Card>

  <Card title="Basket Object" icon="shopping-cart" href="/theme-development/global/basket">
    Understand shopping cart and checkout integration
  </Card>

  <Card title="User Object" icon="user" href="/theme-development/global/user">
    Handle customer account and login functionality
  </Card>

  <Card title="SEO Object" icon="search" href="/theme-development/global/seo">
    Optimize confirmation pages for search engines
  </Card>
</CardGroup>