Getting improved packing slips for Single SKU bundles

Note: This process involves customizing the code for your Packing slip template. The Bundle Builder team is unable to provide any direct support for customization tasks. If you're not confident with changing code, we recommend finding a Shopify Expert to work with. HeyCarson and StoreTasker are recommended partners of Bundle Builder - both specializing in website development and offering free quotes for their services.

Improved packing slips

We know many of you like printing packing slips for your bundles. By default, Shopify doesn't include line items on packing slips for Single SKU bundles - meaning the names of individual products aren't shown here.

If the default packing slip doesn't quite do the job, you may have resorted to printing out the order page as an alternative.

However, you can try our simple solution for getting better packing slips. By customizing your Packing slip template using the code provided below, you can easily add bundle contents as line items to your packing slips.

Here's an example of a customized Single SKU packing slip:

Whether or not you've already customized your packing slip - we've included the code snippet you need to use for both scenarios. In this guide we'll explain:

1. Navigating to the Packing slip template
2. Code snippet: If you have already customized the packing slip
3. Code snippet: If you have not customized the packing slip
4. Reverting to the default template

Navigating to the Packing slip template

Before we get to the code snippet, here's a quick reminder for how you can find the Packing slip template that you'll need to customize:

Step 1: Go to Shopify's Settings.

Step 2: Click Shipping and delivery.

Step 3: Scroll down the page and locate the Packing slip template section.

Step 4: Click Edit template.

Step 5: Add or replace the code accordingly by pasting the snippets below into the template.

Step 6: Save your changes.

Step 7 (optional): Preview the template.

Code snippet: Use if you have already customized the packing slip

Firstly, locate this div in the template:

<div class="flex-line-item-description">

Tip: Press Ctrl + F (or Command + F on Mac) while viewing the template to open a search box. You can paste the snippet here to find it instantly.

Next, simply add this snippet below (feel free to change it to suit your preference if you are comfortable editing Liquid):

<ul style="list-style-type:none">
   {% for property in line_item.properties %}
      {% unless property.first.first == "_" %}
        <li>{{property.first }}: {{property.last}}</li>
      {% endunless %}
   {% endfor %}
</ul>

Example:

Code snippet: Use if you haven't customized the packing slip

If you're currently using your default packing slip template then you can just replace the entire template with the code provided below:

<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">
{% if delivery_method.instructions != blank %}
Delivery to
{% else %}
Ship to
{% endif %}
</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 }}
{% if shipping_address.phone != blank %}
<br>
{{ shipping_address.phone }}
{% endif %}
{% 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_in_shipment %}
<div class="flex-line-item">
<div class="flex-line-item-img">
{% if line_item.image != blank %}
<div class="aspect-ratio aspect-ratio-square" style="width: {{ desired_image_size }}px; height: {{ desired_image_size }}px;">
{{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
</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 %}
<ul style="list-style-type:none">
   {% for property in line_item.properties %}
      {% unless property.first.first == "_" %}
        <li>{{property.first }}: {{property.last}}</li>
      {% endunless %}
   {% endfor %}
</ul>
</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 %}
{% if delivery_method.instructions != blank %}
<div class="notes">
<p class="subtitle-bold to-uppercase">
Delivery instructions
</p>
<p class="notes-details">
{{ delivery_method.instructions }}
</p>
</div>
{% endif %}
<div class="footer">
<p>
Thank you for shopping with us!
</p>
<p>
<strong>
{{ shop.name }}
</strong>
<br>
{{ shop_address.summary }}
<br>
{{ shop.email }}
<br>
{{ shop.domain }}
</p>
</div>
</div>
<style type="text/css">
body {
font-size: 15px;
}

* {
box-sizing: border-box;
}

.wrapper {
width: 831px;
margin: auto;
padding: 4em;
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.7em;
}

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

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

Example:

Tip: Don't worry if you feel like you made a mistake somewhere - you can revert to the default template at any time.

Reverting to the default template

To revert to the default template:

Step 1: Go to the Packing slip template page and scroll to the bottom.

Step 2: Locate and click the Revert to default button.

Step 3: You will be prompted to Confirm. This action cannot be undone so we recommend saving your customized template code before confirming in case you want to use it again later.