Skip to main content

Configure text and merge fields in HTML invoice templates

Zuora

Configure text and merge fields in HTML invoice templates

The HTML Templates feature is in the Early Adopter phase for invoices. We are actively soliciting feedback from a small set of early adopters before releasing it as generally available. If you want to join this early adopter program, submit a request at Zuora Global Support.

After an HTML invoice template is created, you can configure texts and merge fields through the Zuora UI.

Add text to HTML invoice templates

To add text into an HTML invoice template through the Zuora UI, perform the following steps:

  1. In the HTML invoice template, click one Row block, and then click Add Content in the block.
    The Content tab is displayed in the right panel.

  2. In the Content tab, drag and drop the Text component into the HTML template.
    A Text block is displayed in the HTML template.

  3. Click the Text block in the HTML template.
    The Content panel is displayed on the right of the template editor, and the displayed toolbar is displayed next to the Text block. 

  4. In the displayed toolbar, select the font, font size, and other styles to apply to the Text block. 
  5. In the Content panel, configure the text color, text alignment, line height, link style, and container padding to apply to the Text block.
  6. In the Text block, enter the text that you want to display in the invoice. For example, if you want to add a merge field to display the invoice number, enter Invoice Number: in the Text block before adding the merge field.

Add merge fields to HTML invoice templates

To add a merge field into an HTML invoice template through the Zuora UI, perform the following steps:

  1. In the HTML invoice template, click one Row block, and then click Add Content in the block.
    The Content tab is displayed in the right panel.

  2. In the Content tab, drag and drop the Text component into the HTML template.
    A Text block is displayed in the HTML template.

  3. Click the Text block in the HTML template.
    The Content panel is displayed on the right of the template editor, and a toolbar is displayed next to the Text block. 

  4. In the Text block, enter double curly braces, an object name, and a dot. For example, if you want to add a merge field to display the invoice balance, enter {{Invoice. in the Text block.

  5. In the displayed toolbar, click Merge Fields to expand the objects and fields tree. 

  6. Scroll down to Invoice and its nested fields, and select one nested field from the list.
    The field name is appended to the merge field. For example, if you click Invoice > Balance, and it shows {{Invoice.Balance in the Text block.

  7. Input }} to close the merge field.
    The merge field is displayed as {{Invoice.Balance}} in the Text block.

  8. If you want to customize the style of the merge field, select the merge field in the Text block, and use the displayed toolbar to configure its styles, including the text color, font, size, and so on.

For more information about merge field syntax, see Merge field syntax for HTML invoice templates.