Adding barcodes to the native Packing Slip

[franzzeq]

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

[pedro_vendah · Accepted solution]

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>

[pedro_vendah · Accepted solution]

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>

[danozzymanshop]

Hi,

Have you found any solution to this yet?

Cheers!

[franzzeq]

Not yet, i've lost hope 😞

[pedro_vendah · Accepted solution]

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>

[danozzymanshop]

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

[pedro_vendah]

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!

[danozzymanshop]

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.

[pedro_vendah · Accepted solution]

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>

[danozzymanshop]

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.

[WilsonPoon]

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 ?

[niketedm]

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

[renedekat]

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

[pedro_vendah · Accepted solution]

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 <style> element with:

<link rel="stylesheet" href="<your own CDN URL of the CSS file>" type="text/css" media="all">

[renedekat]

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.

[Anonymous]

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 <style> element, do you mean the <style> in the paragraph or the <style> at the bottom of the packing slip template?

[NineTwoFive]

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 🙂

Kind regards,

Kai

[mollies]

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

[franzzeq]

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:

<link rel="stylesheet" href="https://cdn.shopify.com/s/files/1/1629/6545/files/libre-barcode-39-inline.css?v=1636044133" type="text/css" media="all">

(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:

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

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!

[Anonymous]

Friend, How do you get "libre-barcode-39-inline.css" ? 

Did you change the .ttf to .css directly?

[Anonymous]

Alright I found another post that explains how to convert the font file to css. 

Here is the post: https://community.shopify.com/c/shopify-design/google-fonts-suddenly-not-working-on-packing-slips/td....

But things did not work. ><

Update: It worked! Thank you all! 

[mollies]

I've got it! Thank you 😄 😄 😄

[Simba98]

Hi Kai,

I'm facing a similar issue with getting the '#' character to scan correctly using the Libre Barcode 128 font in Shopify's Order Printer. You mentioned that adding a '*' before and after the order number made it scan correctly, but I'm still having trouble with the '#' character.

Did you manage to get it working? If so, could you please share how you generated the inline CSS for the Libre Barcode 128 font or any other solution you found?

Thanks in advance for your help!

Kind regards, Simba

[dbsp]

this just puts in the order number not the barcode

[nsmdigital]

Ah - This thread is great...  Just what we are trying to do and I feel we are so close...

I have the css file uploaded and can view it in my browser...

https://worthingwatersports.com/cdn/shop/t/3/assets/libre-barcode-39-inline.css

I am linking to it in the packing slip HTML

<link rel="stylesheet" id="fonts" href="https://worthingwatersports.com/cdn/shop/t/3/assets/libre-barcode-39-inline.css" type="text/css" media="all">

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

And it just prints the order number when I preview the packing slip....  

This works as a test in an seperate HTML file.  Does the packslip need to be saved, or can you see this working in preview mode?

Anyone any ideas what is going wrong...  Feels so close...

KR Nick

[mollies]

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

[KevinBrabants]

Hello everyone, I figured out the solution.

If you paste this code where your current SKU code is, you will have the barcode pop up instead

{% if line_item.sku != blank %}
<span class="line-item-description-line">
{% assign barcode = empty %}
{% for item in order.line_items %}
{% if item.sku == line_item.sku %}
{% assign barcode = item.variant.barcode %}
{% endif %}
{% endfor %}
{% if barcode %}
{{ barcode}}
{% endif %}

</span>
{% endif %}