Adding barcodes to the native Packing Slip

Store Design
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! :grinning_face_with_smiling_eyes:

btw sorry for my bad english

2 Likes
2

Hi,

Have you found any solution to this yet?

Cheers!

3

Not yet, i’ve lost hope :disappointed_face:

4

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:

Add where you want the barcode to be:


{{ order.order_number }}
3 Likes
5

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

6

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!

7

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.

8

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.


*{{ order.order_number }}*
2 Likes
9

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.

10

I follow the instruction to modify the Shopify packing slip template, it works… for only few days, don’t know why it not working now by just displaying the order.name

Did anyone have the same situation here ?

11

currently doesn’t work, show order.number on plain text. The font file is on the shopify cdn but it still doesn’t work

1 Like
12

It works nicely in a demo HTML page using the CDN. However, the generated PDF just displays text without applying the font.

13

It suddenly broke in our store a few weeks ago. To fix, I’ve uploaded a CSS file to Settings → Files with the desired font inlined via data URL. You can copy our if you want: https://cdn.shopify.com/s/files/1/0513/0875/7154/files/libre-barcode-39-inline.css?v=1631308026 . But please upload that to your own store since we may delete that file at any time.

Then, in the packing slip HTML, replace the previous element with:
2 Likes
14

Thanks! That worked a treat.

I tried the base64 encode solution by embedding it directly in the template. Worked fine in my demo HTML, but not with the generated PDF.

That being said: I used a TTF version, and I see you’re using WOFF.

15

this just puts in the order number not the barcode

16

Hi,

Please let me know how I can use this.

I clicked the link to check the CSS. But it looks nothing like a CSS.

Sorry I am a noob here.

And by previous element, do you mean the in the paragraph or the at the bottom of the packing slip template?

17

Hi there,

At first the code did not scan but I had to a * before and after the order number and this worked.

Now it scans perfectly, but unfortunately the libre 39 does not send of #'s. And I do need to send the # over unfortunately.

How did you generate this inline.css? I need exactly that but then for the libre 128 if possible.

Hope you could help me out :slightly_smiling_face:

Kind regards,

Kai

18

I am really struggling with this, can someone post their whole template so I can see what I am doing wrong?

19

Would you be willing to share your whole code so I can see where I went wrong?

20

As Pedro_vendah said, you must add a CSS file with the desired font to your Shopify files.

Mine is https://cdn.shopify.com/s/files/1/1629/6545/files/libre-barcode-39-inline.css?v=1636044133, you can copy it if you want, but you should upload it to your own store because we may delete this in any moment

Then, in your Packing Slip you must paste this at top of the file:

(if you upload the file to your own store, you must replace my link with yours)

and finally, where you want the barcode to be displayed, you can do it this way:

*{{ order.order_number }}*

You can change size or whatever you want but don’t delete the asteriks or the barcode won’t be readable

Hope you can solve it!

1 Like