Modify the Printed Invoice in BigCommerce (Stencil)

We’ve received a number of inquiries from merchants wishing to change the content or structure of their BigCommerce printed invoice.

Recently, these inquiries have focused on the need to notify customers of new terms, policies, or information related to operations during the COVID-19 pandemic.  Historically, we receive similar inquiries around peak shopping periods (Black Friday, Christmas, Mother’s Day, etc.).

In nearly all cases, the client has spent a significant amount of time researching the issue, has found incomplete or conflicting information on the web, and is generally “stuck” and wondering what to do.  We want to help – not cause further confusion – so let’s start with the basics.

  1.  You want to change the content of the “Printed Invoice” template within BigCommerce.  The printed invoice can be accessed in the BigCommerce admin panel by clicking “Orders” and (Option A – For a Single Invoice) selecting “Print Invoice” under “Action”, or (Option B – For multiple invoices) selecting multiple orders via the check boxes and and choosing “Print Selected Invoices” from the “Choose and Action” drop-down box.  Changes made to the template shall be visible on all invoices.  

    Where to find printed invoices in BigCommerce

     

  2. You’re using a theme from the Stencil family.  If your BigCommerce website was created after November 2016, you’re likely using a Stencil-based theme.  This tutorial will not be relevant if you’re using a Blueprint-based theme.  Here’s some additional information that will allow you to determine which theme platform you’re using.

 

OK, so if you’re using a Stencil template and want to change the Printed Invoice. . .let’s get started:

 

Instructions:  Modify the Printed Invoice in BigCommerce Theme (Stencil Theme Type)
Step 1:  Ensure that you  are authorized to use WebDav in your BigCommerce environment.  Ask your admin to enable WebDav access on your account at Account Settings > Users > Actions (Edit) and enable WebDav.

Step 2:  In the BigCommerce admin panel, navigate to Server Settings > File Access (WebDAV). Copy the content in “Setup Details” or leave the page open and proceed to step 2.

Step 3:  Download the Cyberduck application at Cyberduck.io (free)

Step 4:  Once Cyberduck is downloaded, open the application and click “Open Connection” in the upper left-hand side of the window.

Step 5:  Enter “Setup Details” into Cyberduck:

WebDAV Path = Server

WebDAV Username = Username

WebDAV Password = Password

 

Then click “Connect”

Step 6:  Expand the “template” folder, and you’ll see the available documents.  Select the document you’d like to modify (in this case “PrintableInvoice.html”), right click and “download”.  You’ll find the files in your downloads folder.
Step 7:  Before you make any changes to the documents, save a copy of the original file(s) you downloaded. Name them something like “invoice-old.html” and keep them in case you need to revert back to the original.
Step 8:  Modify the invoice to your liking.  To do this, you’ll need some basic knowledge of HTML.  If you don’t have strong HTML skills/tools, there are some great online tools out there that can help (i.e. if you know how to use MS Word or similar word processing tools, you’ll get the hang of it).

Here’s a great online/free HTML editing tool:

https://html-online.com/editor

 

Step 9:  Once you’re finished modifying the invoice, save the file. Use the same name as the file you originally downloaded (e.g. “PrintableInvoice.html”).  If you’re using an online tool (such as the one listed above), copy the code into a .txt file (use “Notepad” on Windows; “TextEdit” on Mac).

 

In Notepad/TextEdit, when you’re ready to save click “Save As” and save as “PrintableInvoice.html”.

Step 10:  Go back to Cyberduck and upload the file. If you’ve closed Cyberduck, you may need to repeat steps 4-6 to get back to the appropriate directory.  To upload the file, navigate to the appropriate directory (in this case, the “template” directory) and drag your new file into the directory.

Now, you’ll want to make sure that changes you made look and perform well.  Go back to your BigCommerce admin panel, click “Orders” and click on the three dots under “Action” and select “Print Invoice”.  If changes need to be made, repeat steps 8-10.

We certainly understand that this isn’t the easiest or most straightforward process.  It’ll require some patience and a little time – and if you get stuck, give us a call (or leave a comment below).

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *