Edit a document template's design with "Edit code"
For full control over how an invoice or quote document looks, open "Edit code". This opens the template's raw Liquid source in a side-by-side editor: you type in the source on the left and a live preview updates on the right as you go, rendered with sample data so you can see real layout without affecting any actual customer document.
A panel of available variables sits beside the editor; click any variable to insert it at your cursor, so you don't have to remember the exact code. You can switch the preview between sample customers, properties, and line items to check how the template handles different data. Open Service property and type in the search field to find a sample property by name or city. With the picker open, use the arrow keys to move through results and Enter to choose a property; Escape closes the picker.
If you go too far or want a clean slate, "Reset to default" reverts the source back to its default (for a library template that's the library style's default; for a customized template it's your saved version).
Nothing is applied until you choose "Save template", and you'll see an "Unsaved changes" marker while edits are pending. One requirement: editing source needs the document-template source-editing permission in addition to permission to change that template type.
Without it, you can still browse the template library, switch templates, and preview them, but the "Edit code" and "Customize" buttons won't appear. If you need to edit template source, contact your business's administrator to review your role.
Show item codes on the document
Essential's built-in styles don't print item codes, but you can add them. Inside the line-item loop, insert the Item code (when known) variable from the variable panel — it inserts {% if item.code %}{{ item.code | escape }}{% endif %}, so lines without a code print nothing instead of an empty gap. To make it a column, add a header cell alongside the built-in headers (Parts, Labor, and Items / Tax / Qty / Unit Price / Total) and put the variable in the matching body cell.
The code comes from your pricebook: Essential matches the line's name to your items and uses that item's code. Because a quote or invoice line stores its own copy of the name and price, the code is blank when the line's name doesn't match a pricebook item exactly - a custom line, or a line whose name was edited after it was added - and also when two pricebook items share the same name, since there's no single right code to print. Keep names as they come from the pricebook if you want codes on every line.
If a code is missing where you expected one, compare the line's name on the document against the item's name in Settings > Items.
The same value is used everywhere the document renders: the preview in the editor, the quote or invoice page, the mobile app, the PDF attached to emails, and the customer's sign or payment page. The sample line items in the preview all carry codes, so you can lay out a code column and see it before you save.
Where to find it: Settings > Invoicing (or Settings > Quotes), in the template section. Use the "Edit code" or "Customize" button. (You'll need both write access to the template type and the document-template source-editing permission.)
Related guides
Last updated
Was this helpful?