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
Access the core order details for confirmation pages:
Basic Order Confirmation
Order Summary Card
<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>
Available Properties Core Order Properties Property Type Description order.idString Order number order.valueString Order total amount incl. tax (formatted) order.value_excl_taxString Order total amount excl. tax (formatted) order.tax_amountString Tax amount on order (formatted) order.currencyString Currency used for the order order.shipping_amountString Shipping cost (formatted) order.shipping_nameString Shipping method chosen during order order.payment_methodString Payment method used for the order
Customer Properties Property Type Description order.customer.emailString Customer email address order.customer.firstnameString Customer first name order.customer.lastnameString Customer last name order.customer.ship_addressString Customer address Line 1 order.customer.ship_address2String Customer address Line 2 order.customer.ship_zipcodeString Customer postal code order.customer.ship_cityString Customer city order.customer.ship_countryString Customer country order.customer.ship_phoneString Customer phone number
Order Items Display the products that were purchased:
Basic Order Items
Detailed Order Items Table
<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>
Order Item Properties When looping through order.items, each item has these properties:
Property Type Description product_idString Product ID titleString Product title skuString Product/variant article number variant_idString Variant ID variantString Variant designation priceString Product unit price (formatted) price_rawString Product unit price without formatting qtyNumber Quantity ordered of the product
Display shipping address using the available customer properties:
Shipping Details
Customer Information
<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>
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 Complete Order Confirmation Page
<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 