How can I keep content at the bottom of my packing slip?

If you're trying to keep a 'Thank You' message, some return information, or a barcode at the bottom of a packing slip, you may be able to implement that using ShipStation's packing slip editor. Since it works like a webpage, you can force content to stay at the bottom of the packing slip ... as long as you define where the bottom is! Once you do that, you can surround the desired content with a <div> tag to keep it in place.

 

It's important to consider that the content you stick to the bottom of your packing slip will not move, under any circumstance. This means if you have an order with several line items, or a lengthy Note to/from the Buyer, that content can overlap with the content you stuck at the bottom. The steps in this article are meant for businesses where customers don't usually order so many items or need too much communications. These businesses will only see content overlap rarely, if at all.

 

*Please note that you need to be on a Silver or higher plan to customize your packing slips. Moderate familiarity with HTML and CSS is recommended for this edit.
 

Head to your Account Settings (the gear icon in the upper right).

Next, select Templates and then Packing Slips from the sidebar on the left.

Either copy or edit an existing template, and the Order Header section should open up by default.


 

At the very top of this section, you'll need to add a style header that defines the bottom of your packing slip, so that your bottom-affixed content will have a point of reference.

Add this style header for the 8.5"x 11" full page packing slip format:

 

<style>
.customStyle
{
position: relative;
height:11in;
}
</style>
 

Add this style header for the 8.5"x 11" 2 per page / half-sheet packing slip format:

 

<style>
.customStyle
{
position: relative;
height:5.5in;
}
</style>
 

Add this style header for the 4"x 6" thermal paper packing slip format:

 

<style>
.customStyle
{
position: relative;
height:6in;
}
</style>
 

Here's what my Order Header section looks like, after adding the 8.5" x 11" full page style header:



Then, click on the Order Footer gray bar to expand that section, and locate the content that you want to move to the bottom of the packing slip. In this example, you'll be moving your Packing Slip Message (which can be configured in your Selling Channel settings). Once you've located your content ...


 

... precede it with this code: 

 

    <div style="bottom:0; position:absolute;width:100%;">
 

... and follow it with this code: 

 

    </div>
 

After you do that, the section should look like this:



Finally, click Save and your customized packing slip will be available to use. Here's what my packing slip looked like when I applied it to an order:



Keep in mind that if my example would have had two dozen line items rather than two, and a few paragraphs instead of a few lines ... the content would have likely overlapped. It's a good idea to keep a packing slip template available that doesn't have this 'keep content at the bottom' edit, so you can switch to it as needed.
 

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request