Since your logo can appear on ShipStation emails, shipping labels, and packing slips, and can affect your customers' perception of your brand, we want to help you exert control over your logo quality and size whenever possible.
The most important thing you can do is upload a high-quality version of your logo. We recommend:
- PNG or JPG file format
- 300 pixels wide
- White or solid-colored background (no transparency)
Logos in ShipStation Emails
By default, the store logo displays in an email exactly as it is uploaded - logo size and quality will be untouched.
If your store logo appears larger than it needs to be, you can upload a smaller image (between 75 and 175 pixels wide); however, this can negatively impact the quality of the image on labels and packing slips.
Instead, we recommend making a small edit to the HTML code of your email templates to resize the image so the logo won't be affected anywhere else.
To get started, open the HTML source code editor for your email template.
Next, locate the following code at the top of your editor...
... and add the highlighted code as shown below:
<img width="150" src="http://images.shipstation.com/logo/00000">
This new attribute (highlighted in yellow) defines how many pixels wide your store logo should be. This example uses width="150", but you may find another value between 75 and 175 to be better, depending on your logo's proportions.
Your editor should look something like this now:
Feel free to send yourself a test email, which should display a logo with a more reasonable size!
Don't forget to click Save within the email editor before closing.
Logos on Shipping Labels
While any ShipStation account can enable branded shipping labels for the carriers and services that allow it, it's not possible to configure the size, placement, or quality of the store logo on labels.
Logos on shipping labels are automatically sized to match the carrier's format requirements. Typically, logos on shipping labels have a max height of around one inch. Keep that in mind as you decide on the proportions of the logo you want to upload to ShipStation.
Logos on Packing Slips
The default packing slip templates resize your uploaded store logos by adding some extra code to the image source URL.
- 8.5" x 11" template resizes logo images to 300 x 80
- 4" x 6" template resizes logo images to 150x60
If your custom email and packing slip designs call for different sized logos, you can upload a larger file and control the image size by making some edits to your template HTML code.
If you have a Silver-level ShipStation subscription or higher, there are several ways to edit the packing slip HTML to address this resizing -- each with their own pros and cons.
Please review the options below and choose the option that will best suit your needs!
- Default Store Logo Implementation
<img src="http://src.shipstation.com/300/80/http://images.shipstation.com/[Store Logo]"/>
This code is part of the Default 8.5" x 11" packing slip, and it resizes the uploaded store logo to a max width of 300px and max height of 80px. The logo's original proportions are preserved. This default resizing works in almost every case to maintain a balance of image quality and packing slip processing time; however, you may need to try out one of the methods below if the default makes your logo fuzzy or pixellated.
- Store Logo Implementation without Resizing
HTML: <img src="http://images.shipstation.com/[Store Logo]"/>
This code displays the store logo as it was uploaded to ShipStation. There will be no change in quality, size, or image proportions. Logos with large file sizes can negatively impact packing slip processing speed.
- Store Logo Implementation with HTML Resizing (recommended for quality issues!!!)
HTML: <img width="150" src="http://images.shipstation.com/[Store Logo]"/>
This code displays the store logo at a width of 150 pixels and maintains the image proportions. This uses HTML resizing, which preserves more quality than our default resizing, but doesn't change the file size.
- Feel free to try values other than 150.
- Square logos tend to look better with a width of 100, and rectangular logos usually look better with a width between 175-200.
- Logos with large file sizes, however, can negatively impact packing slip processing speed.
- Remotely Hosted Image Implementation without Resizing
HTML: <img src="http://www.yourhost.com/yourcustomimage.png"/>
This code displays the custom image hosted on a server outside of ShipStation, with no change to its quality, size, or proportions.
- You can also use the width attribute to resize these images.
- Packing slip processing speed will be impacted by the file size of the hosted image and the speed of the server hosting the image. This implementation isn't recommended for everyday use but might be helpful if you need an additional or replacement image on your packing slip for special promotions.
Once you've settled on an implementation for your Store Logo image URL, copy the appropriate code, and paste it into your packing slip's HTML editor.
Here's an example of what a packing slip editor looks like after replacing the default store logo implementation with the code for Store Logo Implementation with HTML resizing:
Don't forget to Save your packing slip once you've replaced the unwanted image code with the code you want.
Keep in mind that any adjustments made to your store logo in the packing slip editor will not affect your store logo's appearance in your emails or on your shipping labels!