Edit Mode Overview
When you enter Edit Mode, the screen is split into two sections:
Left Side: Choose the language in which you want to edit the confirmation and select one of the two tabs:
Editor: Displays the HTML and Handlebars code for the document. This is where you’ll make your changes.
Test Data: Provides sample data to help you see how your changes will appear with real order data.
Right Side: Shows a live preview of the document, which updates instantly as you edit the source code.
Note: Editing is not available on mobile. You'll need to access the document editor from a desktop or laptop.
Editing Documents: HTML and Handlebars
To make changes to a document, you’ll need to use HTML and Handlebars, a templating language. You can refer to external HTML and Handlebars documentation for more details.
Here are a few quick examples of common customizations:
1. Changing Font Size
To increase the font size of a specific element, such as a customer name, locate the HTML in the Source tab and add a style attribute like this:
<span style="font-size: 20px">
{{orderData.responsiblePerson.firstName}} {{orderData.responsiblePerson.lastName}}</span>
2. Making Text Bold
To bold a section of text, wrap the text in <strong> tags:
<strong>Contact information</strong>
3. Adding a New Paragraph
To add a new paragraph, wrap the text in <p> tags:
<p>Remember to bring an ID card when picking up your order!</p>
Non-Editable Elements
Certain elements of some documents cannot be edited. For example:
The Barcode and the Order Number at the bottom of the Order Confirmation
Saving Changes and Reverting to Default
Once you've made your edits:
Click Save in the top-right corner to apply the changes.
If you want to undo your customizations and return to the original layout, click Revert to Default.