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:
Click on the Settings component
Click on the Settings tab
Click the Manage StudioCloud Settings button
Click the Print Using HTML Invoice Template radio button
How Create or Edit a HTML5 Invoice, Estimate, or Quote Template
Click on the Point of Sale component
Click on the Settings tab
Click the Manage HTML5 Invoices button
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.