How to add a QR Code to Shopify Packing Slip

Complication of the week: How do I add a QR code to a Shopify packing slip? When we tried to simplify the shipping logistics for our sticker shop LOET.BAR, that was our big problem.

The idea was quite a simple: a QR code will be placed on the delivery paper so we can mark the order as "done" in Shopify - just before it goes to the post office. So far so good. But now the big thing: According to Shopify's documentation, only images from the Shopify CDN can be used. We tried different things and found out that Shopify's Order Printer App allows you to load external images as well.

Once we were able to adapt the template, we were also able to generate a QR code based on the order ID via Google's API on the fly. In this case, this is the URL for it:

https://chart.googleapis.com/chart?chl=order:{{ order_number }}&chs=100x100&cht=qr&chld=H%7C0

The QR code can simply be integrated into the template via img html tag.
Got everything? Does it work for you? Excellent! If you are screaming right now and need professional help, get in touch with us.