Customize Your Packing Slip Template To Use 4x6 Inch Format

[Trevor]

Note

The following post includes updated code to customize your packing slips. Store owners using the code found in our previous post will need to update their packing slips to the updated code as the outdated code will no longer work. 

You can now print packing slips while you’re fulfilling your orders in Shopify. A professional default template that’s optimized for 8.5x11 inch paper comes right out of the box, and if you want to make customizations, you can edit it using HTML, Liquid, and CSS.

If you prefer printing your packing slips with a 4x6 inch label printer (e.g. DYMO or similar), and want a template that’s optimized for a 4x6 inch format, follow these steps in your admin:

1. Go to Settings > Shipping
2. Scroll down to Packing slips section and select Edit
3. Highlight all the code in the text field and delete it
4. Paste the code below into the empty text field
5. Select Preview to make sure the changes were made
6. Select Save 
7. To go back to the 8.5x11 format, select Revert to default at the bottom of the page. This removes any changes you made to the default packing slip template.

View all Liquid variables that are available for packing slips or learn more about packing slips and other customizations you can make, like adding your logo or removing images in the Shopify Help Center.

4x6 packing slip example

8.5x11 packing slip example (Default)

4x6 packing slip template code

<div class="wrapper">
<div class="header">
<div class="shop-title">
<p class="to-uppercase">
{{ shop.name }}
</p>
</div>
<div class="order-title">
<p class="text-align-right">
Order {{ order.name }}
</p>
<p class="text-align-right">
{{ order.created_at | date: "%B %e, %Y" }}
</p>
</div>
</div>
<div class="customer-addresses">
<div class="shipping-address">
<p class="subtitle-bold to-uppercase">
Ship to
</p>
<p class="address-detail">
{% if shipping_address != blank %}
{{ shipping_address.name }}
{% if shipping_address.company != blank %}
<br>
{{ shipping_address.company }}
{% endif %}
<br>
{{ shipping_address.address1 }}
{% if shipping_address.address2 != blank %}
<br>
{{ shipping_address.address2 }}
{% endif %}
{% if shipping_address.city_province_zip != blank %}
<br>
{{ shipping_address.city_province_zip }}
{% endif %}
<br>
{{ shipping_address.country }}
{% else %}
No shipping address
{% endif %}
</p>
</div>
<div class="billing-address">
<p class="subtitle-bold to-uppercase">
Bill to
</p>
<p class="address-detail">
{% if billing_address != blank %}
{{ billing_address.name }}
{% if billing_address.company != blank %}
<br>
{{ billing_address.company }}
{% endif %}
<br>
{{ billing_address.address1 }}
{% if billing_address.address2 != blank %}
<br>
{{ billing_address.address2 }}
{% endif %}
{% if billing_address.city_province_zip != blank %}
<br>
{{ billing_address.city_province_zip }}
{% endif %}
<br>
{{ billing_address.country }}
{% else %}
No billing address
{% endif %}
</p>
</div>
</div>
<hr>
<div class="order-container">
<div class="order-container-header">
<div class="order-container-header-left-content">
<p class="subtitle-bold to-uppercase">
Items
</p>
</div>
<div class="order-container-header-right-content">
<p class="subtitle-bold to-uppercase">
Quantity
</p>
</div>
</div>
{% for line_item in line_items_in_shipment %}
<div class="flex-line-item">
<div class="flex-line-item-description">
<p>
<span class="line-item-description-line">
<strong>{{ line_item.title }}</strong>
</span>
{% if line_item.variant_title != blank %}
<span class="line-item-description-line">
{{ line_item.variant_title }}
{% if line_item.sku != blank %}
&bull;
{{ line_item.sku }}
{% endif %}
</span>
{% elsif line_item.sku != blank %}
<span class="line-item-description-line">
{{ line_item.sku }}
</span>
{% endif %}
</p>
</div>
<div class="flex-line-item-quantity">
<p class="text-align-right">
{{ line_item.shipping_quantity }} of {{ line_item.quantity }}
</p>
</div>
</div>
{% endfor %}
</div>
{% unless includes_all_line_items_in_order %}
<hr class="subdued-separator">
<p class="missing-line-items-text">
There are other items from your order not included in this shipment.
</p>
{% endunless %}
<hr>
{% if order.note != blank %}
<div class="notes">
<p class="subtitle-bold to-uppercase">
Notes
</p>
<p class="notes-details">
{{ order.note }}
</p>
</div>
{% endif %}
<div class="footer">
<p>
Thank you for shopping with us!
</p>
<p>
<strong>
{{ shop.name }}
</strong>
<br>
{{ shop_address.address1 }}, {{ shop_address.city }}, {{ shop_address.province_code }}, {{ shop_address.zip }}, {{ shop_address.country }}
<br>
{{ shop.email }}
<br>
{{ shop.domain }}
</p>
</div>
</div>
<style type="text/css">
body {
font-size: 30px;
}

* {
box-sizing: border-box;
}

.wrapper {
width: 890px;
margin: auto;
padding: 1em;
font-family: "Noto Sans", sans-serif;
font-weight: 250;
}

.header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
}

.header p {
margin: 0;
}

.shop-title {
-webkit-box-flex: 6;
-webkit-flex: 6;
flex: 6;
font-size: 1.9em;
}

.order-title {
-webkit-box-flex: 4;
-webkit-flex: 4;
flex: 4;
}

.customer-addresses {
width: 100%;
display: inline-block;
margin: 1em 0;
}

.address-detail {
margin: 0.35em 0 0;
line-height: 1.5;
}

.subtitle-bold {
font-weight: bold;
margin: 0;
font-size: 0.85em;
}

.to-uppercase {
text-transform: uppercase;
}

.text-align-right {
text-align: right;
}

.shipping-address {
float: left;
min-width: 14em;
max-width: 50%;
}

.billing-address {
padding-left: 16em;
min-width: 14em;
}

.order-container {
padding: 0 0.35em;
}

.order-container-header {
display: inline-block;
width: 100%;
margin-top: 0.7em;
}

.order-container-header-left-content {
float: left;
}

.order-container-header-right-content {
float: right;
}

.flex-line-item {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: center;
margin: 0.7em 0;
page-break-inside: avoid;
}

.flex-line-item-description {
-webkit-box-flex: 9;
-webkit-flex: 9;
flex: 9;
}

.line-item-description-line {
display: block;
}

.flex-line-item-description p {
margin: 0;
line-height: 1.5;
}

.flex-line-item-quantity {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}

.subdued-separator {
height: 0.035em;
border: none;
color: lightgray;
background-color: lightgray;
margin: 0;
}

.missing-line-items-text {
margin: 0.7em 0;
padding: 0 0.35em;
}

.notes {
margin-top: 1em;
}

.notes p {
margin-bottom: 0;
}

.notes .notes-details {
margin-top: 0.35em;
}

.footer {
margin-top: 1em;
text-align: center;
line-height: 1.5;
}

.footer p {
margin: 0;
margin-bottom: 0.7em;
}

hr {
height: 0.07em;
border: none;
color: black;
background-color: black;
margin: 0;
}
</style>