Add Barcodes to Shopify Packing slips

Within EasyScan we have the option to generate and print packing slips for each of your orders, these include a barcode of the order number without any coding. Plus you can even add a barcode for each of your products if you would like!

We also recommend using the Order Printer app for your packing slips and invoices. It is a free app made by Shopify and has some good features including:

• Previewing and printing all the documents you need for your orders
• Including: invoices, packing slips, address labels, return slips, receipts, and more!
• Fully showcase your brand by making customizations in HTML and Liquid
• You can purchase templates to make your brand stand out even further, see our friends at FORSBERG+two

If you would still like to add a barcode to your Shopify native packing slip please follow these steps.

Adding an Order Number Barcode to your native Shopify Packing slips

Adding a barcode to your Shopify Packing slips will make it much faster to search for an order within EasyScan.

First you need to upload the Barcode CSS file to your Shop, then edit the packing slip template, test it and you are ready to go!

Upload the Barcode font

1. Please download the file below, this is a CSS file that has the barcode font embedded. The embedded barcode font is represented as an SVG within the CSS file.

Libre Barcode 39 Text.css

2. Next upload the CSS file to your Shopify store “Content” area.

3. Once it has been uploaded click 🔗 (Copy link) to copy the URL of the CSS file.

Adjust the packing slip code

1. Go to your Shopify settings

2. Select “Shipping and delivery”

3. Scroll down to “Packing slip template”

4. Click “Edit”, this is where you can edit the code used to generate your packing slips.

5. At the very top of the packing slip press enter (or return) to make a gap to add your own code.

6. Now paste your copied Font URL of the CSS to the top of the document.

7. Add the code below as well.

<link rel="stylesheet" href="{Replace with your Font URL}" type="text/css">

‍

Make sure to replace the section `{Replace with your Font URL}` with the Font URL you pasted already and then remove the URL from the top of the document.

8. Move down the document and add the code below just after `<div class="order-title">` .

<p class="text-align-right" style="font-family: 'Libre Barcode 39 Text'; font-size: 75px">
    *{{ order.order_number }}*
</p>

Please note the the asterisks (*) are important to make sure that the barcode can be scanned.

Check the packing slip

Now you can click the “Preview template” button to check that the barcode has generated correctly.

We advise using your barcode scanner to check that the barcode scans and returns the expected order number.

If you have any issues please re-check the steps above, making sure the code is correct.

Once you have confirmed that the barcode is working well you are ready to save the template.

Now head back to your Shopify orders and you can print off your Packing slips, then scan the barcode within EasyScan to find the order quickly!

‍

If you have any questions or issues please reach out to our support team 😊

‍