Adding barcodes to the native Packing Slip

franzzeq
New Member
3 0 1

Hi there!

I need to add a barcode of the order number in my packing slips. I found this post that offers a solution, but it only works with the Order Printer app. For several reasons, I need to use the native packing slip function, not the external app.

I found that the native packing slip only allow images that are hosted in the Shopify's server, so, is there a way to insert externals images from an url? Or maybe you know some app that allow to automaticly create barcodes and add it to the native packing slip or something like that?

Hope you can help me, thnx in advance!

-----

btw sorry for my bad english

danozzymanshop
New Member
4 0 0

Hi,

Have you found any solution to this yet?

Cheers!

0 Likes
franzzeq
New Member
3 0 1

Not yet, i've lost hope

0 Likes
pedro_vendah
Tourist
3 0 0

A working solution: use free barcode fonts like Libre Barcode 128.

Steps:

  1. Select and download font e.g. from https://fonts.google.com/specimen/Libre+Barcode+128
  2. Extract TTF file from ZIP and upload TTF it into Shopify Admin > Settings > Files > Upload; Copy the URL
  3. Edit your packing slip template accordingly:

Declare the font on the top of the file:

<style>
@font-face {
font-family: 'Libre Barcode 128';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://cdn.shopify.com/TODO/replace/this/url/with/the/one/from/step/2/above) format('truetype');
}
</style>

Add where you want the barcode to be:

<p style="font-family: 'Libre Barcode 128', cursive; font-size: 140px">{{ order.order_number }}</p>

 

0 Likes
danozzymanshop
New Member
4 0 0

Thanks for the reply Pedro.

 

Such a great solution! It is working fine.

One more thing is there a way to auto print these packing slips on new orders?

I managed to auto print the order notification via email in Outlook.

The problem is I can't have the barcode shown in the email.

I tried to add the barcode in the email notification of shopify, the preview shows the barcode but not in the actual email when it's sent.

I also added the font to my pc but still, get the number instead of a barcode.

 

Thanks again,

Dan

0 Likes
pedro_vendah
Tourist
3 0 0
Hi Dan. Sorry, I have no idea. It seems that most email clients just
don't render web fonts at all, possibly for security reasons. There are
some resources on the web about it. Good luck!
0 Likes
danozzymanshop
New Member
4 0 0
Thanks for your reply.

Do you think there is a way to include the packing slip as a pdf file
attachment in the Shopify email notification template?

I'm also an Automate io subscriber. But failed to find anything on that
platform.


0 Likes
pedro_vendah
Tourist
3 0 0

Update: the approach described in this thread did not generate a readable bar code because that encoding (Code 128) requires a special text encoding with verification digit etc. Simple fix: (1) use another encoding/font like Libre Barcode 39 Text and (2) just wrap your content within asterisks e.g. 

<p style="font-family: 'Libre Barcode 39 Text', cursive; font-size: 140px">*{{ order.order_number }}*</p>

 

0 Likes
danozzymanshop
New Member
4 0 0
Thanks, yes I did the same thing and it's working.
I also managed to auto print packing slips using Thunderbird and an auto
print plugin.
0 Likes