Order Printer Packing Slip Template With Gift Messages 📫

The below template can be used in Shopify’s Order Printer app in order to get the Gift message details to display on your packing slip.

<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>

{% comment %}
 To adjust the size of line item images, change desired_image_size.
 The other variables make sure your images print at high quality.
 {% endcomment %}
 {% assign desired_image_size = 58 %}
 {% assign resolution_adjusted_size = desired_image_size | times: 300 | divided_by: 72 | ceil %}
 {% capture effective_image_dimensions %}
 {{ resolution_adjusted_size }}x{{ resolution_adjusted_size }}
 {% endcapture %}

{% for line_item in line_items %}
 <div class="flex-line-item">
 <div class="flex-line-item-img">
 {% if line_item.product.featured_image != blank %}
 <div class="aspect-ratio aspect-ratio-square" style="width: {{ desired_image_size }}px; height: {{ desired_image_size }}px;">
 {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}
 </div>
 {% endif %}
 </div>
 <div class="flex-line-item-description">
 <p>
 <span class="line-item-description-line">
 {{ line_item.title }}
 </span>
 {% if line_item.variant_title != blank %}
 <span class="line-item-description-line">
 {{ line_item.variant_title }}
 </span>
 {% endif %}
 {% if 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.quantity }}
 </p>
 </div>
 </div>
 {% endfor %}
 </div>
 <hr>
 {% if order.note != blank or attributes.Message != blank or attributes.To != blank or attributes.From != blank %}
 <div class="notes">
 {% if order.note != blank %}
 <p class="subtitle-bold to-uppercase">
 Notes
 </p>
 <p class="notes-details">
 {{ order.note }}
 </p>
 {% endif %}
 {% if attributes.To != blank %}
 <p class="subtitle-bold to-uppercase">
 To
 </p>
 <p class="notes-details">
 {{ attributes.To }}<br/>
 </p>
 {% endif %}
 {% if attributes.From != blank %}
 <p class="subtitle-bold to-uppercase">
 From
 </p>
 <p class="notes-details">
 {{ attributes.From }}<br/>
 </p>
 {% endif %}
 {% if attributes.Message != blank %}
 <p class="subtitle-bold to-uppercase">
 Message
 </p>
 <p class="notes-details">
 {{ attributes.Message }}<br/>
 </p>
 {% endif %}
 </div>
 {% endif %}
 
 <div class="notes">
 
 </div>
 
 <div class="footer">
 <p>
 Thank you for shopping with us!
 </p>
 
 <p>
 <strong>
 {{ shop.name }}
 </strong>
 <br>
 {{ shop.address }}{% if shop.address2 != blank %} {{ shop.address2 }}{% endif %}, {{ shop.city }}, {{ shop.province_code }}, {{ shop.zip }}, {{ shop.country }}
 <br>
 {{ shop.email }}
 <br>
 {{ shop.domain }}
 </p>
 </div>


 
</div>
<style type="text/css">
 body {
 font-size: 15px;
 }

* {
 box-sizing: border-box;
 }
 .printer-preview-content hr {
 clear: both;
 overflow: hidden;
 margin: 0;
 border-bottom: 1px solid #333;
 height: 0;
 }
 .wrapper {
 margin: auto;
 padding: 2.5em;
 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: 2em 0;
 }

.address-detail {
 margin: 0.7em 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: 18em;
 max-width: 50%;
 }

.billing-address {
 padding-left: 20em;
 min-width: 18em;
 }

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

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

.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: 1.4em 0;
 page-break-inside: avoid;
 }

.flex-line-item-img {
 margin-right: 1.4em;
 min-width: {{ desired_image_size }}px;
 }

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

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

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

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

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

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

.notes {
 margin-top: 2em;
 }

.notes p {
 margin-bottom: 0;
 }

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

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

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

hr {
 height: 0.14em;
 border: none;
 color: black;
 background-color: black;
 margin: 0;
 }

.aspect-ratio {
 position: relative;
 display: block;
 background: #fafbfc;
 padding: 0;
 }

.aspect-ratio::before {
 z-index: 1;
 content: "";
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 border: 1px solid rgba(195,207,216,0.3);
 }

.aspect-ratio--square {
 width: 100%;
 padding-bottom: 100%;
 }

.aspect-ratio__content {
 position: absolute;
 max-width: 100%;
 max-height: 100%;
 display: block;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;
 }
</style>

Can't find the answer in our documentation?
Contact Support