If you are using the native Shopify packing slip you can add a barcode to your existing template using this method instead.



This article explains how to add an order number barcode to your Shopify packing slip using Order Printer. There are a number of other apps that allow packing slip customization. Order printer is a free option and it gets the job done.

 

First, install Order Printer if you've not done so already.

 

Once Installed you should find it proudly listed in your Shopify App list. Click it's icon and you should see a Manage templates button near the top of the window that looks striking like the one shown here:

 


 

 


 

Give that button a click and find the default packing slip template or the one you're currently using. 

 


 

 


 

In this version the one that is currently in use has a checkbox. If you're making further changes to one you have customized that will be the one to start with. If you're new to Order Printer then any Packing Slip template will do. Click "Duplicate Template" to make a copy to work with. This leaves the original un-modified.

 


 

I would begin by giving this copy a name that makes it easy to distinguish from the rest, even after 22 months of not considering what you named it.

 


 

 


 


 


 

In the code section you can find a spot to add just the barcode code, if you're working with your previously customized template that is perfect in every way (save the lack of barcode).  Or if you're starting more from scratch you can select everything in the code section (ctrl-a) and delete it, to paste in the larger block of fresh code below. (you gotta love the smell of fresh code)

 


 

Here is the bit that you'll need to add to generate the barcode:

 



<img src="https://www.barcodesinc.com/generator/image.php?code={{ order_name }}&style=196&type=C128A&width=200%&height=65px&xres=1&font=2" alt="the barcode printer" border="0" width="200" height="75">

 


 

In the code above 'order_name' is used rather than 'order_number'. This will include the default hashtag or any prefix that you have added to the order number in the Shopify store general settings. Ultimately the goal here is to have the value of the barcode match the value that the app will search to find the order. If the order in shopify includes a prefix we want to be sure that the barcode value does as well. 


IMPORTANT: The # character that shopify adds by default will prevent the barcode from loading properly and you'll see a "broken image" icon.

You can remedy this by changing the order number prefix from a # to something that does not break the URL, Or you can not include any prefix.




To fix you can remove the # by going to Settings > General




 




If you're just getting started with Order Printer and you're looking for a good starting point, that contains a format that works as a standard packing slip, and includes a barcode, I would give the code below a try first. 

 


 



<center>
  <img src="https://www.barcodesinc.com/generator/image.php?code={{ order_name }}&style=196&type=C128A&width=200%&height=65px&xres=1&font=2" alt="the barcode printer" border="0" width="200" height="75">
 </center>
<!--
<div style="margin: 0 0 1.5em 0; padding: 1.5em; border: 1px solid black;">
  <h2 style="margin: 0 0 1em 0;">Sender</h2>
  <strong>{{ shop.name }}</strong><br/>
 {{ shop.owner }}<br/>
  {{ shop.address }}<br/>
  {{ shop.city }} {{ shop.province_code }} {{ shop.zip | upcase }}<br/>
  {{ shop.country }}
</div>
-->
{% if shipping_address %}
<div style="padding: 1.5em; border: 1px solid black;">
  <h2 style="margin: 0 0 1em 0;">Recipient</h2>
  <strong>{{ shipping_address.name }}</strong><br/>
  {% if shipping_address.company %}
    {{ shipping_address.company }}<br/>
  {% endif %}
  {{ shipping_address.street }}<br/>
  {{ shipping_address.city }} {{ shipping_address.province_code }} {{ shipping_address.zip | upcase }}<br/>
  {{ shipping_address.country }}
</div>
{% endif %}


<br>
<br>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Item</th>
      {% if show_line_item_taxes %}
      <th>Taxes</th>
      {% endif %}
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        <td>{{ line_item.quantity }} x</td>
        <td><b>{{ line_item.title }}</b></td>
        {% if line_item.tax_lines %}
          <td>
            {% for tax_line in line_item.tax_lines %}
              {{ tax_line.price | money }} {{ tax_line.title }}<br/>
            {% endfor %}
          </td>
        {% endif %}
        <td>{{ line_item.price | money }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

 


 



 

Once your code is in place just click the Save button in the top right. Before celebrating there is one more step!! You'll need to make the new packing slip template the default to be printed. Do this by checking the box beside it under the Print by Default column:

 


 

 


 

And that should do it! You can now commence celebration!