8.5x11 / A4 Shopify Packing Slip Code Template Instructions - Design E

This guide will provide you with all the steps required to add your new Shopify Packing Slip template to your Shopify site. If you haven't purchased the template yet, you can find it by clicking here.

To complete this set up process you will need to have an image for your business logo and have downloaded the template code, which will have been emailed to you following your purchase (shopify_packing_slip_design_e.txt).

 

Step 1 - Log into Shopify

Ensure you are logged into the Shopify Admin area

 

Step 2 - Upload your business logo to Shopify

  1. Within the Shopify Admin area, click on Settings in the bottom left-hand corner of the screen.
  2. Select Files from the left-hand menu
  3. If you do not already have a logo image uploaded, click Upload Files and upload your business logo image (for best results, ensure the logo is cropped, so whitespace around the image is removed).
  4. Within the file table, click the link icon to the right of the logo and copy the image URL.
    File Upload Image for Shopify
  5. Paste the link copied in part 4 somewhere that can be easily accessed later on in the process

Examples of where you could paste the links are Notepad or Word applications. It does not matter which you choose, as the links only need to be held temporarily whilst you set up this template.

 

Step 3 - Add the new template code

  1. Select Settings (bottom-left menu within the Shopify admin area)
  2. Select Shipping and Delivery
  3. Scroll down the page and within Packing Slips click Edit
  4. If you have previously customised the packing slip template, you may wish to copy the code and save in a file for future use (the default Shopify packing slip does not need copying, as you can always revert back to the default if you wish)
  5. Highlight all of the code in the Packing Slip Template and press Delete
  6. Highlight and copy all of the code beneath the dashed line for your new packing slip in the downloaded file shopify_packing_slip_design_e.txt
  7. Paste the copied code into the Packing Slip Template in Shopify on line 1

 

Shopify Packing Slip code for A4 Design E template by Artisan IT

 

Step 4 - Add your business logo to the new template

  1. On line 3 {% assign shop-logo = "PASTE LOGO FILE URL HERE" %}, replace PASTE LOGO FILE URL HERE with the image URL that was copied in Step 2, Part 4 (do not delete the speech marks)
  2. Adjust the logo width and height values on lines 4 and 5

 

Step 5 - Adjust the base font size (if applicable)

The default font size used for the template is 16 pixels. If you wish to adjust this font size, on line 6 change the px value within the speech marks.

 

Step 6 - Set the message displayed in the header of the document

  1. If you wish to change the message displayed. On line 7 replace Thank you For Your Order with your required message (ensure the message is entered within the " " marks). If you do not want to display a message, make sure line 7 looks like this {% assign header-msg = "" %}
  2. To change the message font size, adjust the value between the speech marks on line 8 (the default value is 24px)
  3. To adjust the vertical alignment of the header message, adjust the value on line 9 (the default value is 60px). To move the header down the page increase the pixel value

 

Step 7 - Set the primary accent colour for text headers

On line 10 enter a hexadecimal value for your accent colour within the " " marks (the default value is #EC6D4F)

 

Step 8 - Set the accent colour used for horizontal lines

On line 11 enter a hexadecimal value for your accent colour within the " " marks (the default value is #8DACCC)

 

Step 9 - Set your business address width

To ensure the maximum space is made available for the customer billing and delivery address, it is important to minimise the space allocated to your business address.

On line 12 enter a percentage value (only a number is required - no speech marks or a % sign) to allocate that width to your business address.

To allocate 20% of the address section to your business address line 12 would look like this {% assign bus-addr-width = 20 %}

The template code has been written to divide the remaining area between the billing and shipping addresses equally.

Customised Shopify Packing Slip Header by Artisan IT

  

Step 10 - Enable/disable bold product titles

  • If you would like to make product titles bold, on line 13 set the following {% assign prod-title-bold = true %}
  • To disable bold product titles, on line 13 set the following {% assign prod-title-bold = false %}

 

Step 11 - Display/hide additional item properties

Additional item properties captured in a product page form can be displayed within the product listing.
  • To display additional item properties, on line 14 set the following {% assign prod-item-props = true %}
  • If you do not wish to display additional item properties, set the following on line 14 {% assign prod-item-props = false %}

If you are not capturing any additional item properties within your product listing and would like to add product page template features to do so, be sure to check out our Shopify product page features.

 

 Step 12 - Customise the text beneath the product table

  1. The font size of the first line of text beneath the product section can be adjusted independent from the standard page font size. On line 15 adjust the pixel value as required. For example, to make the font 20px, line 15 would look like this {% assign text-one-size = "20px" %}
  2. To adjust the first line of text, on line 16 replace Artisan IT with your chosen text (do not delete the enclosing " " marks)
  3. To adjust the second line of text, on line 17 replace gary@artisan-it.com with your chosen text (do not delete the enclosing " " marks)
  4. To adjust the third line of text, on line 18 replace artisan-it.com with your chosen text (do not delete the enclosing " " marks)
If you do not want text to be displayed on any one of the three lines, simply leave the value blank - for example {% assign text-one = "" %}

 

 Step 13 - Save and preview the template

  1. Click Save
  2. Click Preview Template

 

Printing the documents

  1. Click Orders within the left hand menu of Shopify Admin
  2. Select all of the orders that you would like to print packing slips for
  3. Click the ... ellipses button
  4. Click Print packing slips
  5. Click Print
  • To save the documents as a PDF, change the print destination to the relevant PDF setting
  • If the colours are not correct on the printout, on Google Chrome, click More Settings and within Options ensure Background graphics is checked
  • If you wish to remove the webpage header and footer generated by the browser, within Options uncheck Headers and footers