AdminStore ConfigurationShipping

Customizing Printable Packing Slips

Developers frequently modify the default content of packing slips to satisfy specific business requirements and industry demands. This article contains instructions on how to edit the HTML file of a printable packing slip.

Customizing printable packing slips

Customizing your Stencil theme’s printable packing slip relies on a template and variables from BigCommerce’s legacy Blueprint themes framework. To make changes to the packing slip file, follow these steps:

  1. Download printable packing slip .zip, which contains the HTML skeleton of a printable packing slip.

  2. Make your customizations to the HTML file.

  3. Upload your customized HTML file to the WebDAV’s /template/ folder using WebDAV. Ensure it is named packing_slip_print.html and replaces the default file, or WebDAV will not save your changes.

Variables

The following variables are available within the printable packing slip template:

  • Some variables might be an empty string.
  • LNG variables are fixed strings. If different text is desired, the LNG variables can be removed from the file and replaced with manually entered text. However, removing the LNG variables will impact translation functionality.
VariableDescription
%%GLOBAL_CustomerName%%Customer’s name
%%GLOBAL_CustomerEmail%%Customer’s email address
%%GLOBAL_CustomerId%%Customer’s ID
%%LNG_LabelPickupDetails%%Pickup details(if is pickup method)
%%LNG_LabelPickupMethod%%Pickup method(if is pickup method)
%%GLOBAL_LocationName%%Name of location(if is pickup method)
%%GLOBAL_PickupAddress%%Pickup address(if is pickup method)
%%GLOBAL_PickupPhone%%Pickup phone number(if is pickup method - pairs with HidePickupPhone)
%%GLOBAL_PickupEmail%%Pickup email address(if is pickup method - pairs with HidePickupEmail)
%%GLOBAL_StoreAddressFormatted%%Formatted store address
%%GLOBAL_StorePhoneNumber%%Store phone number
%%GLOBAL_StoreNameFormatted%%Formatted store name
%%LNG_Order%%Order
%%LNG_OrderDate%%Order date
%%LNG_ShippedItems%%Shipped items
%%LNG_ProdName%%Product name
%%LNG_ShippingMethod%%Shipping method
%%LNG_BinPackingInfo%%Bin packing info
%%GLOBAL_HeaderLogo%%Will output the logo set in store settings. It can be an image or a string.
%%GLOBAL_PackingSlipTitle%%Title of packing slip
%%GLOBAL_OrderId%%Order ID number
%%GLOBAL_OrderDate%%Order date
%%GLOBAL_TrackingNo%%Shipment tracking number(if available otherwise HideTrackingNo is set)
%%GLOBAL_Comments%%Your comments(pairs with HideComments)
%%GLOBAL_DateShipped%%Shipment date(pairs with HideShippingDate)
%%GLOBAL_BillingAddress%%Billing address
%%GLOBAL_BillingPhone%%Billing phone(pairs with HideBillingPhone)
%%GLOBAL_BillingEmail%%Billing email(pairs with HideBillingEmail)
%%GLOBAL_PickupMethod%%Pickup method(pairs with HidePickupMethod)
%%GLOBAL_ShippingAddress%%Shipping address
%%GLOBAL_ShippingPhone%%Shipping phone number(pairs with HideShippingPhone)
%%GLOBAL_ShippingEmail%%Shipping email address(pairs with HideShippingEmail)
%%GLOBAL_ShippingMethod%%Shipping method(pairs with HideShippingMethod)
%%GLOBAL_ProductsTable%%List of products

The following variables are available for HTML elements to alter CSS styling.

The “Hide” variables are all used to selectively hide HTML elements depending on whether the content they have under them is available. You will need to wrap the “Hide” variables around specific variables, for example: ShippingPhone (pairs with HideShippingPhone). If you were to use %%GLOBAL_ShippingPhone%% somewhere, then it should be enclosed in an element that will hide it when not set, i.e., <div style=%%GLOBAL_HideShippingPhone%%>Phone number: %%GLOBAL_ShippingPhone%%</div>.

VariableDescription
%%GLOBAL_HideCustomerDetails%%Hidden customer details(works with the CustomerX variables)
%%GLOBAL_HideTrackingNo%%Hidden shipment tracking number
%%GLOBAL_HideComments%%Hidden comments
%%GLOBAL_HideShippingDate%%Hidden shipment date
%%GLOBAL_HideBillingPhone%%Hidden billing phone
%%GLOBAL_HideBillingEmail%%Hidden billing email
%%GLOBAL_HidePickupMethod%%Hidden pickup method
%%GLOBAL_HideShippingMethod%%Hidden shipping method
%%GLOBAL_HideShipping%%Hidden shipping(set when it is a pickup method)
%%GLOBAL_HidePickup%%Hidden pickup method(set when it is not a pickup method)
%%GLOBAL_HidePickupPhone%%Hidden pickup phone number
%%GLOBAL_HidePickupEmail%%Hidden pickup email address
%%GLOBAL_HideShippingPhone%%Hidden shipping phone number

The packing_slip_print.html page contains three snippets in separate template files. The three files are as follows:

  • LogoImage.html/LogoText.html
  • PrintableInvoiceItemConfigurableField.html
  • PrintablePackingSlipItem.html

Stencil stores cannot modify these files without the assistance of Technical Support.

Resources