We wanted our packing slips to be formatted for a double window mailer with our return address at the top and the customer address in the middle. We had Shopify Support help with a code but I still cannot get it to work. It’s also less visually appealing than the default script. Any help would be greatly appreciated.
Specifically the things that are wrong are:
The customer information isn’t formatted to the middle for a mailer
It isn’t pulling the customer information like name, address, or order information
It isn’t pulling the order information like line items or price
Here is the new one:
Packing Slip body { font-family: Arial, sans-serif; margin: 0; padding: 20px; width: 8.5in; /* Width of letter-sized paper / height: 11in; / Height of letter-sized paper / position: relative; } .header { text-align: center; margin-bottom: 20px; } .address, .items { margin-bottom: 20px; } .items table { width: 100%; border-collapse: collapse; } .items th, .items td { border: 1px solid #000; padding: 8px; text-align: left; } .footer { text-align: center; margin-top: 20px; } / For positioning the address correctly / .address-container { position: absolute; top: 1in; / Adjust based on where the window starts / left: 0.5in; / Adjust as needed / width: 4in; / Width of the address window / height: 3in; / Height of the address window / overflow: hidden; / Prevent content overflow / } .packing-slip { padding: 10px; margin-top: 4in; / Push down the rest of the content */ }[Guardian Games]
[345 SE Taylor St]
[Portland, OR 97214]
[503-238-4000]
[ccg@guardiangames.com]
Ship To:
[Recipient Name]
[Recipient Address Line 1]
[Recipient Address Line 2]
[City, State ZIP]
Packing Slip
Order #: [Order Number]
Date: [Order Date]
Items Ordered:
| Item Name | Quantity | Price |
|---|---|---|
| [Item 1] | [Qty] | [Price] |
| [Item 2] | [Qty] | [Price] |
| [Item 3] | [Qty] | [Price] |
| Total | [Total] | |
Thank you for your order!
Here is the default one:
{{ shop.name }}
Order {{ order.name }}
{% if order.po_number != blank %}PO number #{{ order.po_number }}
{% endif %}{{ order.created_at | date: format: "date" }}
{% if delivery_method.instructions != blank %} Delivery to {% else %} Ship to {% endif %}
{% if shipping_address != blank %}
{{ shipping_address.name }}
{% if shipping_address.company != blank %}
{{ shipping_address.company }}
{% endif %}
{{ shipping_address.address1 }}
{% if shipping_address.address2 != blank %}
{{ shipping_address.address2 }}
{% endif %}
{% if shipping_address.city_province_zip != blank %}
{{ shipping_address.city_province_zip }}
{% endif %}
{{ shipping_address.country }}
{% if shipping_address.phone != blank %}
{{ shipping_address.phone }}
{% endif %}
{% else %}
No shipping address
{% endif %}
Bill to
{% if billing_address != blank %}
{{ billing_address.name }}
{% if billing_address.company != blank %}
{{ billing_address.company }}
{% endif %}
{{ billing_address.address1 }}
{% if billing_address.address2 != blank %}
{{ billing_address.address2 }}
{% endif %}
{% if billing_address.city_province_zip != blank %}
{{ billing_address.city_province_zip }}
{% endif %}
{{ billing_address.country }}
{% else %}
No billing address
{% endif %}
Items
Quantity
{% 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 %}
{{ line_item.title }} {% if line_item.variant_title != blank %} {{ line_item.variant_title }} {% endif %} {% if line_item.sku != blank %} {{ line_item.sku }} {% endif %} {% for group in line_item.groups %} Part of: {{ group.title }} {% endfor %}
{{ line_item.shipping_quantity }} of {{ line_item.quantity }}
There are other items from your order not included in this shipment.
{% endunless %}{% if order.note != blank %}
Notes
{{ order.note }}
Delivery instructions
{{ delivery_method.instructions }}
Thank you for shopping with us!
{{ shop.name }}
{{ shop_address.summary }}
{{ shop.email }}
{{ shop.domain }}
- {
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;
}