HTML doesn't have a concept of printed "pages", which doesn’t make it easy to reliably put information at the footer of each page being printed through the browser. By default, the templates' height will depend on the order length, and the browser will fit the content on the required number of pages. Thus, the document is expected to get bumped down as the content above gets longer, so there isn't a straightforward way to print a fixed footer.
Alternative Solution (Advanced)
Some workarounds may allow you to print the fixed footer at the bottom of every page. If you feel confident with HTML, CSS, and JavaScript, we've come up with a solution for our Order Printer Pro default templates and the Order Printer Templates designs. Keep in mind that there could be several ways to achieve the fixed footer; this is the one that has worked for our template designs.
Note: If you plan on printing orders in bulk, the footer contents must be the same for every page and order
To get the footer repeated across the pages, we use a basic HTML table structure to frame the contents of the documents:
<table>
<tbody>
<tr>
<td>
<!--template body-->
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<div class="page-footer-space"></div>
<!--footer -->
</td>
</tr>
</tfoot>
</table>
Then, for each type of template, we'll need some additional adjustments for it to work correctly.
Order Printer Pro
Order Printer Pro
1- First, find the opening template div tag, which looks something like this:
<div class="template-561490">
It will have a unique number for your template. You must add the table snippet above right after that opening tag. To make it easier for further edits, use the triangles on the left to collapse each section.
2- Then, place the body contents below or in replacement of the <!--template body--> comment and the footer contents below the <!--footer --> comment.
Keep in mind the footer element should keep the "footer" class as in the original code. This is how the table layout would look:
NOTE: At this point, the template will already have the footer placed at the bottom of every page's content.
The script below will keep the footer stuck at the bottom margin of the page, but it will conflict when other templates are printed together.
If you have issues with multiple template printing, you may want to consider dismissing the script's use.
3- (Optional) Finally, add the following script and styles at the top of the code. You can adjust the code's "20" pixel value to a different number, depending on the height of your footer and the distance from the content above it.
<!-- Forsberg Fixed Footer -->
<script defer>
function init() {
const placeFooter = () => {
const footers = document.querySelectorAll('#documents').length ? document.querySelectorAll('#documents .card:not(.hide) .footer') : document.querySelectorAll('.footer');
const footerSpaces = document.querySelectorAll('.page-footer-space');
footers.forEach(footer => footer.classList.remove('hide-on-print'));
[...footers].slice(1).forEach(footer => footer.classList.add('hide-on-print'));
const { height } = footers[0].getClientRects()[0];
footerSpaces.forEach(space => space.style.height = `${height + 10}px`);
};
const addCheckboxListeners = () => {
const checkboxes = document.querySelectorAll('#templates_form .checkbox');
if (checkboxes) {
checkboxes.forEach(checkbox => {
checkbox.addEventListener('click', () => {
setTimeout(placeFooter, 600);
});
});
}
};
addCheckboxListeners();
setTimeout(placeFooter, 600);
};
init();
</script>
<style>
@media print {
.page-footer-space {
height: 20mm;
}
tfoot {
display: table-footer-group;
}
.footer {
position: fixed;
bottom: 0;
page-break-inside: avoid;
width: 100%;
/* center the footer */
left: 50%;
transform: translateX(-50%);
}
}
</style>
<!-- Forsberg Fixed Footer -->
Order Printer Templates
Order Printer Templates
The Order Printer Templates code is a bit different and requires an extra step.
1- First, find the opening template div tag, which looks like this:
<div class="t73842">
It will have a unique number for your template. You must add the table snippet at the top of the article right below the opening div tag. Make sure to collapse each row class to make the following edits easier:
2- Then, place the body contents below or in replacement of the <!--template body--> comment :
3- You must place the footer contents as a row in the <!--footer --> comment on the table. And add a class "footer" to the same row div:
NOTE: At this point, the template will already have the footer placed at the bottom of every page's content.
The script below will keep the footer stuck at the bottom margin of the page, but it will conflict when other templates are printed together.
If you have issues with multiple template printing, you may want to consider dismissing the script's use.
4- Finally, add the script and styles at the top of the code. You can adjust the code's "5" pixel value to a different number, depending on the height of your footer and the distance from the content above it.
<!-- Forsberg Fixed footer -->
<script defer>
function init() {
const placeFooter = () => {
const footers = document.querySelectorAll('#documents').length ? document.querySelectorAll('#documents .card:not(.hide) .footer') : document.querySelectorAll('.footer');
const footerSpaces = document.querySelectorAll('.page-footer-space');
footers.forEach(footer => footer.classList.remove('hide-on-print'));
[...footers].slice(1).forEach(footer => footer.classList.add('hide-on-print'));
const { height } = footers[0].getClientRects()[0];
footerSpaces.forEach(space => space.style.height = `${height + 10}px`);
};
const addCheckboxListeners = () => {
const checkboxes = document.querySelectorAll('#templates_form .checkbox');
if (checkboxes) {
checkboxes.forEach(checkbox => {
checkbox.addEventListener('click', () => {
setTimeout(placeFooter, 600);
});
});
}
};
addCheckboxListeners();
setTimeout(placeFooter, 600);
};
init();
</script>
<style>
@media print {
.footer {
position: fixed;
bottom: 0;
}
.hide-on-print {
display: none !important;
}
}
</style>
<!-- End Forsberg Fixed footer -->
This is how the table layout would look:
You might see an extra blank page in some cases. You can adjust the `${height + 5}px` numeric value. That line of code adds a height to the 'page-footer-space' containers so the body contents don't overlap with the fixed footer.
Due to the way our app generates documents when bulk printing, adding a fixed position to the footer will cause each order's footer to appear on top of every page. The JavaScript code above addresses this issue by removing the repeated footers and keeping the first one for all pages and orders. This limits us to static order details on the fixed footer.
If you still want documents with dynamic order details (such as the order number) in the footer, you will need to print each template separately so that the order-related details don't get mixed in with the fixed footer. For this scenario, you can use the same approach from above, but you will need to print only one order at a time.
If you need help with these steps, we'll be happy to assist you. However, we can only help you with our app's default designs and can't guarantee support for particular design scenarios.
Sample Template
We've created a sample template that you can paste into your Order Printer Pro app, displaying the fixed footer at the bottom of each page of the invoice document. You may copy the one on the bullet below or download the attached file; it's the same code.
Fixed footer code
Fixed footer code
<!-- 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) -->
<!-- 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" -->
<!-- Forsberg Fixed Footer -->
<script defer>
function init() {
const placeFooter = () => {
const footers = document.querySelectorAll('#documents').length ? document.querySelectorAll('#documents .card:not(.hide) .footer') : document.querySelectorAll('.footer');
const footerSpaces = document.querySelectorAll('.page-footer-space');
footers.forEach(footer => footer.classList.remove('hide-on-print'));
[...footers].slice(1).forEach(footer => footer.classList.add('hide-on-print'));
const { height } = footers[0].getClientRects()[0];
footerSpaces.forEach(space => space.style.height = `${height + 20}px`);
};
const addCheckboxListeners = () => {
const checkboxes = document.querySelectorAll('#templates_form .checkbox');
if (checkboxes) {
checkboxes.forEach(checkbox => {
checkbox.addEventListener('click', () => {
setTimeout(placeFooter, 600);
});
});
}
};
addCheckboxListeners();
setTimeout(placeFooter, 600);
};
init();
</script>
<style>
@media print {
.page-footer-space {
height: 30mm;
}
tfoot {
display: table-footer-group;
}
.footer {
position: fixed;
bottom: 0;
page-break-inside: avoid;
width: 100%;
/* center the footer */
left: 50%;
transform: translateX(-50%);
}
}
</style>
<!-- Forsberg Fixed Footer -->
<!--
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>
<tbody>
<tr>
<td>
<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>
<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>
<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-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>
{% 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>
<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_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>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<div class="page-footer-space"></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>
</tfoot>
</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;
max-height: 240px;
}
.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;
}
</style>
This is the default Order Printer Pro Invoice template. If you changed the code or have another template, contact our support to review the possibility of making the changes.