When you print large orders with standard paper size, you might notice that a single order covers more than one page. You could quickly mix those extra pages if you print orders in bulk. With that in mind, we're sharing two example template designs for Order Printer Pro that could help with that, along with a quick technical explanation of how to build it.
NOTE: Due to Browser limitations, if the header takes up more than ~ 1/3 of the printable page height, it won't repeat, and the body will break. We suggest making the repeated header content as small as possible, for instance, by reducing the logo size; otherwise, you may adjust the content scale or paper size.
Packing Slip
Packing Slip
<!-- PACKING SLIP -->
<!-- Document Settings -->
{% assign SETTING_shop_logo = shop_logo_url %} <!-- Logo uploaded from "Templates" page > "Customize Branding" -->
{% assign SETTING_shop_logo_width = shop_logo_width %} <!-- Logo width from "Templates" page > "Customize Branding" -->
{% assign SETTING_shop_accent_color = shop_accent_color %} <!-- Accent color from "Templates" page > "Customize Branding" -->
{% assign SETTING_date_format = "%b %e, %Y" %} <!-- Adjusts date format used, see: https://shopify.github.io/liquid/filters/date/ -->
{% assign SETTING_show_product_images = true %} <!-- Display product images? (true/false) -->
{% assign SETTING_product_image_size = 58 %} <!-- Adjusts size of product images -->
{% assign SETTING_show_cart_attributes = false %} <!-- Display custom information collected during checkout? (true/false) - Example: Pickup/Delivery date & time. See: http://help.forsbergplustwo.com/en/articles/3825760 -->
{% assign SETTING_show_order_number_barcode = true %} <!-- Display a barcode of the order number? (true/false) -->
{% assign SETTING_show_product_barcodes = false %} <!-- Display a barcode of the product variant? (true/false) -->
{% assign SETTING_use_latest_fulfillment = false %} <!-- Display only items from the latest fulfillment? (true/false) - Useful for partial fulfillments where you fulfill first, then print documents -->
{% assign SETTING_move_qty_column_to_left = false %} <!-- Move Qty column to the left side? (true/false) -->
{% assign SETTING_show_item_number = true %} <!-- Display the item number (true/false) -->
<!-- Shop info -->
{% assign shop_name_text = "" %} <!-- Overwrite the default shop name shown. Leave blank to use default from Shopify -->
{% assign shop_address_text = "" %} <!-- Overwrite the default shop address shown. Leave blank to use default from Shopify -->
{% assign shop_tax_number_text = "" %} <!-- Display your shop tax or VAT number. Example "VAT No. DK12345" -->
<!--
TRANSLATE TEXT / CHANGE WORDING
You can translate or change wording in the document by updating
the words below. Only change the words between the quotes "".
See: http://help.forsbergplustwo.com/en/articles/5137649
-->
{% assign TEXT_order = "Order" %}
{% assign TEXT_shipping_address = "Shipping address" %}
{% 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_pickup_date_and_time = "Pickup on" %}
{% assign TEXT_pickup_location = "Pickup location" %}
{% assign TEXT_delivery_date_and_time = "Delivery on" %}
{% 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!" %}
<!-- BEGIN: Latest fulfilled items snippet -->
{% 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 %}
<!-- END: Latest fulfilled items snippet -->
<div class="template-000000">
<table>
<thead>
<tr>
<td>
<!-- Header -->
<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 and name != blank %}
<s-barcode type="code128" value="{{ name }}"></s-barcode><br>
{% endif %}
{{ TEXT_order }} {{ name }}
</p>
<p>
{{ created_at | date: SETTING_date_format }}
</p>
</div>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!-- Body-->
<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">
{% assign billing_address = billing_address | default: customer.default_address %}
{% 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 }}
{% if billing_address.phone != blank %}
<br>
{{ TEXT_tel }} {{ billing_address.phone }}
{% endif %}
{% elsif customer != blank %}
{{ customer.name }}
{% if customer.email != blank %}
<br>
{{ customer.email }}
{% endif %}
{% if customer.phone != blank %}
<br>
{{ TEXT_tel }} {{ customer.phone }}
{% endif %}
{% else %}
{{ TEXT_no_customer_information }}
{% endif %}
</p>
</div>
<div class="order-details">
{% if shipping_method != blank 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 %}
{% if attributes.Pickup-Date != blank or attributes.Delivery-Date != blank %}
{% include "pickup_and_delivery" %}
{% endif %}
</div>
</div>
<div class="order-table">
{% comment %}
These variables make sure your images print at high quality.
{% endcomment %}
{% assign resolution_adjusted_size = SETTING_product_image_size | times: 200 | divided_by: 72 | ceil %}
{% capture effective_image_dimensions %}{{ resolution_adjusted_size }}x{{ resolution_adjusted_size }}{% endcapture %}
<table>
<thead>
<tr>
<td>
<!-- Header -->
<hr>
<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>
</td>
</tr>
</thead>
{% for line_item in line_items %}
{% if line_item.fulfillment_quantity < 1 %}{% continue %}{% endif %}
<tbody>
<tr>
<td>
<!-- Body-->
<div class="order-table-row order-table-body">
{% if SETTING_show_item_number == true %}
<div class="item-number">
{{ forloop.index }}.
</div>
{% endif %}
{% if SETTING_show_product_images == true %}
<div class="order-table-cell item-image">
<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>
</div>
{% endif %}
<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 %}
{% if p.last contains "/uploads/" or p.last contains "cdn.shopify.com" %}
<span class="item-description-line"><a href="{{ p.last }}" target="_blank">{{ p.first }}</a></span>
{% else %}
<span class="item-description-line">{{ p.first }}: {{ p.last }}</span>
{% endif %}
{% endunless %}
{% endfor %}
{% if SETTING_show_product_barcodes == true and line_item.variant.barcode != blank %}
<s-barcode type="code128" value="{{ line_item.variant.barcode }}"></s-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>
</td>
</tr>
</tbody>
{% else %}
<div class="order-table-row order-table-body">
<p>{{ TEXT_no_items_fulfilled }}</p>
</div>
{% endfor %}
</table>
</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 | escape | newline_to_br }}
</div>
</div>
{% endif %}
{% if SETTING_show_cart_attributes == true %}
{% for attribute in attributes %}
<div class="notes-row">
<div class="notes-title subtitle-bold to-uppercase">
{{ attribute.first | escape }}:
</div>
<div class="notes-details">
{{ attribute.last | escape }}
</div>
</div>
{% endfor %}
{% endif %}
</div>
</div>
<div class="footer">
<p>
{{ TEXT_thanks }}
</p>
<p>
<strong>
{% if shop_name_text != blank %}
{{ shop_name_text }}
{% else %}
{{ shop.name }}
{% endif %}
</strong>
<br>
{% if shop_address_text != blank %}
{{ shop_address_text }}
{% else %}
{% if shop.address1 != blank %}{{ shop.address1 }},{% endif %}{% if shop.address2 != blank %} {{ shop.address2 }},{% endif %}{% if shop.city != blank %} {{ shop.city }},{% endif %}{% if shop.province_code != blank %} {{ shop.province_code }},{% endif %}{% if shop.zip != blank %} {{ shop.zip }},{% endif %} {{ shop.country }}
{% endif %}
{% if shop_tax_number_text != blank %}
<br>{{ shop_tax_number_text }}
{% endif %}
<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>
</td>
</tr>
</tbody>
</table>
<style>
.template-000000 * {
font-family: "Open Sans", sans-serif !important;
font-size: 14px;
font-weight: 300;
line-height: 18px;
box-sizing: border-box;
}
.template-000000 {
margin: auto;
padding: 10px 30px 0 30px;
min-height: 600px;
}
.template-000000 p {
margin: 0 0 7px 0;
}
.template-000000 a,
.template-000000 a:link,
.template-000000 a:visited {
color: #000;
font-weight: 300;
text-decoration: none;
}
.template-000000 .header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
margin-bottom: 30px;
}
.template-000000 .header p {
margin: 0
}
.template-000000 .shop-title {
color: {{ SETTING_shop_accent_color }};
-webkit-box-flex: 6;
-webkit-flex: 6;
flex: 6;
font-size: 30px;
line-height: 32px;
font-weight: 400;
}
.template-000000 .shop-logo {
max-width: {{ SETTING_shop_logo_width }}px;
}
.template-000000 .order-title {
-webkit-box-flex: 4;
-webkit-flex: 4;
flex: 4;
}
.template-000000 .customer-addresses {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
margin-bottom: 15px;
}
.template-000000 .shipping-address {
flex-grow: 1;
flex-basis: 0;
}
.template-000000 .billing-address {
flex-grow: 1;
flex-basis: 0;
}
.template-000000 .order-details {
text-align: right;
flex-grow: 1;
flex-basis: 0;
margin-bottom: 15px;
}
.template-000000 .address-detail,
.template-000000 .order-detail {
margin: 5px 0 0;
line-height: 1.5;
}
.template-000000 .subtitle-bold {
font-weight: bold;
margin: 0;
font-size: 13px;
}
.template-000000 .order-detail + .subtitle-bold {
margin-top: 15px;
}
.template-000000 .to-uppercase {
text-transform: uppercase;
}
.template-000000 .text-align-right {
text-align: right;
}
.template-000000 .order-table {
display: block;
}
.template-000000 .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-000000 .order-table-header {
margin-bottom: 0;
}
{% if SETTING_show_product_images == true %}
.template-000000 .order-table-header .item-image-and-description {
-webkit-box-flex: 8;
-webkit-flex: 8;
flex: 8;
margin-right: 30px;
}
{% else %}
.template-000000 .order-table-header .item-image-and-description {
-webkit-box-flex: 7;
-webkit-flex: 7;
flex: 7;
}
{% endif %}
.template-000000 .order-table-header .order-table-cell {
white-space: nowrap;
}
.template-000000 .order-table-cell {
-webkit-box-flex: 2;
-webkit-flex: 2;
flex: 2;
margin: 0;
}
.template-000000 .item-image {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
margin-right: 15px;
min-width: {{ SETTING_product_image_size | default: 0 }}px;
}
.template-000000 .item-description {
-webkit-box-flex: 7;
-webkit-flex: 7;
flex: 7;
}
.template-000000 .item-description-line {
display: block;
margin: 0;
}
.template-000000 .item-description p {
margin: 0;
line-height: 1.5;
}
.template-000000 .item-line-price {
-webkit-box-flex: 3;
-webkit-flex: 3;
flex: 3;
}
.template-000000 .missing-line-items-text {
margin: 15px 0;
padding: 0 7px;
}
.template-000000 .barcode-image {
height: 32px;
display: inline-block;
}
.template-000000 .qrcode-image {
margin-top: 15px;
height: 75px;
display: inline-block;
}
.template-000000 .notes-and-pricing {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
margin-bottom: 15px;
}
.template-000000 .notes {
flex-grow: 2;
flex-basis: 0;
}
.template-000000 .notes-row {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
margin: 15px 0;
page-break-inside: avoid;
}
.template-000000 .notes-title {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.template-000000 .notes-details {
-webkit-box-flex: 3;
-webkit-flex: 3;
flex: 3;
margin-right: 30px;
}
.template-000000 .footer {
margin-top: 30px;
text-align: center;
line-height: 1.5;
}
.template-000000 .footer p {
margin: 0;
margin-bottom: 15px;
}
.template-000000 .footer p:last-of_type {
margin-bottom: 0px;
}
.template-000000 hr {
height: 2px;
border-bottom: 2px solid {{ SETTING_shop_accent_color | default: "#e1e1e1" }};
margin: 0;
}
.template-000000 .aspect-ratio {
position: relative;
display: block;
background: #fafbfc;
padding: 0;
}
.template-000000 .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-000000 .aspect-ratio--square {
width: 100%;
padding-bottom: 100%;
}
.template-000000 .aspect-ratio__content {
position: absolute;
max-width: 100%;
max-height: 100%;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
/* BEGIN: Product table column ordering snippet */
.template-000000 .order-table-cell {
order: 2; /* Set default for all columns (same value equals original ordering) */
}
{% if SETTING_move_qty_column_to_left == true %}
.template-000000 .order-table-cell.item-quantity {
order: 1; /* Set quantity column first in ordering */
text-align: left !important;
}
{% endif %}
/* END: Product table column ordering snippet */
.template-000000 table thead {
display: table-header-group;
}
.template-000000 .header {
margin-top: 2rem;
}
.template-000000 .item-number {
min-width: 1rem;
margin: 0.3rem;
margin-left: 0; /* -1.3rem */
font-size: 0.7rem;
font-weight: 300;
color: rgba(0, 0, 0, 0.9)
}
</style>
Receipt / Invoice
Receipt / Invoice
<!-- RECEIPT / INVOICE -->
<!-- Document Settings -->
{% assign SETTING_shop_logo = shop_logo_url %} <!-- Logo uploaded from "Templates" page > "Customize Branding" -->
{% assign SETTING_shop_logo_width = shop_logo_width %} <!-- Logo width from "Templates" page > "Customize Branding" -->
{% assign SETTING_shop_accent_color = shop_accent_color %} <!-- Accent color from "Templates" page > "Customize Branding" -->
{% assign SETTING_date_format = "%b %e, %Y" %} <!-- Adjusts date format used, see: https://shopify.github.io/liquid/filters/date/ -->
{% assign SETTING_show_product_images = true %} <!-- Display product images? (true/false) -->
{% assign SETTING_product_image_size = 58 %} <!-- Adjusts size of product images -->
{% assign SETTING_show_cart_attributes = false %} <!-- Display custom information collected during checkout? (true/false) - Example: Pickup/Delivery date & time. See: http://help.forsbergplustwo.com/en/articles/3825760 -->
{% assign SETTING_show_order_number_barcode = true %} <!-- Display a barcode of the order number? (true/false) -->
{% assign SETTING_show_product_barcodes = false %} <!-- Display a barcode of the product variant? (true/false) -->
{% assign SETTING_show_item_number = true %} <!-- Display a barcode of the product variant? (true/false) -->
<!-- Shop info -->
{% assign shop_name_text = "" %} <!-- Overwrite the default shop name shown. Leave blank to use default from Shopify -->
{% assign shop_address_text = "" %} <!-- Overwrite the default shop address shown. Leave blank to use default from Shopify -->
{% assign shop_tax_number_text = "" %} <!-- Display your shop tax or VAT number. Example "VAT No. DK12345" -->
<!--
TRANSLATE TEXT / CHANGE WORDING
You can translate or change wording in the document by updating
the words below. Only change the words between the quotes "".
See: http://help.forsbergplustwo.com/en/articles/5137649
-->
{% assign TEXT_receipt_tax_invoice = "Receipt / Tax Invoice" %}
{% assign TEXT_purchase_order = "Purchase order" %}
{% assign TEXT_shipping_address = "Shipping address" %}
{% assign TEXT_customer = "Customer" %}
{% assign TEXT_tel = "Tel." %}
{% assign TEXT_no_customer_information = "No customer information" %}
{% assign TEXT_payment_method = "Payment method" %}
{% assign TEXT_payment_due_on = "Due on" %}
{% assign TEXT_payment_overdue = "Overdue" %}
{% assign TEXT_shipping_method = "Shipping method" %}
{% assign TEXT_pickup_date_and_time = "Pickup on" %}
{% assign TEXT_pickup_location = "Pickup location" %}
{% assign TEXT_delivery_date_and_time = "Delivery on" %}
{% assign TEXT_items = "Items" %}
{% assign TEXT_price = "Price" %}
{% assign TEXT_tax = "Tax" %}
{% assign TEXT_qty = "Qty" %}
{% assign TEXT_item_total = "Item total" %}
{% assign TEXT_sku = "SKU: " %}
{% assign TEXT_refunded = "x Refunded" %}
{% assign TEXT_notes = "Notes" %}
{% assign TEXT_discount = "Discount" %}
{% assign TEXT_subtotal = "Subtotal" %}
{% assign TEXT_shipping = "Shipping" %}
{% assign TEXT_duties = "Import duties" %}
{% assign TEXT_total_excluding_vat = "Total excl. tax" %}
{% assign TEXT_vat = "VAT %" %}
{% assign TEXT_total = "Total" %}
{% assign TEXT_total_refund = "Total refund" %}
{% assign TEXT_total_paid = "Total paid" %}
{% assign TEXT_total_due = "Total due" %}
{% assign TEXT_thanks = "Thank you for shopping with us!" %}
<div class="template-000000">
<table>
<thead>
<tr>
<td>
<!-- Header -->
<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 and name != blank %}
<s-barcode type="code128" value="{{ name }}"></s-barcode><br>
{% endif %}
{{ TEXT_receipt_tax_invoice }} {{ name }}
{% if po_number != blank %}<br>{{ TEXT_purchase_order }} {{ po_number }}{% endif %}
</p>
<p>
{{ created_at | date: SETTING_date_format }}
</p>
</div>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!-- Body-->
<div class="customer-addresses">
{% if shipping_address != blank %}
<div class="shipping-address">
<p class="subtitle-bold to-uppercase">
{{ TEXT_shipping_address }}
</p>
<p class="address-detail">
{{ shipping_address | format_address }}
{% if shipping_address.phone != blank %}
<br>
{{ TEXT_tel }} {{ shipping_address.phone }}
{% endif %}
</p>
</div>
{% endif %}
<div class="billing-address">
<p class="subtitle-bold to-uppercase">
{{ TEXT_customer }}
</p>
<p class="address-detail">
{% assign billing_address = billing_address | default: customer.default_address %}
{% if billing_address != blank %}
{{ billing_address | format_address }}
{% if billing_address.phone != blank %}
<br>
{{ TEXT_tel }} {{ billing_address.phone }}
{% endif %}
{% elsif customer != blank %}
{{ customer.name }}
{% if customer.email != blank %}
<br>
{{ customer.email }}
{% endif %}
{% if customer.phone != blank %}
<br>
{{ TEXT_tel }} {{ customer.phone }}
{% endif %}
{% else %}
{{ TEXT_no_customer_information }}
{% endif %}
</p>
</div>
<div class="order-details">
{% if payment_method != blank or payment_terms != blank %}
<p class="subtitle-bold to-uppercase">
{{ TEXT_payment_method }}
</p>
<p class="order-detail">
{{ payment_method }}
{% if payment_terms != blank %}
<br>{{ TEXT_payment_due_on }} {{ payment_terms.current_payment_schedule.due_at | date: SETTING_date_format }} ({{ payment_terms.payment_terms_name }})
{% if payment_terms.overdue %}
<br><span class="label-warning">{{ TEXT_payment_overdue }}</span>
{% endif %}
{% endif %}
</p>
{% endif %}
{% if shipping_method != blank 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 %}
{% if attributes.Pickup-Date != blank or attributes.Delivery-Date != blank %}
{% include "pickup_and_delivery" %}
{% endif %}
</div>
</div>
<div class="order-table">
{% comment %}
These variables make sure your images print at high quality.
{% endcomment %}
{% assign resolution_adjusted_size = SETTING_product_image_size | times: 200 | divided_by: 72 | ceil %}
{% capture effective_image_dimensions %}{{ resolution_adjusted_size }}x{{ resolution_adjusted_size }}{% endcapture %}
<table>
<thead>
<tr>
<td>
<hr>
<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-price text-align-right subtitle-bold to-uppercase">
{{ TEXT_price }}
</div>
<div class="order-table-cell item-tax text-align-right subtitle-bold to-uppercase">
{{ TEXT_tax }}
</div>
<div class="order-table-cell item-quantity text-align-right subtitle-bold to-uppercase">
{{ TEXT_qty }}
</div>
<div class="order-table-cell item-line-price text-align-right subtitle-bold to-uppercase">
{{ TEXT_item_total }}
</div>
</div>
</td>
</tr>
</thead>
<tbody>
{% for line_item in line_items %}
{% if line_item.quantity < 1 %}{% continue %}{% endif %}
<tr>
<td>
<div class="order-table-row order-table-body">
{% if SETTING_show_item_number == true %}
<div class="item-number">
{{ forloop.index }}.
</div>
{% endif %}
{% if SETTING_show_product_images == true %}
<div class="order-table-cell item-image">
<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>
</div>
{% endif %}
<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 %}
{% if p.last contains "/uploads/" or p.last contains "cdn.shopify.com" %}
<span class="item-description-line"><a href="{{ p.last }}" target="_blank">{{ p.first }}</a></span>
{% else %}
<span class="item-description-line">{{ p.first }}: {{ p.last }}</span>
{% endif %}
{% endunless %}
{% endfor %}
{% if line_item.refunded_quantity > 0 %}
<span class="item-description-line">
<span class="label-warning">{{ line_item.refunded_quantity }}{{ TEXT_refunded }}</span>
</span>
{% endif %}
{% if SETTING_show_product_barcodes == true and line_item.variant.barcode != blank %}
<s-barcode type="code128" value="{{ line_item.variant.barcode }}"></s-barcode>
{% endif %}
</p>
</div>
<div class="order-table-cell item-price text-align-right">
{% if line_item.original_price > line_item.price %}<s>{{ line_item.original_price | money }}</s><br>{% endif %}
{{ line_item.price | money }}
</div>
<div class="order-table-cell item-tax text-align-right">
{% for tax in line_item.tax_lines %}
{{ tax.rate | times: 100 }}%<br>
{% else %}
0%<br>
{% endfor %}
</div>
<div class="order-table-cell item-quantity text-align-right">
{{ line_item.quantity }}
</div>
<div class="order-table-cell item-line-price text-align-right">
{{ line_item.line_price | money }}
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</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 | escape | newline_to_br }}
</div>
</div>
{% endif %}
{% if SETTING_show_cart_attributes == true %}
{% for attribute in attributes %}
<div class="notes-row">
<div class="notes-title subtitle-bold to-uppercase">
{{ attribute.first | escape }}:
</div>
<div class="notes-details">
{{ attribute.last | escape }}
</div>
</div>
{% endfor %}
{% endif %}
</div>
<div class="pricing">
{% if total_discounts != 0.0 %}
<div class="pricing-row text-align-right">
<div class="pricing-title">
{{ TEXT_discount }}<br>
{% for discount in discounts %}{{ discount.title }} {% endfor %}
</div>
<div class="pricing-details">
-{{ total_discounts | money }}
</div>
</div>
{% endif %}
<div class="pricing-row text-align-right">
<div class="pricing-title">
{{ TEXT_subtotal }}
</div>
<div class="pricing-details">
{{ subtotal_price | money }}
</div>
</div>
<div class="pricing-row text-align-right">
<div class="pricing-title">
{{ TEXT_shipping }}
</div>
<div class="pricing-details">
{{ shipping_price | default: 0.0 | money }}
</div>
</div>
{% if duties_price != 0.0 %}
<div class="pricing-row text-align-right">
<div class="pricing-title">
{{ TEXT_duties }}
</div>
<div class="pricing-details">
{{ duties_price | money }}
</div>
</div>
{% endif %}
<div class="pricing-row text-align-right">
<div class="pricing-title">
{{ TEXT_total_excluding_vat }}
</div>
<div class="pricing-details">
{{ total_price | minus: total_tax | money }}
</div>
</div>
{% for tax in tax_lines %}
<div class="pricing-row text-align-right">
<div class="pricing-title">
{{ tax.title | replace: "VAT", TEXT_vat | replace: "Tax", TEXT_vat }} {{ tax.rate | times: 100 }}%
</div>
<div class="pricing-details">
{{ tax.price | money }}
</div>
</div>
{% endfor %}
<div class="pricing-row text-align-right">
<div class="pricing-title subtitle-bold to-uppercase">
{{ TEXT_total }} ({{ currency }})
</div>
<div class="pricing-details subtitle-bold to-uppercase">
{{ total_price | money }}
</div>
</div>
{% if total_refunded_amount > 0.0 %}
<div class="pricing-row text-align-right">
<div class="pricing-title">
{{ TEXT_total_refund }}
</div>
<div class="pricing-details">
-{{ order.total_refunded_amount | money }}
</div>
</div>
{% endif %}
{% if total_paid != 0.0 %}
<div class="pricing-row text-align-right">
<div class="pricing-title">
{{ TEXT_total_paid }}
</div>
<div class="pricing-details">
{{ total_paid | money }}
</div>
</div>
{% endif %}
{% if total_due != 0.0 %}
<div class="pricing-row text-align-right">
<div class="pricing-title">
{{ TEXT_total_due }}
</div>
<div class="pricing-details">
{{ total_due | money }}
</div>
</div>
{% endif %}
<hr>
</div>
</div>
<div class="footer">
<p>
{{ TEXT_thanks }}
</p>
<p>
<strong>
{% if shop_name_text != blank %}
{{ shop_name_text }}
{% else %}
{{ shop.name }}
{% endif %}
</strong>
<br>
{% if shop_address_text != blank %}
{{ shop_address_text }}
{% else %}
{% if shop.address1 != blank %}{{ shop.address1 }},{% endif %}{% if shop.address2 != blank %} {{ shop.address2 }},{% endif %}{% if shop.city != blank %} {{ shop.city }},{% endif %}{% if shop.province_code != blank %} {{ shop.province_code }},{% endif %}{% if shop.zip != blank %} {{ shop.zip }},{% endif %} {{ shop.country }}
{% endif %}
{% if shop_tax_number_text != blank %}
<br>{{ shop_tax_number_text }}
{% endif %}
<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>
</td>
</tr>
</tbody>
</table>
</div>
<style>
.template-000000 * {
font-family: "Open Sans", sans-serif !important;
font-size: 14px;
font-weight: 300;
line-height: 18px;
box-sizing: border-box;
}
.template-000000 {
margin: auto;
padding: 10px 30px 0 30px;
min-height: 600px;
}
.template-000000 p {
margin: 0 0 7px 0;
}
.template-000000 a,
.template-000000 a:link,
.template-000000 a:visited {
color: #000;
font-weight: 300;
text-decoration: none;
}
.template-000000 .header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
margin-bottom: 30px;
}
.template-000000 .header p {
margin: 0
}
.template-000000 .shop-title {
color: {{ SETTING_shop_accent_color }};
-webkit-box-flex: 6;
-webkit-flex: 6;
flex: 6;
font-size: 30px;
line-height: 32px;
font-weight: 400;
}
.template-000000 .shop-logo {
max-width: {{ SETTING_shop_logo_width }}px;
}
.template-000000 .order-title {
-webkit-box-flex: 4;
-webkit-flex: 4;
flex: 4;
}
.template-000000 .customer-addresses {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
margin-bottom: 15px;
}
.template-000000 .shipping-address {
flex-grow: 1;
flex-basis: 0;
}
.template-000000 .billing-address {
flex-grow: 1;
flex-basis: 0;
}
.template-000000 .order-details {
text-align: right;
flex-grow: 1;
flex-basis: 0;
margin-bottom: 15px;
}
.template-000000 .address-detail,
.template-000000 .order-detail {
margin: 5px 0 0;
line-height: 1.5;
}
.template-000000 .subtitle-bold {
font-weight: bold;
margin: 0;
font-size: 13px;
}
.template-000000 .order-detail + .subtitle-bold {
margin-top: 15px;
}
.template-000000 .to-uppercase {
text-transform: uppercase;
}
.template-000000 .text-align-right {
text-align: right;
}
.template-000000 .order-table {
display: block;
}
.template-000000 .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-000000 .order-table-header {
margin-bottom: 0;
}
{% if SETTING_show_product_images == true %}
.template-000000 .order-table-header .item-image-and-description {
-webkit-box-flex: 8;
-webkit-flex: 8;
flex: 8;
margin-right: 30px;
}
{% else %}
.template-000000 .order-table-header .item-image-and-description {
-webkit-box-flex: 7;
-webkit-flex: 7;
flex: 7;
}
{% endif %}
.template-000000 .order-table-header .order-table-cell {
white-space: nowrap;
}
.template-000000 .order-table-cell {
-webkit-box-flex: 2;
-webkit-flex: 2;
flex: 2;
margin: 0;
}
.template-000000 .item-image {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
margin-right: 15px;
min-width: {{ SETTING_product_image_size | default: 0 }}px;
}
.template-000000 .item-description {
-webkit-box-flex: 7;
-webkit-flex: 7;
flex: 7;
}
.template-000000 .item-description-line {
display: block;
margin: 0;
}
.template-000000 .item-description p {
margin: 0;
line-height: 1.5;
}
.template-000000 .item-line-price {
-webkit-box-flex: 3;
-webkit-flex: 3;
flex: 3;
}
.template-000000 .missing-line-items-text {
margin: 15px 0;
padding: 0 7px;
}
.template-000000 .barcode-image {
height: 32px;
display: inline-block;
}
.template-000000 .qrcode-image {
margin-top: 15px;
height: 75px;
display: inline-block;
}
.template-000000 .notes-and-pricing {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
margin-bottom: 15px;
}
.template-000000 .notes {
flex-grow: 2;
flex-basis: 0;
}
.template-000000 .notes-row {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
margin: 15px 0;
page-break-inside: avoid;
}
.template-000000 .notes-title {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.template-000000 .notes-details {
-webkit-box-flex: 3;
-webkit-flex: 3;
flex: 3;
margin-right: 30px;
}
.template-000000 .footer {
margin-top: 30px;
text-align: center;
line-height: 1.5;
}
.template-000000 .footer p {
margin: 0;
margin-bottom: 15px;
}
.template-000000 .footer p:last-of_type {
margin-bottom: 0px;
}
.template-000000 hr {
height: 2px;
border-bottom: 2px solid {{ SETTING_shop_accent_color | default: "#e1e1e1" }};
margin: 0;
}
.template-000000 .aspect-ratio {
position: relative;
display: block;
background: #fafbfc;
padding: 0;
}
.template-000000 .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-000000 .aspect-ratio--square {
width: 100%;
padding-bottom: 100%;
}
.template-000000 .aspect-ratio__content {
position: absolute;
max-width: 100%;
max-height: 100%;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.template-000000 .pricing {
flex-grow: 1;
flex-basis: 0;
}
.template-000000 .pricing-row {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: center;
margin: 15px 0;
page-break-inside: avoid;
}
.template-000000 .pricing-title {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.template-000000 .pricing-details {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.template-000000 .label-warning {
display: inline-block;
background-color: #FFEA8A;
border-radius: 10px;padding: 1px 6px;
margin-top: 3px;
}
.template-000000 table thead {
display: table-header-group;
}
.template-000000 .item-number {
min-width: 1rem;
margin: 0.3rem;
margin-left: 0; /* -1.3rem */
font-size: 0.7rem;
font-weight: 300;
color: rgba(0, 0, 0, 0.9)
}
</style>
If you have manually changed the code or are using another template design, here's a summary of how header repetition is accomplished. You can contact our support team for help with this. We'll help modify the templates you bought from us, but we can't guarantee it will work for all cases.
Our default templates will print documents as a single content stream since that's how HTML printing works on browsers. However, we can take advantage of the HTML <thead> tag and its property table-header-group . This will allow you to display any content inside the header at the top of every page for any order.
Decide what part of your document will be included in the table header. You can compress the code using the arrows on the left:
Find the outermost
divcontainer, which usually contains the template's specific classtemplate-000000:
Below the opening tag
<div class="template-710789">, paste the code below.
<table>
<thead>
<tr>
<td>
<!-- Header -->
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!-- Body-->
</td>
</tr>
</tbody>
</table>
Then, move the respective contents below the “Header” and “Body” comments of the table you just added.
Finally, add the CSS rule inside the <style> tag at the bottom of the code. Make sure to replace the class
template-000000with the value in your template.
.template-000000 table thead {
display: table-header-group;
}
.template-000000 .header {
margin-top: 2rem;
}
If you want the item's header to repeat on every page as well, you can use the same <table> structure, placing the item's header inside the <thead> structure:
Then, placing the items list number would require you to add the setting at the top of the code:
{% assign SETTING_show_item_number = true %} <!-- Display the item number (true/false) -->Then, find the line {% if SETTING_show_product_images == true %} and place this snippet above it:
{% if SETTING_show_item_number == true %}
<div class="item-number">
{{ forloop.index }}.
</div>
{% endif %}Finally, you must add this complementary CSS rule for the item number elements:
.template-000000 .item-number {
min-width: 1rem;
margin: 0.3rem;
margin-left: 0; /* -1.3rem */
font-size: 0.7rem;
font-weight: 300;
color: rgba(0, 0, 0, 0.9)
}
If you need help with these steps, message us, and our team will gladly assist you. However, please remember that we can't guarantee support for all possible design scenarios.