Customizing Invoices

There are three editable invoices in BigCommerce:

  1. Email Invoice
  2. Merchant Printable Invoice
  3. Customer Printable Invoice

Merchants commonly request developers modify the default content of invoices in order to satisfy specific business requirements and industry demands. In order to assist developers in making these changes, this articles contains instructions on how to edit each invoice.

Email Invoice Template

The email invoice is sent to a customer after an order has been completed. The email invoice can be edited in the Control Panel in Storefront > Email Templates > invoice_email.html

After clicking Edit on the right, the WYSIWYG Editor will appear. Follow Editing and Printing Invoices (Knowledge Base) to complete customization of the Invoice Email template.

Merchant Printable Invoice

The Merchant Printable Invoice is the invoice that can be printed from the control panel in Orders > View. Clicking the in the Action column will generate a list of options, one option being Print Invoice.

Print Order Invoice

The invoice that is generated by clicking Print Invoice relies on a template files and variables from BigCommerce’s legacy Blueprint themes framework. This invoice can be customized by performing the following steps:

  1. Download the file, which contains the skeleton of a printable invoice.

  2. Open the file in the text editor of your choice and edit the HTML file to match your desired customization.

  3. Use WebDAV to upload your customized HTML file to WebDAV’s /template/Snippets/ folder. We recommend the freeware WebDAV client CyberDuck (Windows and Mac OS), for which your store’s control panel offers a downloadable connection file prefilled with most store credentials.

Blueprint Variables and Customization

For a list of available variables, see Blueprint Email Templates.

Customizing the Customer Printable Invoice

The customer printable invoice is the printable invoice that is available on a storefront’s order page for shoppers that have registered accounts with your store.

This invoice becomes available in a shopper’s orders after completing an order. A shopper can generate this invoice by clicking Print Invoice on the right-hand side of the page.

As a developer, you can customize this invoice by editing your theme’s invoice.html file that is present in your theme’s files. In Cornerstone, this file is located in /cornerstone/templates/pages/account/orders/invoice.html.


Related Articles