Skip to content
This repository was archived by the owner on Jan 10, 2025. It is now read-only.
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 29 additions & 38 deletions docs/stencil-docs/developing-further/customizing-invoices.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,84 +2,75 @@

<div class="otp" id="no-index">

### On This Page
- [Email Invoice Template](#email-invoice-template)
- [Merchant Printable Invoice](#merchant-printable-invoice)
- [Customizing the Customer Printable Invoice](#customizing-the-customer-printable-invoice)
- [Customizing the Detailed Customer Printable Invoice](#customizing-the-detailed-customer-printable-invoice)
### On this page
- [Email invoice template](#email-invoice-template)
- [Merchant printable invoice](#merchant-printable-invoice)
- [Customizing the customer printable invoice](#customizing-the-customer-printable-invoice)
- [Customizing the detailed customer printable invoice](#customizing-the-detailed-customer-printable-invoice)
- [Resources](#resources)

</div>
</div>

There are four editable invoices in BigCommerce:

1. Email Invoice
2. Merchant Printable Invoice
3. Customer Printable Invoice
4. Detailed Customer Printable Invoice (UK orders only)

1. Email invoice
2. Merchant printable invoice
3. Customer printable invoice
4. Detailed customer printable invoice (UK orders only)

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
## Email invoice template

See the article [Customizing Emails](https://developer.bigcommerce.com/stencil-docs/developing-further/customizing-emails) for editing merchant-facing email templates.

## Merchant Printable Invoice
## 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**.

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](https://raw.githubusercontent.com/bigcommerce/dev-docs/master/assets/images/customizing_invoice_print_order_invoice.png "Order Invoice")

The invoice that is generated by clicking Print Invoice relies on a template files and variables from [BigCommerces legacy Blueprint themes framework](https://developer.bigcommerce.com/legacy/blueprint-themes/blueprint-email-templates). This invoice can be customized by performing the following steps:
The invoice that is generated by clicking **Print Invoice** relies on template files and variables from [BigCommerce's legacy Blueprint themes framework](https://developer.bigcommerce.com/legacy/blueprint-themes/blueprint-email-templates). This invoice can be customized by performing the following steps:

1. Download the [invoice_printable.zip](https://storage.googleapis.com/bigcommerce-production-dev-center/template-files/invoice_printable.zip) file, which contains the skeleton of a printable invoice.

1. Download the [invoice_printable.zip](https://storage.googleapis.com/bigcommerce-production-dev-center/template-files/invoice_printable.zip) 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/ folder. We recommend CyberDuck, the freeware [WebDAV](https://support.bigcommerce.com/s/article/File-Access-WebDAV#webdav-client) client, available for Windows and Mac OS. Your store’s control panel offers a downloadable connection file prefilled with most store credentials.
3. Use WebDAV to upload your customized HTML file to WebDAV's /template/ folder. We recommend CyberDuck, the freeware [WebDAV](https://support.bigcommerce.com/s/article/File-Access-WebDAV#webdav-client) client, available for Windows and Mac OS. Your store's control panel offers a downloadable connection file pre-filled with most store credentials.

<div class="HubBlock--callout">
<div class="CalloutBlock--">
<div class="HubBlock-content">

<!-- theme: -->

### Blueprint Variables and Customization
> For a list of available variables, see [Blueprint Email Templates](https://developer.bigcommerce.com/legacy/blueprint-themes/blueprint-email-templates).
### Note
> * For a list of available variables, see [Blueprint Email Templates](https://developer.bigcommerce.com/legacy/blueprint-themes/blueprint-email-templates).

</div>
</div>
</div>

## 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.

## Customizing the customer printable invoice

<!--
title:
data: //s3.amazonaws.com/user-content.stoplight.io/6116/1563210752661
-->
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.

![](//s3.amazonaws.com/user-content.stoplight.io/6116/1563210752661 "")
![Customer Printable Invoice](//s3.amazonaws.com/user-content.stoplight.io/6116/1563210752661 "Customer Printable Invoice")

This invoice becomes available in a shoppers orders after completing an order. A shopper can generate this invoice by clicking **Print Invoice** on the right-hand side of the page.
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 <span class="fn">invoice.html</span> file that is present in your themes files. In Cornerstone, this file is located in <span class="fp">/cornerstone/templates/pages/account/orders/invoice.html</span>.
As a developer, you can customize this invoice by editing your theme's `invoice.html` file that is present in your theme's files. This file is located in `templates/pages/account/orders/invoice.html`.

## Customizing the Detailed Customer Printable Invoice
## Customizing the detailed customer printable invoice

This invoice is used when a store recieves an order from a United Kingdom address. This invoice can be customized by performing the following steps:
This invoice is used when a store receives an order from a United Kingdom address. This invoice can be customized by performing the following steps:

1. Download the [PrintableDetailedInvoice.html](https://storage.googleapis.com/bigcommerce-production-dev-center/template-files/PrintableDetailedInvoice.html) file, which contains the skeleton of the detailed 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/ folder. We recommend CyberDuck, the freeware [WebDAV](https://support.bigcommerce.com/s/article/File-Access-WebDAV#webdav-client) client, available for Windows and Mac OS. Your store’s control panel offers a downloadable connection file prefilled with most store credentials.
3. Use WebDAV to upload your customized HTML file to WebDAV's /template/ folder. We recommend CyberDuck, the freeware [WebDAV](https://support.bigcommerce.com/s/article/File-Access-WebDAV#webdav-client) client, available for Windows and Mac OS. Your store's control panel offers a downloadable connection file pre-filled with most store credentials.

## Resources

### Related Articles
### Related articles
* [Shrinking a Theme by Excluding Static Assets Using WebDAV](https://developer.bigcommerce.com/stencil-docs/prepare-and-upload-a-theme/shrinking-your-theme)
* [Blueprint Theme Email Templates](https://developer.bigcommerce.com/legacy/blueprint-themes/blueprint-email-templates)
* [Uploading and Linking to a File in Your Store](https://support.bigcommerce.com/s/article/How-do-I-add-and-link-to-a-file-in-my-store#upload-a-file) (Knowledge Base)
Expand Down