If you have not modified your existing packaging template within Order Printer Pro, you can safely update your template with the following code:
<!-- PACKING SLIP --> {% assign SETTING_shop_logo = "" %} {% assign SETTING_shop_logo_width = 240 %} {% assign SETTING_date_format = "%b %e, %Y" %} {% assign SETTING_product_image_size = 58 %} {% assign SETTING_show_cart_attributes = true %} {% assign SETTING_show_order_number_barcode = true %} {% assign SETTING_show_product_barcodes = false %} {% assign SETTING_use_latest_fulfillment = false %} {% comment %} TRANSLATE TEXT You can translate or change wording in the document by updating the words below. Only change the words between the quotes "". {% endcomment %} {% assign TEXT_order = "Order" %} {% case attributes.Checkout-Method %} {% when "pickup" %} {% assign TEXT_shipping_address = "Pickup location" %} {% when "delivery" %} {% assign TEXT_shipping_address = "Delivery address" %} {% else %} {% assign TEXT_shipping_address = "Shipping address" %} {% endcase %} {% assign TEXT_customer = "Customer" %} {% assign TEXT_tel = "Tel." %} {% assign TEXT_no_customer_information = "No customer information" %} {% assign TEXT_payment_method = "Payment method" %} {% assign TEXT_shipping_method = "Shipping method" %} {% assign TEXT_items = "Items" %} {% assign TEXT_qty = "Qty" %} {% assign TEXT_sku = "SKU: " %} {% assign TEXT_qty_of = "of" %} {% assign TEXT_no_items_fulfilled = "No items have been fulfilled for this order" %} {% assign TEXT_notes = "Notes" %} {% assign TEXT_thanks = "Thank you for shopping with us!" %} {% if SETTING_show_product_barcodes == true or SETTING_show_order_number_barcode == true %} {% include "barcodes" %} {% endif %} {% if SETTING_use_latest_fulfillment == true %} {% assign name = latest_fulfillment.name %} {% assign created_at = latest_fulfillment.created_at %} {% assign line_items = latest_fulfillment.line_items %} {% endif %} <div class="template-136040"> <div class="header"> <div class="shop-title to-uppercase"> {% if SETTING_shop_logo != blank %} {{ SETTING_shop_logo | img_tag: '', 'shop-logo'}} {% else %} {{ shop.name }} {% endif %} </div> <div class="order-title text-align-right"> <p> {% if SETTING_show_order_number_barcode == true %} <img class="barcode" data-barcode="{{ name }}"/><br> {% endif %} {{ TEXT_order }} {{ name }} </p> <p> {{ created_at | date: SETTING_date_format }} </p> </div> </div> <div class="customer-addresses"> <div class="shipping-address"> <p class="subtitle-bold to-uppercase"> {{ TEXT_shipping_address }} </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> {{ TEXT_tel }} {{ shipping_address.phone }} {% endif %} {% endif %} </p> </div> <div class="billing-address"> <p class="subtitle-bold to-uppercase"> {{ TEXT_customer }} </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 %} {{ TEXT_no_customer_information }} {% endif %} </p> </div> <div class="order-details"> {% if shipping_method != blank and attributes.Checkout-Method != 'pickup' or fulfillment.tracking_company != blank %} <p class="subtitle-bold to-uppercase"> {{ TEXT_shipping_method }} </p> <p class="order-detail"> {% if fulfillment.tracking_company == blank or fulfillment.tracking_company == "Other" %} {{ shipping_method.title }} <br> {{ fulfillment.tracking_number }} {% else %} {{ fulfillment.tracking_company }} {{ shipping_method.title }} <br> {{ fulfillment.tracking_number }} {% endif %} </p> {% endif %} </div> </div> <hr> <div class="order-table"> <div class="order-table-row order-table-header"> <div class="order-table-cell item-image-and-description subtitle-bold to-uppercase"> {{ TEXT_items }} </div> <div class="order-table-cell item-quantity text-align-right subtitle-bold to-uppercase"> {{ TEXT_qty }} </div> </div> {% comment %} These variables make sure your images print at high quality. {% endcomment %} {% assign resolution_adjusted_size = SETTING_product_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 %} {% if line_item.fulfillment_quantity < 1 %}{% continue %}{% endif %} <div class="order-table-row order-table-body"> <div class="order-table-cell item-image"> {% if SETTING_product_image_size != 0 %} <div class="aspect-ratio aspect-ratio-square" style="width: {{ SETTING_product_image_size }}px; height: {{ SETTING_product_image_size }}px;"> {% if line_item.image != blank %} {{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }} {% else %} {{ '/product_image_placeholder.svg' | img_tag: '', 'aspect-ratio__content placeholder' }} {% endif %} </div> {% endif %} </div> <div class="order-table-cell item-description"> <p> <span class="item-description-line"> {{ line_item.product_title }} </span> {% if line_item.variant_title != blank %} <span class="item-description-line"> {{ line_item.variant_title }} </span> {% endif %} {% if line_item.sku != blank %} <span class="item-description-line"> {{ TEXT_sku }}{{ line_item.sku }} </span> {% endif %} {% for p in line_item.properties %} {% assign p_internal = p.first | slice: 0 %} {% unless p.first contains "builder_id" or p.first contains "builder_info" or p.first contains "master_builder" or p_internal == "_" or p.last == "" or p.last == blank %} <span class="item-description-line">{{ p.first }}: {{ p.last }}</span> {% endunless %} {% endfor %} {% if SETTING_show_product_barcodes == true and line_item.variant.barcode != blank %} <img class="barcode" data-barcode="{{ line_item.variant.barcode }}"> {% endif %} </p> </div> <div class="order-table-cell item-quantity text-align-right"> {{ line_item.fulfillment_quantity }} {{ TEXT_qty_of }} {{ line_item.quantity | minus: line_item.refunded_quantity }} </div> </div> {% else %} <div class="order-table-row order-table-body"> <p>{{ TEXT_no_items_fulfilled }}</p> </div> {% endfor %} </div> <hr> <div class="notes-and-pricing"> <div class="notes"> {% if note != blank %} <div class="notes-row"> <div class="notes-title subtitle-bold to-uppercase"> {{ TEXT_notes }} </div> <div class="notes-details"> {{ note }} </div> </div> {% endif %} {% if SETTING_show_cart_attributes == true %} {% if attributes.Pickup-Date && attributes.Pickup-Time %} <div class="notes-row"> <div class="notes-title subtitle-bold to-uppercase"> Pickup date: </div> <div class="notes-details"> {{ attributes.Pickup-Date | date: "%A, %b %d, %y" }} at {{ attributes.Pickup-Time }} </div> </div> {% elsif attributes.Pickup-Date %} <div class="notes-row"> <div class="notes-title subtitle-bold to-uppercase"> Pickup date: </div> <div class="notes-details"> {{ attributes.Pickup-Date | date: "%A, %b %d, %y" }} </div> </div> {% endif %} {% if attributes.Delivery-Date && attributes.Delivery-Time %} <div class="notes-row"> <div class="notes-title subtitle-bold to-uppercase"> Delivery date: </div> <div class="notes-details"> {{ attributes.Delivery-Date | date: "%A, %b %d, %y" }} between {{ attributes.Delivery-Time }} </div> </div> {% elsif attributes.Delivery-Date %} <div class="notes-row"> <div class="notes-title subtitle-bold to-uppercase"> Delivery date: </div> <div class="notes-details"> {{ attributes.Delivery-Date | date: "%A, %b %d, %y" }} </div> </div> {% endif %} {% if attributes.Shipping-Date %} <div class="notes-row"> <div class="notes-title subtitle-bold to-uppercase"> Shipping date: </div> <div class="notes-details"> {{ attributes.Shipping-Date | date: "%A, %b %d, %y" }} </div> </div> {% endif %} {% endif %} </div> </div> <div class="footer"> <p> {{ TEXT_thanks }} </p> <p> <strong> {{ shop.name }} </strong> <br> {{ shop.address1 }}{% if shop.address2 != blank %}, {{ shop.address2 }}{% endif %}, {{ shop.city }}, {{ shop.province_code }}, {{ shop.zip }}, {{ shop.country }} <br> <a href="mailto:{{ shop.customer_email }}" target="_blank">{{ shop.customer_email }}</a> <br> <a href="https://{{ shop.domain }}" target="_blank">{{ shop.domain }}</a> </p> </div> </div> <style> .template-136040 * { font-family: "Open Sans", sans-serif !important; font-size: 14px; box-sizing: border-box; font-weight: 300; } .template-136040 { margin: auto; padding: 10px 30px 0 30px; min-height: 600px; } .template-136040 p { margin: 0 0 7px 0; } .template-136040 a, .template-136040 a:link, .template-136040 a:visited { color: #000; font-weight: 300; text-decoration: none; } .template-136040 .header { width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; flex-direction: row; align-items: top; margin-bottom: 30px; } .template-136040 .header p { margin: 0 } .template-136040 .shop-title { -webkit-box-flex: 6; -webkit-flex: 6; flex: 6; font-size: 30px; font-weight: 400; } .template-136040 .shop-logo { max-width: {{ SETTING_shop_logo_width }}px; } .template-136040 .order-title { -webkit-box-flex: 4; -webkit-flex: 4; flex: 4; } .template-136040 .customer-addresses { width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; flex-direction: row; align-items: top; margin-bottom: 15px; } .template-136040 .shipping-address { flex-grow: 1; flex-basis: 0; } .template-136040 .billing-address { flex-grow: 1; flex-basis: 0; } .template-136040 .order-details { text-align: right; flex-grow: 1; flex-basis: 0; } .template-136040 .address-detail, .template-136040 .order-detail { margin: 15px 0 0; line-height: 1.5; } .template-136040 .subtitle-bold { font-weight: bold; margin: 0; font-size: 13px; } .template-136040 .order-detail + .subtitle-bold { margin-top: 15px; } .template-136040 .to-uppercase { text-transform: uppercase; } .template-136040 .text-align-right { text-align: right; } .template-136040 .order-table { display: block; } .template-136040 .order-table-row { display: -webkit-box; display: -webkit-flex; display: flex; flex-direction: row; align-items: center; margin: 15px 0; page-break-inside: avoid; } .template-136040 .order-table-header { margin-bottom: 0; } .template-136040 .order-table-header .item-image-and-description { -webkit-box-flex: 8; -webkit-flex: 8; flex: 8; margin-right: 30px; } .template-136040 .order-table-header .order-table-cell { white-space: nowrap; } .template-136040 .order-table-cell { -webkit-box-flex: 2; -webkit-flex: 2; flex: 2; margin: 0; } .template-136040 .item-image { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; margin-right: 15px; min-width: {{ SETTING_product_image_size }}px; } .template-136040 .item-description { -webkit-box-flex: 7; -webkit-flex: 7; flex: 7; } .template-136040 .item-description-line { display: block; } .template-136040 .item-description p { margin: 0; line-height: 1.5; } .template-136040 .item-line-price { -webkit-box-flex: 3; -webkit-flex: 3; flex: 3; } .template-136040 .missing-line-items-text { margin: 15px 0; padding: 0 7px; } .template-136040 .notes-and-pricing { width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; flex-direction: row; align-items: top; margin-bottom: 15px; } .template-136040 .notes { flex-grow: 2; flex-basis: 0; } .template-136040 .notes-row { display: -webkit-box; display: -webkit-flex; display: flex; flex-direction: row; align-items: top; margin: 15px 0; page-break-inside: avoid; } .template-136040 .notes-title { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; } .template-136040 .notes-details { -webkit-box-flex: 3; -webkit-flex: 3; flex: 3; margin-right: 30px; } .template-136040 .footer { margin-top: 30px; text-align: center; line-height: 1.5; } .template-136040 .footer p { margin: 0; margin-bottom: 15px; } .template-136040 hr { height: 2px; border-bottom: 2px solid #e1e1e1; margin: 0; } .template-136040 .aspect-ratio { position: relative; display: block; background: #fafbfc; padding: 0; } .template-136040 .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); } .template-136040 .aspect-ratio--square { width: 100%; padding-bottom: 100%; } .template-136040 .aspect-ratio__content { position: absolute; max-width: 100%; max-height: 100%; display: block; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } </style>