Customizing the Printable Order Invoice

Follow these steps to customize the printable invoice for your store’s orders.

1. Go to Storefront DesignThemes, then click Edit HTML/CSS.

Edit HTML/CSS button

 

Did you know? You can also access your theme's template files by going to Storefront Design › Design Option, clicking the More tab and selecting Template Files. This list gives you the ability to edit, compare against the template default, and revert files to their default.

2. In the list of Other Template Files on the left, select PrintableInvoice.html.

Use Ctrl F or Command F to quickly locate template files in the list.

The PrintableInvoice.html template file listing.

3. Use the references below to locate, then change or reorder the variable which controls the element you'd like to customize. For example, if you want to change “Order Items” to display “Items You Purchased”, you would locate and replace the %%LNG_OrderItems%% variable with the text “Items You Purchased”.

Invoice Header
%%GLOBAL_HeaderLogo%%Displays your store’s logo at the top of the invoice.
%%GLOBAL_StoreName%%Displays your store’s name in the “[Store Name] Invoice for Order ####” text.
%%GLOBAL_InvoiceTitle%%Displays “Invoice for Order ####” in the “[Store Name] Invoice for Order ####” text.
%%GLOBAL_StoreAddressFormatted%%Displays your store’s address as configured in the Store Profile area of your control panel.
Billing and Shipping Details
%%LNG_BillTo%%Displays the text “Billing Details”.
%%GLOBAL_BillingAddress%%Displays the billing address submitted by your customer.
%%LNG_Phone%%Displays the text “Phone”.
%%GLOBAL_BillingPhone%%Displays the billing phone number submitted by your customer.
%%LNG_Email%%Displays the text “Email”.
%%GLOBAL_BillingEmail%%Displays the billing email address submitted by your customer.
%%LNG_ShipTo%%Displays the text “Shipping Details”.
%%GLOBAL_ShippingAddress%%Displays the shipping address submitted by your customer.
%%GLOBAL_ShippingPhone%%Displays the shipping phone number submitted by your customer.
%%LNG_Email%%Displays the text “Email”.
%%GLOBAL_ShippingEmail%%Displays the shipping email address submitted by your customer.
Order Details
%%LNG_Order%%Displays the text “Order”.
%%GLOBAL_OrderId%%Displays the ID number assigned to your customer’s order.
%%LNG_PaymentMethod%%Displays the text “Payment Method”.
%%GLOBAL_PaymentMethod%%Displays the display name of the payment method used by the customer to pay for the order.
%%LNG_DateOfOrder%%Displays the text “Order Date”.
%%GLOBAL_OrderDate%%Displays the date the order was placed.
%%LNG_ShippingMethod%%Displays the text “Shipping Method”.
%%GLOBAL_ShippingMethod%%Displays the shipping method selected by your customer during checkout.
Order Items
%%LNG_OrderItems%%Displays the text “Order Items”.
%%LNG_ShippingAddress%%Displays the text “Shipping Address”. *Only displayed when a customer has shipped items to multiple locations.
%%LNG_Quantity%%Displays the text “Qty”.
%%LNG_Code%%Displays the text “Code/SKU”.
%%LNG_ProdName%%Displays the text “Product Name”.
%%LNG_Price%%Displays the text “Price”.
%%LNG_Total%%Displays the text “Total”.
%%GLOBAL_ProductsTable%%Displays the details of the products your customer ordered.
%%GLOBAL_totals%%Displays the total costs, e.g. subtotal and grand total, for the order.
%%LNG_Comments%%Displays the text “Comments”. *Only displayed when a customer has submitted instructions/comments when placing an order.
%%GLOBAL_Comments%%Displays any order instructions/comments submitted by the customer when ordering.

4. Save your changes.

Was this article helpful?