Order Object

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.

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

Basic Order Information

Access the core order details for confirmation pages:

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

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

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:

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

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

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:

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

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

Payment Information

Display payment method information:

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

Customer Support

Provide support information and next steps:

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

Complete Order Confirmation Example

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

Best Practices

Clear Information

Display all essential order information prominently and clearly

Customer Support

Provide easy access to customer service with order number context

Email Integration

Include order details that match the confirmation email format

Mobile Friendly

Ensure order confirmation works well on all devices

Next Steps

Product Object

Learn about individual product page implementation

Basket Object

Understand shopping cart and checkout integration

User Object

Handle customer account and login functionality

SEO Object

Optimize confirmation pages for search engines

Getting Started

Template Language

Global Objects

Page Objects

Basic Order Information

Available Properties

Core Order Properties

Customer Properties

Order Items

Order Item Properties

Shipping Information

Payment Information

Customer Support

Complete Order Confirmation Example

Best Practices

Clear Information

Customer Support

Email Integration

Mobile Friendly

Next Steps

Product Object

Basket Object

User Object

SEO Object

​Basic Order Information

​Available Properties

​Core Order Properties

​Customer Properties

​Order Items

​Order Item Properties

​Shipping Information

​Payment Information

​Customer Support

​Complete Order Confirmation Example

​Best Practices

Clear Information

Customer Support

Email Integration

Mobile Friendly

​Next Steps

Product Object

Basket Object

User Object

SEO Object

Basic Order Information

Available Properties

Core Order Properties

Customer Properties

Order Items

Order Item Properties

Shipping Information

Payment Information

Customer Support

Complete Order Confirmation Example

Best Practices

Next Steps