Browse
 
Tools
Rss Categories

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

Availability

Subscription: EmployeeBoost, PartnerBoost, CloudAlerts, CloudBooking, CloudForms

Overview 

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 tab
    • Invoice Template Name
      • This is the name of the template. The customer does not see this name.
    • Template Description
      • This is a short description of the template. The customer does not see this description
    • Print Default
      • If you want this invoice template to be the invoice template used when the 'Print Invoice' button is clicked select this option
    • Email Default
      • If you want the invoice template to be the invoice template used when the 'Email Invoice' button is clicked select this option.
    • Show Items In Package
      • If this option is selected each of the items in the package will be displayed
    • Currency Symbol
      • This is the currency symbol used in the invoice. Examples would be $, £, etc.
  • Customize Fields tab
    • The customized fields tab lets you customize which fields are displayed in StudioCloud as well as the wording used for those fields.
  • Logo tab
    • 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.
  • Additional Details tab
    • 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.
    • Terms Of Agreement Acceptance Button
      • This option adds a button which the client can click to agree to the terms of agreement. If a balance is due the client will be automatically forwarded to the epayment page if a merchant account is setup in the account.
  • Signature Tab
    • 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.
  • Theme Tab
    • Form Theme
      • Select the desired theme. The compact theme is better for printing because it uses less ink and paper. The Standard Template theme is better for email or text messages.

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