# Customizing Your HTML Invoice Template

center
em
Figure 1 : Preview of Invoice Template
br
This guide explains how to customize every major element of your HTML invoice template using the built-in editor. It provides detailed, step-by-step instructions written in simple, non-technical language, with minimal code references, so even non-developers can comfortably configure the template.
## **1. Change the Invoice Title**

center
em
Figure 2 : Invoice Title
br
The invoice title is the main heading displayed at the top of your invoice. It usually appears as “Tax Invoice” by default. To change this, scroll through your template and locate the heading tag that defines the title. It typically looks like:
**`
`. Inside it, you’ll see an image tag that looks like:
**`

`**
Replace the `src` value with your new QR code image. This can be a payment QR, an IRN QR, or any other code your business requires.
A caption such as “IRN QR” or “Payment QR” is displayed below it and can also be edited.
## **4. Edit Seller and Customer Details**

center
em
Figure 5: Seller and Customer Details Section
br
The Seller and Customer sections are typically presented side-by-side. These blocks use placeholder tags to fetch dynamic business information. You can replace these placeholders with static text or updated variables based on your setup.
### **Seller Details**
You will find entries like:
* `{{ company_detail.name }}`
* `{{ store_detail.address }}`
* `{{ company_detail.phone_no }}`
Replacing these values allows you to define the correct business name, store address, customer support numbers, GST/VAT numbers, or any additional compliance information.
You may also add new lines, such as warehouse codes or branch identifiers, if relevant.
### **Customer Details**
Customer information appears under headings like “Bill To” and “Ship To.” Similar placeholders are used:
* `{{ customer_billing_detail.name }}`
* `{{ customer_billing_detail.phone_no }}`
* `{{ customer_billing_detail.address }}`
Replace these placeholders with formatted information as required, or keep them dynamic if your platform auto-fills them.
You can also customize headings such as “Bill To” or “Ship To” to match your format preferences.
## **5. Edit Product Details**

center
em
Figure 6: Product Details Section
br
This section contains a table that lists all items purchased in the order. Although the table contains many columns, each one is straightforward to update. The labels—such as Product, Size, Seller Identifier, Quantity, Discount, Taxable Amount, VAT, and Total—can all be renamed or rearranged.
Inside the table, each product field is represented using placeholders such as:
* `{{ product.name }}`
* `{{ product.total_units }}`
* `{{ product.total }}`
To modify the product details layout, adjust the column names, formatting, or remove columns you don’t use.
For example, if your business does not use “Seller Identifier,” you may remove that column header and its corresponding data cell.
Currency symbols (₹, $, AED, etc.) also appear inside these placeholders and can be changed as needed.
The table automatically repeats for each product in an order, so you don’t need to modify the structure for multiple items.
## **6. Edit Footer Information**

center
em
Figure 7: Footer Information Section
br
The footer is the closing section of your invoice and typically includes your brand logo, registered company address, contact details, website link, and sometimes a digital signature. These fields appear as placeholders like:
* `{{ registered_company_detail.address }}`
* `{{ company_detail.email }}`
* `{{ company_detail.phone_no }}`
* `{{ company_detail.website_url }}`
You can simply replace the placeholder values with your actual information. This ensures your invoice complies with business registration standards and keeps customers informed.
If your template includes a brand logo here, update its image source using the same approach described in the header section.
If a digital signature is required, you’ll find a small image tag representing the signature. Replace its `src` value with your signature image. The “Authorized Signatory” label can also be customized.
## **7. Edit Payment Information**

center
em
Figure 8: Payment Information Section
br
The payment section explains how the order was paid—whether online, via COD, through a wallet, by card, or using any other method. This block includes placeholders such as:
* `{{ payments[0].date }}`
* `{{ payments[0].transaction_id }}`
* `{{ amount_paid }}`
* `{{ payment_type }}`
You can edit the labels, modify the displayed payment method name, show or hide the transaction ID, or rewrite the structure to make this section clearer.
For example, if you prefer “Payment Mode” instead of “Mode of Payment,” you can change the label directly.
If multiple payment methods were used (such as split payments), the template may loop through each method—this can be simplified or expanded based on your needs.
Some templates hide payment details for COD orders. If you want to always show or always hide them, simply adjust the conditional text around that section.
## Miscellaneous (Summary)
This invoice template is designed to be flexible and can be adapted to suit most business formats. Every field is editable by changing the text inside small placeholder tags or modifying the labels around them. Whether you're altering branding, adjusting compliance fields, reorganizing product details, or personalizing the footer, the process requires only simple text and label updates—no deep coding knowledge is necessary.
When customizing, always preview the output to ensure your changes appear clean and properly aligned. Once finalized, your updated invoice template will reflect your brand identity and present information clearly to your customers.