Rss Categories

How to Customize the HTML Invoice, Estimate, and Quote Templates


Subscription: EmployeeBoost, PartnerBoost, CloudAlerts, CloudBooking, CloudForms


This tutorial will show you how to customize the HTML5 invoice, estimate, and quote templates.

HTML5 Invoice Templates Overview

How Enable HTML5 Invoice, Estimate, or Quote Template for Printing

To enable the html invoices templates to be used for printing do the following steps:

  1. Click on the Settings component 
  2. Click on the Settings tab 
  3. Click the Manage StudioCloud Settings button
  4. Click the Print Using HTML Invoice Template radio button

How Create or Edit a HTML5 Invoice, Estimate, or Quote Template

  1. Click on the Point of Sale component 
  2. Click on the Settings tab 
  3. Click the Manage HTML5 Invoices button
  4. Click the New Invoice, New Estimate, New Quote button or edit an existing template.

How to Make the Template the Default Template

To make the template the default template when emailing or printing select the checkbox Default Print Invoice Template.

Please note that there can be 1 default invoice template, 1 default estimate template and 1 default quote template.

How to Show the Items in a Package on the Invoice

To show the items in the package on the printed invoice the checkbox called Display Items in Package.

Template Tabs

  • Overview
    • This tab includes the name, description and settings for the template
  • Customize Fields
    • The customized fields tab lets you customize which fields are displayed in StudioCloud as well as the wording used for those fields.
  • Logo
    • The logo tab lets you include a logo with the template. Each template can have a different logo. StudioCloud recommends that you keep the logo width less than 500 pixels and that you keep the logo size less than 200 kb.
  • Details and Signature
    • Additional Information
      • This box is to include any text that you want to appear on every invoice or estimate which may include details such as payment information, legal information,  terms of use, or terms of agreement.  This information will appear at the bottom of the invoice.
    • Include Signature
      • This option is to include a line at the bottom of the invoice for the customer to sign a printed version of the invoice.

How to Preview the Template

Click on the Preview Template With Sample Invoice button to get an idea of what the invoice will look like to the customer.

How to Add an HTML Invoice Template to a CloudForm

This option will automatically email the client an html invoice template when they fill out the cloudform.

Click here for the tutorial on how to setup a CloudForm to use an HTML Invoice Template