Skip to main content

How to Set Up Your Custom Invoice HTML Template

This guide explains how to set up an invoice template using HTML in Luminous.

A
Written by Airam Pabilonia
Updated over 3 weeks ago

It walks you through customizing your invoice layout, editing the header, and setting your new template as default. By following these steps, you’ll be able to create professional, branded invoices that automatically include your custom invoice numbers and details for every client.

1. Navigate to Manage Templates

  1. From your Luminous dashboard, go to Manage → Templates.

  2. Click Create (found on the top right corner).

  3. Name your Invoice template.

  4. Select "Use Customer HTML" .

  5. Choose Invoice PDF as your base template.


2. Customize the Header Section

In the HTML editor:

  • Keep the majority of the default code.

  • Update the header area to include your preferred title, label, or message. For example:

    <h2>Invoice Number: {{alternate_id}}</h2> <p>Thank you for your business!</p>
  • The {{alternate_id}} tag dynamically inserts the invoice’s unique ID or custom label.


3. Save and Set as Default

Once you’ve customized your template:

  1. Click Save to store your changes.

  2. Click the three dots (⋮) next to your new template.

  3. Select Set as Default.

  4. A checkmark will appear next to your template name — confirming it’s now active for all new invoices.


4. Test the Template

To make sure your setup works correctly:

  1. Go to Invoices in your Luminous CRM account.

  2. Select any invoice (for example, ID #36).

  3. Click Edit, then open Advanced Settings.

  4. Update the Alternate ID field (for example, enter Shields76).

    • ⚠️ Important: Press Enter/Return after typing the new ID so it registers properly.

  5. Click Save, then Mark as Active.

  6. Send a test invoice email to yourself — you should see the updated header and alternate ID reflected in the email and attached PDF.


5. Confirm Dynamic Updates

Luminous templates update automatically when changes are made:

  1. Go back to the same invoice.

  2. Change the Alternate ID (for example, from Shields76Shields77).

  3. Save your changes and resend the invoice.

  4. The updated value should appear immediately in the new invoice version.


6. Make Optional Edits to the Code

If you want to refine spacing, add text, or adjust formatting:

  1. Go back to Manage Templates → Edit Template.

  2. Modify the HTML directly.

    • For example, add a space or line break in the header text.

  3. You can also paste your HTML code into ChatGPT and describe your desired change (e.g., “add a space between the invoice label and number”).

  4. Save your updates and retest by sending another invoice.

Did this answer your question?