Adding Shipping Method to Packing Slip Liquid Template

[megancuk]

Hello,

Can anyone help me with the code required to add into a packing slip so it shows the Shipping Method? i.e. customers can choose 1st class or 2nd class and I need this to show up on the packing slip. Shopify common variables does not include this so looking to add some code into the Liquid Template, but not sure what it needs to be and where to place it within the template?

Thanks!

Megan

[megancuk]

Hi there - thanks for this. The template doesn't show a 'shipping details' block in my template. How would I add it in? I have copy and pasted the entire liquid below: 

<div class="wrapper">
<div class="header">
<div class="shop-title">
<img src="https://cdn.shopify.com/s/files/1/0513/2199/5433/files/MC-LOGO-JOULES.jpg?v=1677589692" style="width: 60px; height: 60px;">
</div>
<div class="order-title">
<p class="text-align-right">
Order {{ order.name }}
</p>
{% if order.po_number != blank %}
<p class="text-align-right">
PO number #{{ order.po_number }}
</p>
{% endif %}
<p class="text-align-right">
{{ order.created_at | date: format: "date" }}
</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 %}
{% for group in line_item.groups %}
<span class="line-item-description-line">
Part of: {{ group.title }}
</span>
{% endfor %}
</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>

[Tawny_Reynolds]

I had the same problem in switching from the legacy Order Printer to the new one, but I figured it out.  Here's my legacy code:

{% if shipping_method.title == "Standard Shipping" %}
<h3>Standard Shipping</h3>
{% endif %}
{% if shipping_method.title == "Rush Shipping" %}
<h3>Rush Shipping</h3>
{% endif %}

By poking around a bit I figured out the difference - you have to add "order." in front of the "shipping_method.title".  Additionally, the "title" must be reading a different field, since my standard shipping title is now "Free over $99" instead of "Standard Shipping" like in the legacy Order Printer.  I figured this out by adding a line temporarily that test printed order.shipping_method.title just to see what was in the variable:

<p>{{ order.shipping_method.title }}</p>

Anyway, here's my new (working) code:

{% if order.shipping_method.title == "Free over $99" %}
<h3>Standard Shipping</h3>
{% endif %}
{% if order.shipping_method.title == "Rush Shipping" %}
<h3>Rush Shipping</h3>
{% endif %}

You'll also need to add the "<p>{{ order.shipping_method.title }}</p>" line, save the template, and go look at orders with your different shipping methods to see what the shipping method name actually is.  Then you can go back into the template, change the text from my "Free over $99" to whatever your shipping method name is, and you should be good to go!

[soulchild37]

Hi Megancuk,

Assuming you haven't modify the packing list template previously,

You can find the line `<div class="shipping-address">` in the template , and add `<h2>{{ order.shipping_method.title }}</h2>` below that line .

And then find the line `<div class="billing-address">` in the template, and add `<h2>&nbsp;</h2>` below that line. (This step is to make the spacing so that the billing address will align vertically with shipping address, as the shipping method is added to shipping address layout)



I have written a tutorial for this with step by step screenshot on where to add the code here : https://yagisoftware.com/articles/how-to-add-shipping-delivery-method-name-into-packing-slip-templat...

Hope this helps!

[movingimage]

Thanks! I am looking for a way to get the specific carrier service that reflects the purchased label...For example, if the customer gets free shipping, I might buy a USPS or UPS label depending on price. {{ order.shipping_method.title }} will simply yield "Free Shipping" but not "UPS Ground" or "USPS Priority" etc... is there any way to get at the actual carrier service that was purchased when generating the label?