To force content to always print on the bottom of your packing slip, you first have to define where the "bottom" is, and then encase that content in a <div> tag with special position attributes.
Important
Content you affix to the bottom of your packing slip will not move under any circumstances!
This can sometimes cause overlap with other content on orders that have too many line items or a lengthy footer note. You may want to have a substitute template available that excludes the following changes, just in case you experience this.
The code you need to add will differ depending on your packing slip layout. To add this code to your packing slip template, go to the Packing Slip Template in your template settings and do the following:
-
Add the following code at the beginning of the Order Header section (before the first <table> tag) to define where the bottom of the packing slip is:
-
8.5" x 11" full page:
<style> .customStyle { position: relative; height:11in; } </style> -
8.5" x 11" 2 per page / half sheet:
<style> .customStyle { position: relative; height:5.5in; } </style> -
4" x 6" thermal paper:
<style> .customStyle { position: relative; height:6in; } </style>You may need to adjust the height value in the above CSS snippets, depending on your content.
Here is what the code for the 8.5" x 11" full page should look like:
-
-
Locate the element that contains the content you want to stick to the bottom of your packing slip.
-
Add the following code before the desired element:
<div style="bottom:0; position:absolute;width:100%;">
-
Then add the following code after the desired element:
</div>
-
Save your changes.
Here is an example of what this should look like (this sample pushes the <p> element containing the packing slip footer message to the bottom of the packing slip):
Here is an image of the resulting packing slip, with the footer message stuck to the bottom:
