If you want some of the text on your Packing Slips to stand out more a bit more, whether it's for your customer or your warehouse team, our HTML packing slip editor makes that possible!
*Please note that you must be on a Silver or above plan to customize packing slip templates and basic familiarity with (or willingness to learn) HTML & CSS coding is recommended.
Head to your Account Settings (the wrench icon in the upper right).
Next, select Templates and then Packing Slips from the sidebar on the left.
This will list all of your available packing slips. Find the packing slip you would like to change and click Edit. If you haven't created any yet, it'll be best to copy the default template. An HTML editor will display, allowing you to customize your packing slip.
Now, find the text that needs to stand out more. It'll be in one of four sections:
- If it's text above the order items table, then click on the Order Header section.
- If it's text in the header row of the order items table, then click on the Order Items Header section
- If it's text for your order items, the click on the Order Items section.
- If it's text underneath the order items table, then click on the Order Footer section.
When you've found it, you'll add some "markup" to alter the way text is displayed. However, the markup you need to add depends on what you want to do and what markup is already there.
For example, near the bottom of the Order Footer there's markup that controls the way the Packing Slip Message displays. Here's what the code looks like in our default 8.5"x11" packing slip:
<p align="center" style="font-size:11px">[Packing Slip Message]</p>
Here's what that code means in plain English:
- [Packing Slip Message] will display whatever text you typed in here.
- Any text surrounded by <p></p> displays as a paragraph.
- align="center" modifies the paragraph to be center aligned
- style="font-size:11px" styles the paragraph with a font size of 11px.
Many of our sellers put their Return Policy in the packing slip message, so they want the entire thing in bold. To do this, take the code above and make the addition that I've highlighted below:
<p align="center" style="font-weight:bold;font-size:11px">[Packing Slip Message]</p>
As you can guess, adding the font-weight:bold; to the style attribute makes the entire paragraph bold. Note that every addition to a style attribute needs to be separated by a semi-colon (;).
It's easy to add to any existing style attribute to get different combinations of results. Here are the most popular additions to a style attribute:
- Bold with font-weight:bold;
- Italicize with font-style:italic;
- Underline with text-decoration:underline;
- Highlight with background-color:yellow;
- Change text color to red with color:red;
- Change font size to 18 point with font-size:18pt;
However, not all text has a <p> tag with a style attribute available for your additions. This is especially true if you want to style part of a paragraph or table, rather than the entire thing.
In those cases, surround the appropriate text with <span style=""></span>, which gives you a style attribute for any desired additions to 'hook' on to. Here's example code for a bold paragraph with a styled <span> tag in the middle:
<p align="center" style="font-weight:bold;font-size:11px">Return items within <span style="font-style:italic;text-decoration:underline;background-color:yellow;color:red;">30 days</span> for a full refund.</p>
...and this is how it would display in a packing slip:
The best part is that you're not limited to the six text changes described earlier. Since you've taught yourself some HTML and CSS, feel free to experiment with sample code from free resources like W3Schools, the Mozilla Developer Network, and more!
Keep making changes and downloading samples until they look the way you want, but don't forget to Save!