Commerce OS docs

Printable order confirmation

Written by
Karri
Published on
November 21, 2024
Updated on
November 26, 2024

TWICE Commerce OS provides printable order confirmation document, which can be accessed from an order view.

Customizing the printable order confirmation

Note: Document customization is available on Build, Wix Expand, Advance, and Enterprise plans. You can toggle off the TWICE -branding at the end of the document on Advance and Enterprise plans.

You can access the document editor through Settings >  (1) Documents.

By default you are editing the template for the store you are in currently. If you want to edit different store's template you can do it on top of the page (2).

You can open the editor by clicking Edit (3).

Note: If you have multiple stores and you want to use the same template on some or all of them, you need to manually copy paste the template, as the documents are per location.

Template editor

When you open the edit view, you can see two tabs: Editor (1) and Test Data (2) and the real-time preview (3).

Editor (1) enables you to customize the document using HTML, CSS and handlebar variables related to your store and the order.

Test data (2) is used when editing the template.

Real-time preview (3) displays the document in real time based on the edits in both Editor and/or Test Data.

Editing the template

You can edit the template on the Editor tab. You have the default template always available. You can revert back to it anytime, but be careful as the template editor doesn't save previous versions, only the current version after clicking Save.

Tip: use the default template on Editor and Test Data to understand how the default template is built.

To customize the template you can use basic HTML and CSS and utilize variables, which are built using Handlebar.js.

List of available variables

The variables are either single-value variables or arrays which need to be iterated using modifiers.

Store details (single-value variables)
  • {{store.name}} - Name of the store.
  • {{store.address}} - Address of the store.
  • {{store.phone}} - Phone number of the store.
  • {{store.email}} - Email address of the store.
  • {{store.logo}} - URL of the store's logo.
Order details (single-value variables)
  • {{order.orderId}} - Unique identifier of the order.
Delivery details (single-value variables)
  • {{order.delivery.deliveryTo}} - Contains delivery information to the customer.
    • {{order.delivery.deliveryTo.carrier}} - Carrier name for delivery.
    • {{order.delivery.deliveryTo.timeslot.start}} - Start time of delivery.
    • {{order.delivery.deliveryTo.timeslot.end}} - End time of delivery.
    • {{order.delivery.deliveryTo.address}} - Delivery address.
    • {{order.delivery.deliveryTo.price}} - Price of the delivery.
  • {{order.delivery.deliveryFrom}} - Contains collection (pickup) information.
    • {{order.delivery.deliveryFrom.carrier}} - Carrier name for collection.
    • {{order.delivery.deliveryFrom.timeslot.start}} - Start time for collection.
    • {{order.delivery.deliveryFrom.timeslot.end}} - End time for collection.
    • {{order.delivery.deliveryFrom.address}} - Collection address.
    • {{order.delivery.deliveryFrom.price}} - Price of the collection.
Liable person (single-value variables)
  • {{order.liablePerson.firstName}} - First name of the primary contact.
  • {{order.liablePerson.lastName}} - Last name of the primary contact.
  • {{order.liablePerson.email}} - Email of the primary contact.
  • {{order.liablePerson.phone}} - Phone number of the primary contact.
Persons (arrays)
  • Each person involved in the order.
    • {{firstName}} and {{lastName}} - First and last name of the person.
Products (arrays)
  • {{productName}} - Name of the product.
  • {{variantNames}} - Product variant details.
  • {{productCodes}} - Product codes (e.g., SKU).
  • {{pricing.subtotal}} - Subtotal price for the product.
  • {{formattedDate}} - Display date for rental period.
  • {{pricing.deposit}} - Deposit amount.
Package products (arrays)
  • {{name}} - Name of the package product (e.g., an accessory).
  • {{variantNames}} - Variant details for package products.
  • {{productCodes}} - Product codes for package products.
Pricing details (single-value variables)
  • {{order.pricing.subtotal}} - Subtotal of all items.
  • {{order.pricing.total}} - Total price of the order.
  • {{order.pricing.paid}} - Amount paid by the customer.
  • {{order.pricing.deposit}} - Deposit amount (if applicable).
  • {{order.pricing.taxIncluded}} - Boolean value to indicate if tax is included.
Pricing details (arrays)
  • {{order.pricing.taxes}} - Taxes on the order.
    • {{rate}} - Tax rate (in %).
    • {{price}} - Tax price.
Custom checkout fields (arrays)
  • {{label.def}} - Label name of the custom field.
  • {{value}} - Value of the custom field.
Cancellation policy (single-value variables)
  • Details on how cancellations are handled.

Handlebars modifiers

Besides variables, you can also use Handlebars modifiers.

The {{#if}} modifier is used to conditionally render a block of HTML if a given variable is truthy (i.e., exists and is not empty). It works like a typical if statement in programming.

Syntax example
{{#if order.delivery}}
  <b>Delivery information:</b>
  {{order.delivery.deliveryTo.address}}
{{/if}}


Explanation: This block will be rendered if order.delivery exists.

The {{#each}} modifier is used to iterate over an array, rendering the inner block for each element.

Syntax example
{{#each order.persons}}
  <div>
    {{firstName}} {{lastName}}
  </div>
{{/each}}


Explanation: This will iterate over each person in order.persons, displaying their first and last name.

The {{#unless}} modifier works like the opposite of {{#if}}. It renders a block if the variable is falsy (i.e., does not exist or is empty).

Syntax example
{{#unless order.pricing.taxIncluded}}
  <div>
    <span>Subtotal</span>
    <span>{{order.pricing.subtotal}}</span>
  </div>
{{/unless}}


Explanation: This will render the subtotal row only if order.pricing.taxIncluded is false or doesn't exist.

You can also use @last inside the {{#unless @last}} to adjust the behavior based on if the item is the last one.

How to use modifiers effectively

  • Conditional rendering ({{#if}} and {{#unless}}): Use these to control whether a specific part of the template should be displayed based on the availability or value of data.
  • Iteration ({{#each}}): Use this to loop through arrays like persons, products, or custom fields to dynamically display data that may vary in length.

These modifiers make the template flexible, adapting to different orders and scenarios by only displaying relevant data.

Tip: To quickly edit or create new template, you can use AI chatbots, such as OpenAI's ChatGPT, especially the GPT4o with canvas.

If you are looking to use the order confirmation as a printable waiver, check out guide: How to create printable waiver form.