{"_id":"5b8415c7811be000032a3b3d","project":"55a6e72e8cc73e0d00096635","version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":30,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750","5b195f920059c20003083ad6"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"560b5cbec341310d00de2a01","pages":["560b5d0b3616ac17004f1c99","560b5d405148ba0d009bd0c9","560b5d62af40a70d003df332","560b5d953bcbd80d0077d0fd","560b5fa83616ac17004f1c9d","569c8c15d326c80d0068f7b7","56d37d35d3f4650b007495ea","56d4ed5f8001e30b0089700c"],"__v":8,"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-30T03:53:34.449Z","from_sync":false,"order":14,"slug":"templates-required-directory","title":"Templates Reference"},"user":"5ab9ae5220abcc00499b2be4","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-08-27T15:16:23.022Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":24,"body":"[block:html]\n{\n  \"html\": \"BigCommerce provides a few instances of invoices. This article will cover each invoice and how you as a developer can customize each invoice:\\n\\n<ul>\\n <li><a href=\\\"#email\\\">Customizing the Email Invoice Template</a></li>\\n <li><a href=\\\"#merchant\\\">Customizing the Merchant Printable Invoice</a></li>\\n <li><a href=\\\"#customer\\\">Customizing the Customer Printable Invoice</a></li>\\n</ul>\\n\\n<style></style>\"\n}\n[/block]\n<h2><span id=\"email\">Customizing the Invoice Email Template</span></h2>\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Email Invoice as apart of Email Templates\",\n  \"body\": \"The email invoice (invoice_email.html) is part of `Email Templates` in the Control Panel. Editing email templates is covered in the BigCommerce Knowledge Base [here](https://support.bigcommerce.com/articles/Public/Customizing-Emails#editing-email-templates).\\n\\nTypically, edits made through the Control Panel will be explicitly covered in the BigCommerce Knowledge Base. However, since the particular email template we are looking at is the _invoice_ template and this article covers customization of all invoices, it is also covered in this article.\"\n}\n[/block]\nThe email invoice template is the contents of the email that 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`\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/100687b-Screen_Shot_2018-08-23_at_3.36.21_PM.png\",\n        \"Screen Shot 2018-08-23 at 3.36.21 PM.png\",\n        1850,\n        120,\n        \"#46558f\"\n      ],\n      \"sizing\": \"80\"\n    }\n  ]\n}\n[/block]\nAfter clicking the `edit` button on the right, the WYSIWYG Editor will appear. Follow the BigCommerce Knowledge Base Article to complete customization of the [Invoice Email](https://support.bigcommerce.com/articles/Public/Invoices?_ga=2.175713186.1629159268.1535382780-967431010.1523308107#custom) template. \n\n<h2><span id=\"merchant\">Customizing the Merchant Printable Invoice</span></h2>\n\nThe 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`.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/a441f8b-Screen_Shot_2018-08-23_at_12.31.30_PM.png\",\n        \"Screen Shot 2018-08-23 at 12.31.30 PM.png\",\n        180,\n        351,\n        \"#eeeef5\"\n      ]\n    }\n  ]\n}\n[/block]\nThe invoice that is generated by clicking `Print Invoice` here relies on a template and variables from BigCommerce's legacy [Blueprint](https://developer.bigcommerce.com/themes/blueprint/) themes framework. This invoice can be customized by performing the following steps:\n\n1. Download the [invoice_printable.zip](https://developer.bigcommerce.com/assets/invoice_printable.zip) file, which contains the skeleton of a printable invoice.\n\n2. Open the file in the text editor of your choice and edit the HTML file to match your desired customization. \n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"To navigate through the Blueprint variables contained in the HTML skeleton, please see this [reference material](https://developer.bigcommerce.com/themes/blueprint/#store-wide-global-variables).\",\n  \"title\": \"Blueprint Variables and Customization\"\n}\n[/block]\n3. In the control panel, set your theme's checkout type to `Custom one-page checkout (for developers)`. \n\n    (Use the steps in <a href=\"https://support.bigcommerce.com/articles/Public/Checkout-Settings\" target=\"_blank\">this support article</a>.)\n\n4. [Use WebDAV](https://support.bigcommerce.com/articles/Public/How-do-I-add-and-link-to-a-file-in-my-store#upload-a-file) to upload your customized HTML file to WebDAV's `/template/Snippets/` folder.\n\n    * This folder becomes available once you enable `Custom one-page checkout (for developers)`. \n    * For specific steps, please see <a href=\"https://support.bigcommerce.com/articles/Public/File-Access-WebDAV/?q=webdav&l=en_US&fs=Search&pn=1\">this support article</a>. \n    * Also see <a href=\"/docs/webdav-static-assets\" target=\"_blank\">this page</a> about using WebDAV with Stencil themes.\n    * We recommend the freeware WebDAV client <a href=\"https://cyberduck.io/\" target=\"_blank\">CyberDuck</a> (Windows and Mac OS), for which your store's control panel offers a downloadable <a href=\"https://support.bigcommerce.com/articles/Public/How-do-I-connect-to-my-store-via-WebDAV-using-CyberDuck\" target=\"_blank\">connection file</a> prefilled with most store credentials.\n\n5. Once you have completed the above steps, you are free to switch your theme's checkout type to \n`One-page checkout` or `Optimized one-page checkout`.\n\n<h2><span id=\"customer\">Customizing the Customer Printable Invoice</span></h2>\n\nThe 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.**\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/d0c5a7d-Screen_Shot_2018-08-23_at_12.30.34_PM.png\",\n        \"Screen Shot 2018-08-23 at 12.30.34 PM.png\",\n        1403,\n        562,\n        \"#d6d6d6\"\n      ]\n    }\n  ]\n}\n[/block]\nThis 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.\n\nAs a developer, you can customize this invoice by editing your theme’s [invoice.html](https://github.com/bigcommerce/cornerstone/blob/master/templates/pages/account/orders/invoice.html) file that is present in your theme's files. In [Cornerstone](https://github.com/bigcommerce/cornerstone), this file is in `Cornerstone > templates > pages > account > orders > invoice.html`.","excerpt":"","slug":"customizing-invoices","type":"basic","title":"Customizing Invoices"}

Customizing Invoices


[block:html] { "html": "BigCommerce provides a few instances of invoices. This article will cover each invoice and how you as a developer can customize each invoice:\n\n<ul>\n <li><a href=\"#email\">Customizing the Email Invoice Template</a></li>\n <li><a href=\"#merchant\">Customizing the Merchant Printable Invoice</a></li>\n <li><a href=\"#customer\">Customizing the Customer Printable Invoice</a></li>\n</ul>\n\n<style></style>" } [/block] <h2><span id="email">Customizing the Invoice Email Template</span></h2> [block:callout] { "type": "warning", "title": "Email Invoice as apart of Email Templates", "body": "The email invoice (invoice_email.html) is part of `Email Templates` in the Control Panel. Editing email templates is covered in the BigCommerce Knowledge Base [here](https://support.bigcommerce.com/articles/Public/Customizing-Emails#editing-email-templates).\n\nTypically, edits made through the Control Panel will be explicitly covered in the BigCommerce Knowledge Base. However, since the particular email template we are looking at is the _invoice_ template and this article covers customization of all invoices, it is also covered in this article." } [/block] The email invoice template is the contents of the email that 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` [block:image] { "images": [ { "image": [ "https://files.readme.io/100687b-Screen_Shot_2018-08-23_at_3.36.21_PM.png", "Screen Shot 2018-08-23 at 3.36.21 PM.png", 1850, 120, "#46558f" ], "sizing": "80" } ] } [/block] After clicking the `edit` button on the right, the WYSIWYG Editor will appear. Follow the BigCommerce Knowledge Base Article to complete customization of the [Invoice Email](https://support.bigcommerce.com/articles/Public/Invoices?_ga=2.175713186.1629159268.1535382780-967431010.1523308107#custom) template. <h2><span id="merchant">Customizing the Merchant Printable Invoice</span></h2> 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`. [block:image] { "images": [ { "image": [ "https://files.readme.io/a441f8b-Screen_Shot_2018-08-23_at_12.31.30_PM.png", "Screen Shot 2018-08-23 at 12.31.30 PM.png", 180, 351, "#eeeef5" ] } ] } [/block] The invoice that is generated by clicking `Print Invoice` here relies on a template and variables from BigCommerce's legacy [Blueprint](https://developer.bigcommerce.com/themes/blueprint/) themes framework. This invoice can be customized by performing the following steps: 1. Download the [invoice_printable.zip](https://developer.bigcommerce.com/assets/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. [block:callout] { "type": "info", "body": "To navigate through the Blueprint variables contained in the HTML skeleton, please see this [reference material](https://developer.bigcommerce.com/themes/blueprint/#store-wide-global-variables).", "title": "Blueprint Variables and Customization" } [/block] 3. In the control panel, set your theme's checkout type to `Custom one-page checkout (for developers)`. (Use the steps in <a href="https://support.bigcommerce.com/articles/Public/Checkout-Settings" target="_blank">this support article</a>.) 4. [Use WebDAV](https://support.bigcommerce.com/articles/Public/How-do-I-add-and-link-to-a-file-in-my-store#upload-a-file) to upload your customized HTML file to WebDAV's `/template/Snippets/` folder. * This folder becomes available once you enable `Custom one-page checkout (for developers)`. * For specific steps, please see <a href="https://support.bigcommerce.com/articles/Public/File-Access-WebDAV/?q=webdav&l=en_US&fs=Search&pn=1">this support article</a>. * Also see <a href="/docs/webdav-static-assets" target="_blank">this page</a> about using WebDAV with Stencil themes. * We recommend the freeware WebDAV client <a href="https://cyberduck.io/" target="_blank">CyberDuck</a> (Windows and Mac OS), for which your store's control panel offers a downloadable <a href="https://support.bigcommerce.com/articles/Public/How-do-I-connect-to-my-store-via-WebDAV-using-CyberDuck" target="_blank">connection file</a> prefilled with most store credentials. 5. Once you have completed the above steps, you are free to switch your theme's checkout type to `One-page checkout` or `Optimized one-page checkout`. <h2><span id="customer">Customizing the Customer Printable Invoice</span></h2> 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.** [block:image] { "images": [ { "image": [ "https://files.readme.io/d0c5a7d-Screen_Shot_2018-08-23_at_12.30.34_PM.png", "Screen Shot 2018-08-23 at 12.30.34 PM.png", 1403, 562, "#d6d6d6" ] } ] } [/block] 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](https://github.com/bigcommerce/cornerstone/blob/master/templates/pages/account/orders/invoice.html) file that is present in your theme's files. In [Cornerstone](https://github.com/bigcommerce/cornerstone), this file is in `Cornerstone > templates > pages > account > orders > invoice.html`.