Solved

Adding barcodes to the native Packing Slip

franzzeq
Tourist
9 1 5

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

Accepted Solutions (3)
pedro_vendah
Shopify Partner
5 3 6

This is an 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>

 

View solution in original post

pedro_vendah
Shopify Partner
5 3 6

This is an 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>

 

View solution in original post

pedro_vendah
Shopify Partner
5 3 6

This is an 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">

 

View solution in original post

Replies 24 (24)

danozzymanshop
Tourist
5 0 0

Hi,

Have you found any solution to this yet?

Cheers!

franzzeq
Tourist
9 1 5

Not yet, i've lost hope 😞

pedro_vendah
Shopify Partner
5 3 6

This is an 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
Tourist
5 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

pedro_vendah
Shopify Partner
5 3 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!
danozzymanshop
Tourist
5 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.


pedro_vendah
Shopify Partner
5 3 6

This is an 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
Tourist
5 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.
WilsonPoon
Visitor
1 0 0

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
Shopify Partner
2 0 2

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

the silence is golden
renedekat
Shopify Partner
2 0 0

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

pedro_vendah
Shopify Partner
5 3 6

This is an 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
Shopify Partner
2 0 0

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.

Not applicable

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
Visitor
1 0 0

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
Tourist
8 0 0

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

franzzeq
Tourist
9 1 5

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!

Not applicable

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

Did you change the .ttf to .css directly?

Not applicable

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
Tourist
8 0 0

I've got it! Thank you 😄 😄 😄

dbsp
Visitor
1 0 0

this just puts in the order number not the barcode

 

nsmdigital
Visitor
3 0 0

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
Tourist
8 0 0

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

KevinBrabants
Visitor
1 0 0

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 %}