-
-
Save basilkhan05/a94ee86cf6fe3ae7887da0348c79dd1d to your computer and use it in GitHub Desktop.
Adding product bin locations to Shopify packing slip template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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 %} | |
</p> | |
{% assign inventory_batches = order.metafields.freshly.inventory_batches %} | |
{% for inventory_batch in inventory_batches %} | |
{% if line_item.sku != blank and line_item.sku == inventory_batch.sku %} | |
<p> | |
<span class="line-item-description-line"> | |
<strong>Bin Location</strong>: {{ inventory_batch.batch_name }} | |
</span> | |
</p> | |
{% endif %} | |
{% endfor %} | |
</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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment