---
title: "Customizing Invoice Templates"
url: "https://help.psarev.io/en/article/customizing-invoice-templates"
language: "en"
last_updated: "2026-10-16T14:07:46.346Z"
---

# Customizing Invoice Templates

The invoice template editor allows you to design the look and feel of your customer invoices using either the drag and drop editor or the HTML editor. To access the editor, open an invoice template from the *Invoice Templates* tab in *Billing Config* under System Settings.

## Choosing an Editor

Select **Drag & Drop** or **HTML** from the toolbar in the *Template Content* section to choose your editing method.

The **Drag & Drop** editor allows you to build your template visually by dragging components onto the page preview. The **HTML** editor allows you to write or paste raw HTML to fully control the template's layout and styling.

| **NOTE:** The drag and drop editor and the HTML editor are not fully compatible with each other. We strongly recommend choosing one method and sticking with it as you edit the template. Switching between the two methods can cause formatting issues. |
| --- |

## Using the Drag & Drop Editor

Components are organized into the following categories in the *Components* tab.

-   **Layout** controls how content is organized on the page. When you drag an element onto the page preview, it will span the full width of the page by default. To control exactly where elements appear, use the layout components to create structure first, then place other elements inside them. To add extra spacing between elements, add a row container, as elements will otherwise stack directly against the previous one.
-   **Structure** provides additional formatting controls to help organize the content within your layout.
-   **Content** contains the standard content elements you can add to your template, such as text blocks and images.
-   **Data** contains customizable widgets that will automatically populate with data from your Rev.io instance when invoices are generated. Note that the Tickets Table component is only available for one-time invoice templates.
-   **Marketing** contains promotional elements including a QR code component and the **Bill Messages** component. To configure the QR code, select it on the page and click the *Styles* tab to add the link and link text. To link the QR code to your customer portal, format the URL as follows: *www.company.portalrev.io*, replacing “company” with your client code. See the section below for information about the **Bill Messages** component.

## Using Bill Messages

The **Bill Messages** component in the *Marketing* category displays the special message and autopay messages from the customer's billing information or bill profile. Drag it to where you want the messages to appear on the invoice. It works the same way in one-time and recurring templates. To format the messages, select the component and click the *Styles* tab.

The component includes multiple text boxes for different message types. Text typed into these boxes is replaced by the messages from the customer or bill profile when invoices are generated. To add a message that is the same on every invoice, use the Bill Messages on the bill profile as your default.

The autopay messages only print when the customer has autopay set up, and no blank space is left on the invoice otherwise. Bill messages also display on the default system templates. See the [Configuring Bill Messages on Invoices](https://help.psarev.io/en/article/configuring-bill-messages-on-invoices) article for more information.

## Configuring Styles

To configure the styling of any element, select it on the page preview and click the *Styles* tab. Styles will only be available when an element is selected. The following style options are available.

-   **Typography** controls the text appearance of the selected element, including **Font Family**, **Font Size**, **Font Weight**, **Color**, **Text Align**, **Line Height**, and **Text Decoration**.
-   **Background** allows you to set the **Background Color** of the selected element.
-   **Spacing** controls the space around and within the selected element, including **Padding**, **Padding Top**, **Padding Right**, **Padding Bottom**, **Padding Left**, **Margin**, **Margin Top**, and **Margin Bottom**.
-   **Borders** controls the border appearance of the selected element, including **Border Width**, **Border Style**, **Border Color**, and **Border Radius**. The **Border Radius** setting controls the rounding of the element's corners.
-   **Size** controls the dimensions of the selected element, including **Width**, **Height**, **Min Width**, and **Min Height**.
-   **Properties** allows you to set an **Id** and **Title** for the selected element, which can be useful for identifying elements when working in the HTML editor.

## Saving and Previewing

When you are done editing, click **Preview** to see how the template will look when rendered. Click **Save Changes** to save your template, or **Cancel** to discard your changes and return to the *Invoice Templates* list.