Creating a custom HTML Purchase Order template
Luminous lets you replace the standard options-driven PO layout with a fully custom HTML document. This article covers the HTML mode specifically — for the column-picker (Options) mode, see How to Set Up Purchase Order (PO) Export Templates in Luminous.
1. Open the template editor
- Go to Manage → Templates.
- Click Create (or edit an existing one) and set the type to Purchase Order.
- Under Configuration Mode, choose Use Custom HTML (the other option, Use Standard Options, is the column-picker mode covered in the companion article).
2. Understand the two-panel editor
| Panel | What goes here |
|---|---|
| HTML | Your complete Mustache + HTML document body. Tables, headings, loops, conditionals — everything the PDF renders. |
| CSS | Any additional styles you want injected alongside the base stylesheet. Color utilities (.text-blue, .text-red, etc.), table striping, and address-block helpers are available by default. |
The HTML and CSS panels are separate so you can iterate on styles without touching your markup, and vice versa.
3. Start from the default template
When you create a new HTML-mode Purchase Order template the editor loads a ready-to-use default that demonstrates:
- Company logo (conditional on
{{#company.logoUrl}}) - Purchase Order heading with PO number and date
- FROM (your company) and TO (supplier) address blocks
- Ship-to address, ship-via, payment terms, and requested/arrival dates
- Order Items table with Source SKU, Internal SKU, unit, quantity, unit cost, and line total
- Totals block (total units, order cost, shipping, grand total, balance payable)
- Conditional notes section
- "Powered by Luminous" footer
Use this as your starting point and remove or rearrange sections to suit your layout.
4. Insert placeholders
Click Insert Placeholder (top-right of the HTML editor) to browse every variable available for Purchase Order templates — including order-level fields, supplier address parts, and the {{#orderLines}} loop for line items. See What placeholder variables are available in Purchase Order and Production Run export templates? for the full reference.
Key placeholders at a glance:
| Placeholder | What it shows |
|---|---|
{{purchaseOrderNumber}} | PO number |
{{orderDate.short}} | Order date |
{{supplier.name}} | Supplier name |
{{{supplier.address.fullAddressBlock}}} | Pre-formatted supplier address HTML |
{{{shipToAddress.fullAddressBlock}}} | Pre-formatted ship-to address HTML |
{{paymentTerms}} | Payment terms |
{{requestedShipDate.short}} | Requested ship date |
{{arrivalDueDate.short}} | Estimated arrival date |
{{company.logoUrl}} | Your company logo URL (use inside {{#company.logoUrl}} ... {{/company.logoUrl}}) |
{{#orderLines}} … {{/orderLines}} | Loop over PO line items |
{{sku}} / {{internalSku}} | Supplier SKU / internal SKU (inside the lines loop) |
{{quantity}} / {{unitCost}} / {{lineTotal}} | Line quantities and costs |
{{grandTotal}} / {{balancePayable}} | Order totals |
{{notes}} | Order-level notes |
{{imageUrl}} | Product image (fetched only when this placeholder is present) |
Tip: Use triple braces
{{{ }}}for placeholders that output pre-rendered HTML (address blocks). Use double braces{{ }}everywhere else.
5. Set as default and save
- Check Make this template default if this layout should apply to all PO exports automatically.
- Click Save.
6. Export a PO using your template
- Go to Inventory → Purchase Orders.
- Open the PO's row Actions menu (⋮) and click Export to PDF.
- If you have multiple templates configured and the "Ask me each time" setting is on, choose your template in the picker and click Confirm.
Existing templates
Templates saved before this editor change continue to export correctly — no action is required. If you want to consolidate an old template into the new single-body shape, open it in the editor; the HTML panel will be pre-populated with the merged content of the old fragments.