How can we add our Logo to our Packing Slip?

[GroveandBaker]

Hi, we are about to ship our first order but noticed the Packing Slip spells out our business name but we want our logo in that space consistently how it is throughout the rest of the shopping experience. How is this done? Thanks in advance!

[Miles]

Hi, @GroveandBaker!

I'm Miles from the Social Care team at Shopify. Congratulations on your first post!

Packing slips are created using Liquid, which is Shopify's coding language. You don't have to be a coding expert to be able to add a logo, but there is some coding required. I'll walk you through this now.

First, upload your logo in Settings > Files. Once the logo is uploaded, take note of the URL for the file and copy it.

Adding a Logo to Replace Your Store Name

1. Go to Settings > Shipping, and click "Edit" next to Packing Slips.
2. Find {{ shop.name }} in the code and delete it.
3. In the space you have created, write the following code, and paste the copied URL where indicated:
   <img src="PASTE FILE URL HERE" style="width: 60px; height: 60px;">
4. Select "Preview Template" and if you're happy with your changes, click "Save".

Adding a Logo Above Your Store Name

1. Go to Settings > Shipping, and click "Edit" next to Packing Slips.
2. Find the following code and add a line break (a space between the two lines):
   <div class="shop-title">
<p class="to-uppercase">
3. In the space you have created, write the following code, and paste the copied URL where indicated:
   <img src="PASTE FILE URL HERE" style="width: 60px; height: 60px;">
<br>
4. Select "Preview Template" and if you're happy with your changes, click "Save".

If you do get stuck, we also have a guide to help you edit your packing slips. This will take you through editing the address, product images and more. You'll also find further instructions for other placements of your logo, other than the 2 I've listed above.

Once you've made the changes, check out some of the other customizations you can do. You can customize your customer notifications, such as order confirmations, shipping updates and so much more. Check out our guide on editing Notifications here.

Thanks again for the question. Have a great day!

[Raeanne]

Hello! I tried this solution by following the help article, and my logo is smushed when I add it to the code. I've tried all different sizing and nothing seems to change it.

[cloudyy]

I'm looking for this solution also! No matter how much I render the logo in photoshop it always ends up being squished in the left corner. 

[NatxCustomStyle]

oh my goodness, thank you! you do not know how long it took me to find this and it worked!

[Miles]

Hi, @Raeanne and @cloudyy!

Thanks for letting me know about the logo sizing issues you're having with your packing slips. Are you able to confirm if you're using the built-in packing slips similar to the post above? If so, aside from the basic coding we can provide, you may need some more expert coding help to add a line of coding in to adjust the sizing of your logos. You can do this in many ways. The safest way would be to check out our Shopify Experts who may be able to help out with the coding required. If this is not in your budget, there are other potential solutions you could try.

Apps
Apps like Order Printer are available for download in the Shopify App Store for your packing slip and invoice needs. I've recommended a couple below that may be able to help and have a focus on easy personalisation.

• Order Printer by Shopify

  • Free to download and use.
  • Showcase your brand by making customizations in HTML and Liquid.
  • Print packing slips and shipping labels for all your orders.

• PDF Invoice: Order Printer+

  • Free to download and use.
  • The admin can edit existing PDF templates easily by the smart editor tool. This eliminates mistakes when a template goes live.
  • Admins can change every element in Liquid, Style, and Variables.

Third-Party Articles
I've found a couple of great articles for you which go into detail around coding for logo size. I share this with a warning that these are third-party solutions and are not supported by Shopify. We'll be unable to fix issues caused by coding from these articles. You can find the articles here and here.

If you need support beyond this, please feel free to contact Shopify Support, or reply to this thread and I'll be happy to help out.

[scocat]

Have you tried changing the number "60" in the code for width & height?  I did and just kept checking the size in preview until I saw the size I wanted.

<img src="PASTE FILE URL HERE" style="width: 60px; height: 60px;">
<br>

[PrettyThingsCo]

I just did this and it worked! Definitely need to change the width and height. Thank you.

[Dale_Horeczy]

Milses - excuse me for saying but this is ridiculous - we should not have to do this level of coding to add a logo to a packing slip - why doesn't it pick up the logo the same way it picks up the logo for emails?  

[Birgit1]

totally agree...seems odd for a company this advanced....

[krenabhails]

i followed the directions, but nothing happens once i preview or save. besides the name of my shop completely disappearing from the packing slip

[arlentan]

It should look something like this: 

    <img src="{{'logo.png' | asset_url }}" style="width: 60px; height: auto;">

worked perfect for me. Agree with those who don't know how to code, there should be an option to upload the shop logo where the shop name and details etc. are, so you can just output it with {{ shop.logo }}. Would be nice for those who don't code. 

[Dale_Horeczy]

Worked for us but it shouldn't need customization to have a logo automatically printed.  This should be a no brainer to have it done already, especially with all of this feedback.  

[BeckyASOM]

Thank you!!!! This worked!!!! Even Shopify support was unable to help me when I called with this "smushed logo" issue!

[christian1010]

Set either height or width to ''auto'' and keep the other value. Might fix it? 

[rmanke]

If you don't specify the width and the height parameters, it should display the image in its original size, so you can just upload the exact size you want without having to specify its dimensions in the HTML.

<img src="PASTE FILE URL HERE">

[HairPlus]

What if the logo is too big ? How can I make it smaller ?

[HairPlus]

Please not that I have tried all the steps above 

[rmanke]

You'll either have to resize the logo in Photoshop or your favorite photo editing software, or specify the size you want in the html example above.  If the file isn't square, it will look squished if you set the width and height to be square.  The width and height should be the same dimensions as the image.  I think that's the part that gets a few people.

[HairPlus]

Thank you for the reply on this. Do you know what world be the apropiate logo size for an standard packing slip? What size hace you use ? THANKS!