Skip to main content

Configure rows and columns in HTML invoice templates

Zuora

Configure rows and columns 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 rows and columns in the template to organize the content.

To configure rows and columns in an HTML invoice template through the Zuora UI, perform the following steps:

  1. Click your username at the top right and navigate to Billing > Manage Billing Document Configuration.

  2. On the Manage Invoice, Credit/Debit Memo Templates tab, click the invoice template that you want to add rows and columns.
    The selected invoice template is displayed in the HTML template editor.

  3. In the Content tab of the HTML template editor, drag and drop the Columns component into the HTML template.
    A Column block is displayed in the HTML template.

  4. Click the Column block in the HTML template.
    The Row panel is displayed on the right of the template editor. 

  5. In the Row panel, configure the following information to customize the general layout and style of the selected row and its columns:

    1. Click Delete and Duplicate to manage the number of rows included in the template.

    2. In the Columns section, select a column layout from the listed default layout examples.

    3. In the Column Properties section, click Add Column and Remove Column to manage the number of columns in the current row, and configure the background color, padding, and border for each column.
      If you configure both the row settings and column settings, the column settings override the corresponding row settings.

    4. In the Row Properties section, configure the row background color, content background color, content alignment, background image, and padding for the entire row.
      If a row contains multiple columns, all columns use the row configuration.

You can also use the Blocks tab to add rows to an HTML invoice template.

  1. In the Blocks tab, click Blank > All to view all default blank rows.

  2. Drag and drop a default row component into the HTML template.
    A Row block is displayed in the HTML template.

  3. Click the Row block in the HTML template.
    The Row panel is displayed on the right of the template editor. 

  4. In the Row panel, configure the general layout and style of the selected row and its columns.

The existing default rows support four columns at most.