How to add QR codes on the bottom of packing slips and invoices

[blingzbyadi]

I want to add QR codes of my social media handles to my packing list and invoices, how can I do this? I use the DEBUT theme.

[vritzka]

First you would create the QR code image files. For example with QRStuff or QR Code Generator.

 

Next, you need to upload these QR code images to Shopify so that you can use them in your packing slips and invoices.

1. Go to your Shopify Admin.
2. Navigate to Content > Files.
3. Upload the QR code images that you generated. Once uploaded, each image will have its own URL, which you will use in your template.

For example, you'll get an URL like https://cdn.shopify.com/s/files/1/XXXX/XXXX/t/XX/assets/instagram-qr.png

To add the QR codes to your packing list, you’ll need to customize the template that Shopify uses for these documents.

1. Find the template:

   • From your Shopify Admin, go to Settings > Shipping & Delivery.
   • Scroll all the way down to Packing Slips -> Packing Slip template
   • This will open the Liquid template editor for the packing slip. You can now add the QR code images to the packing slip template.

Add this code where you want the handles to appear, maybe in the footer

<div class="social-qr-codes">
  <p>Follow us on:</p>
  <p>
    <img src="https://cdn.shopify.com/s/files/1/XXXX/XXXX/t/XX/assets/facebook-qr.png" alt="Facebook QR" style="width: 50px; height: 50px;">
    <img src="https://cdn.shopify.com/s/files/1/XXXX/XXXX/t/XX/assets/instagram-qr.png" alt="Instagram QR" style="width: 50px; height: 50px;">
    <img src="https://cdn.shopify.com/s/files/1/XXXX/XXXX/t/XX/assets/twitter-qr.png" alt="Twitter QR" style="width: 50px; height: 50px;">
  </p>
</div>

For Invoices its a bit different, depending on the app you're using. They would likely also have a template section