Accepting credit cards, warehouses, and shipping and fulfilling orders
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:
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 %}
•
{{ 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>
Trevor | Community Moderator @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025