Summary: If you want text on your Packing Slips to stand out a bit more, whether it's for your customer or your warehouse team, our HTML packing slip editor makes that possible!
NOTE: You must be on a Silver-level plan or above to customize packing slip templates. We also recommend a basic familiarity with (or willingness to learn) HTML and CSS coding.
Steps to Edit Packing Slip HTML
1. Go to your Account Settings (the wrench icon in the upper right).
2. Select Templates and then Packing Slips from the left-hand sidebar. This will list all of your available packing slips.
3. Click Edit next to the packing slip you wish to 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.
4. Find the text you want to emphasize in one of the four sections:
- Order Header: Text above the order items table
- Order Items Header: Text in the header row of the order items table
- Order Items: Text for your order items
- Order Footer: Text underneath the order items table
When you've found it, you'll add some markup code (HTML or CSS) to alter the way text is displayed. However, the markup code you need to add depends on what you want to do and what markup is already there.
Modify the Packing Slip Message bold:
This markup is located in the Order Footer. 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 message in bold. To do this, take the code above and make the addition 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 (;).
Add to any existing style attribute to get different combinations of results. Here are the most popular additions to a style attribute:
- Bold: font-weight:bold;
- Italicize: font-style:italic;
- Underline: text-decoration:underline;
- Highlight: background-color:yellow;
- Change text color to red: color:red;
- Change font size to 18 point : font-size:18pt;
Modifying specific text within a tag
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 ...
... as that 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:
...and this is how it would display in a packing slip:
<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>
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, and don't forget to Save!