This is step-by-step guide how to create custom printable waiver on TWICE Commerce OS.
Note: Customizability 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.
Lets start by designing what we want the rental waiver to include. You can do this on any software, such as Google Docs or Microsoft Word or Notion.
I’ve created a simple example rental waiver, which consist of a summary page and individual waivers for each person within the order.
The summary page includes the order id, store contact information and renter information.
The waiver part is created for each customer within the same order. It includes the same order id, the terms and the products the person is responsible for.
Here is the end result in Google Docs.
When you are happy with the design its time to move to TWICE Commerce admin.
Tip: Easy way to get started is to involve AI assistants, such as OpenAI’s ChatGPT, especially the GPT4o with Canvas. You can input the end result as an image or as a .pdf and paste example template and test data from the document editor.
To create the waiver, we are going to use the printable order confirmation, which can be printed from the order view.
To customize the order confirmation, head to Settings > (1) Documents. By default you are editing the template for the store you have selected on admin. If you want to change the store which document you are editing you can do it on top of the page (2). You can open the editor by clicking Edit (3).
Note: The templates are saved per store. If you have multiple locations and want to use the same template, you need to copy and paste it manually.
After clicking the Edit, you can see two tabs: Editor (1) and Test Data (2) and the preview (3).
Tip: if you want to explore in detail how the template editing works and which variables are available, check out our docs on printable order confirmation.
The editor has the default template, which you can always revert back to. It is a great source in combination with the test data to understand how the templates are built.
Note: previous versions are not saved, by pressing Revert to default the current template is lost.
But for this guide, lets start building the template from empty page.
Lets start by creating a basic HTML document structure with <html>, <head>, and <body> tags.
Inside the <head> tag, we'll define the <style> to format the appearance of the document, which includes fonts, alignment, margins, and styles for different elements (e.g., container, table, headings).
Let's add the content inside the <body> tags.
We want to make sure the document looks great and has enough breathing room around. Let's add a div with a class container: <div class="container"></div>. We'll add rest of the content inside this div.
.avif)
Next, we can start filling in the content for the cover page.
We can use header <h1> to write the title of the document.
Below the header we can use paragraph <p> tags to enter content. We can also highlight parts of the text using <strong> tag.
Then we can use header level 2 tags <h2> to add structure for Store Contact Information and Renter Information
Below the headings we can list the details as unordered lists using <ul> and <li> tags. We want to use as many variables as we can as the variables get information from the store's settings or from the order. This way any changes to the store settings or order values are always present in the document. This also allows us to use the template on multiple locations (which we have to manually copy and paste to the other store). The available variables are visible on the Test data -tab.
Now that we have the cover page done, we can start to create the waiver pages, which include terms, products and signature for each person from the rental order.
To accomplish this we will use Handlebars' (the templating engine we use) {{#each}} iterator, which loops through all the values inside an array. The persons are always inside an array, even if there is only one person on the order. The products are also always linked to the person.
We will wrap everything around {{#each order.persons}}. We can also include a little bit of CSS magic to create new pages for each person. We can use empty <div> tag with a class (we can call it for example pagebreak), which we will define soon in the <style> section.
Then we can add all the content we want the page to contain for each person. These can be for example the terms and the products they are renting out. For this we can use for example <table>. I've also added CSS classes for the table and wrapper the signature partion to create some space.
Tip: inside{{#eachname of the array}}we reference the variables without the higher level selector, so in our example inside{{#each order.persons}}we use{{firstName}}not{{order.persons.firstName}}. If we want to "escape" to higher level, we can use{{...name of the variable}}, for example{{...order.orderId}}.
Now that we have all the content, we want to add CSS inside the <style> to finalize the template.
We can add styling to both tags, such as <body> or classes, such as container.
The page break magic uses @media print, which defines the behavior when printing the document. There we want to define page-break-before: always; for the div with class pagebreak, which we added at the beginning of {{#each}} loop for the persons.
The document includes built in barcode at the end. To not include it in any of the pages, we can add another page break to the end of the document.
Now we can save the template and go test it out. I'll create an order with multiple people and multiple products.
When printing the order the document works as intended.
If you want to test and customize the waiver template yourself, you can copy it below and paste it your editor.
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
font-size: 12px;
}
.container {
width: 96%;
max-width: 600px;
margin: auto;
padding: 24px 12px;
color: black;
}
h2 {
font-size: 16px;
margin: 24px 0;
}
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid #f7f7f7;
padding: 4px;
}
.order-table {
font-size: 10px;
text-align: left;
margin: 16px 0 0 0;
padding: 4px;
}
.signature-line {
margin: 48px 0px;
}
@media print {
.pagebreak { page-break-before: always; }
}
</style>
</head>
<body>
<div class="container">
<h1>Example Rental Waiver for {{store.name}}</h1>
<p><strong>Order ID:</strong> {{order.orderId}}</p>
<h2>Store Contact Information</h2>
<ul>
<li><strong>Store Name:</strong> {{store.name}}</li>
<li><strong>Address:</strong> {{store.address}}</li>
<li><strong>Phone:</strong> {{store.phone}}</li>
<li><strong>Email:</strong> {{store.email}}</li>
</ul>
<h2>Renter Information</h2>
<p><strong>Contact Information of Liable Person</strong></p>
<ul>
<li><strong>Name:</strong> {{order.liablePerson.firstName}} {{order.liablePerson.lastName}}</li>
<li><strong>Email:</strong> {{order.liablePerson.email}}</li>
<li><strong>Phone:</strong> {{order.liablePerson.phone}}</li>
</ul>
{{#each order.persons}}
<div class="pagebreak"></div>
<p><strong>Order ID:</strong> {{...order.orderId}}</p>
<h2>Terms and Conditions</h2>
<p>I, the undersigned, understand and agree to the following terms and conditions regarding the rental equipment provided by {{...store.name}}:</p>
<ol>
<li>I accept full responsibility for the care and safe return of all rental equipment listed below.</li>
<li>I understand that the rental equipment must be used in accordance with all applicable safety guidelines.</li>
<li>I agree that I am responsible for any damages or losses incurred while the equipment is in my possession.</li>
<li>I acknowledge that {{...store.name}} is not liable for any injuries, damages, or losses that may occur during the rental period.</li>
<li>I agree to pay any additional fees for late returns, damages, or lost equipment, as outlined by {{...store.name}}.</li>
</ol>
<h2>Products</h2>
<table class="order-table">
<thead>
<th>Product</th>
<th>Rental date(s)</th>
<th>Price</th>
<th>Deposit</th>
</thead>
<tbody>
{{#each products}}
<tr>
<td>{{productName}} {{#if variantNames}} - {{#each variantNames}}{{name}}{{#unless @last}} - {{/unless}}{{/each}}{{/if}}{{#if productCodes}} ({{productCodes}}){{/if}}</td>
<td>{{formattedDate}}</td>
<td>{{pricing.subtotal}}</td>
<td>{{#if pricing.deposit}}{{pricing.deposit}}{{else}}-{{/if}}</td>
</tr>
{{/each}}
</tbody>
</table>
<h2>Signature Section</h2>
<p>Please sign below to acknowledge that you have read, understood, and agree to the terms and conditions stated above.</p>
<div class="signature-line">
<p>Signature: ________________________________ Date: _____________________________________</p>
<p>Name: {{firstName}} {{lastName}}</p>
</div>
<p><strong>Important Note:</strong> Please return this form, signed, to a representative of {{...store.name}} before using the rental equipment. Thank you for your cooperation.</p>
{{/each}}
</div>
<div class="pagebreak"></div>
</body>
</html>