New Shopify Certification now available: Liquid Storefronts for Theme Developers

Add an image of a QR code to packing slip

Solved
SeanMcEl
Shopify Partner
13 0 10

Hi guys - I'm sure this is a pretty simple piece of coding but how can I add an image to our packing slip template please? I am not really familiar with liquid variables.

 

The image is here: https://cdn.shopify.com/s/files/1/0414/0135/2356/files/QR_code_getting_started.png?v=1638787767

Accepted Solution (1)
ski_power
Shopify Partner
7 1 1

This is an accepted solution.

Which app are you using?

 

Since you have the file, you could use a direct <img> tag and position and size it where ever you want it to be.

 

The code would look something like <img src="https://cdn.shopify.com/s/files/1/0414/0135/2356/files/QR_code_getting_started.png?v=1638787767" > and style it with the css of your choosing.

View solution in original post

Replies 4 (4)
ski_power
Shopify Partner
7 1 1

This is an accepted solution.

Which app are you using?

 

Since you have the file, you could use a direct <img> tag and position and size it where ever you want it to be.

 

The code would look something like <img src="https://cdn.shopify.com/s/files/1/0414/0135/2356/files/QR_code_getting_started.png?v=1638787767" > and style it with the css of your choosing.

SeanMcEl
Shopify Partner
13 0 10

That worked perfectly thank you! I added a little bit of styling to resize the image and it is spot on. Really appreciate your help @ski_power  😊👏

Jassims
Visitor
1 0 0

how can I add the size and position in the code ?

 and where exactly I can add the code? in which line I mean 

 

 

<div class="wrapper">
<div class="header">
<div class="shop-title">
<p class="to-uppercase">
{{ shop.name }}
<img src="https://cdn.shopify.com/s/files/1/0604/2563/3955/files/Copy_of_Dawerlee.png?v=1659364266" >

</p>
</div>
<div class="order-title">
<p class="text-align-right">
Order {{ order.name }}
</p>

 

 

 

 

MarcoReleasitQr
Shopify Partner
41 2 5

Hello @SeanMcEl 

 

If you'd like to add QR Codes to your packing slip you can try our app Releasit QR Code Generator which allows you to generate fully customizable QR Codes that you can manually download for your printed marketing or you can automatically print on your existing order packing slips or invoices (with zero impact on your current operations).

 

Some of the most popular use cases for QR Codes on the packing slip are:

  • Let customers contact you after their purchase with just a scan
  • Let customers repurchase their order with just a scan
  • Let customers submit a review after their purchase
  • Prompt customers to follow your social media profiles after their purchase with just a scan
  • Let customers automatically subscribe to your newsletter after their purchase with just a scan

You can do all this and a lot more with our app! You can install the app for free from the Shopify App Store here: https://apps.shopify.com/releasit-qr-codes-generator

 

If you need help we offer 24/7 support via email, WhatsApp or Telegram!

 

Hope this helps!

 

Marco from Releasit