How can we add our Logo to our Packing Slip?

Highlighted
New Member
1 0 0

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!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
195 21 48

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!

Miles | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

3 Likes
Highlighted
New Member
2 0 1

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.

1 Like
Highlighted
New Member
1 0 0

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. 

0 Likes
Highlighted
New Member
1 0 1

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

1 Like
Highlighted
Shopify Staff
Shopify Staff
195 21 48

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.

Miles | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
1 0 1

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>

1 Like
Highlighted
New Member
1 0 0

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

0 Likes