The solution below requires knowledge of HTML and CSS. If you're not comfortable with that, we've attached an edited template at the end of the article. You may also contact support to get assistance with edits to your existing templates.
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 be bumped down as the content above increases in length, so there isn't a straightforward way to print a fixed footer.
Custom Workaround
Making a few changes to the HTML and adding a few CSS rules may allow you to print the fixed footer at the bottom of every page. If you feel confident with HTML and CSS, 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.
⚠️ Usage Recommendations and Limitations
If you plan on printing orders in bulk, the footer contents will be the same for every page and order.
It's recommended that you print this template alone, and not combined with other templates that don't share the same edits or footer content.
Also, avoid setting as default (blue checkmark). Since that could affect your other templates.
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 to ensure it works correctly.
Order Printer Pro
Order Printer Pro
At the bottom of the page, there's an attachment of an Invoice with the edits already included, for the Order Printer Pro default template.
1- First, find the opening template div tag, which looks similar to this:
<div class="template-000000">
It will have a unique number for your template. You must keep that value and add the class: fixed-footer, next to the template class, ensuring you leave a space in between:
2- 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.
3- 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 that the footer element should keep the "footer" class as in the original code. This is how the table layout would look:
4- Finally, add the following styles to any part of your code. You can adjust the code's "20" mm value to a different number, depending on the height of your footer and the distance from the content above it.
<!-- Shop Circle Fixed Footer -->
<style>
@media print {
[class*="template-"]:first-child [class*="template-"].fixed-footer table tfoot .footer,
.printer-inline-preview:first-child [class*="template-"].fixed-footer table tfoot .footer,
[class*="template-"].fixed-footer table tfoot .footer{
position: fixed;
bottom: 0;
page-break-inside: avoid;
width: 100%;
left: 50%;
transform: translateX(-50%);
display: block !important;
}
.printer-inline-preview [class*="template-"].fixed-footer table tfoot .footer {
display: none !important;
}
.page-footer-space {
height: 120px;
}
}
</style>
<!-- Shop Circle 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:
4- Finally, add the script and styles at the top of the code. You can adjust the code's "180" pixel value to a different number, depending on the height of your footer and the distance from the content above it.
<!-- Shop Circle Fixed footer -->
<style>
@media print {
.printer-inline-preview:first-child .footer,
:not(.printer-inline-preview) body > .printer-preview-content:first-child .footer {
position: fixed;
bottom: 0;
}
.printer-inline-preview:not(.printer-inline-preview:first-child) .footer,
:not(.printer-inline-preview) body > .printer-preview-content:not(body > .printer-preview-content:first-child) .footer {
display: none !important;
}
.page-footer-space {
height: 180px;
}
}
</style>
<!-- End Shop Circle 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.
Note that this approach is adding the same footer (the first) to all pages, regardless of whether you're printing multiple orders or templates. If you plan on printing orders in bulk, the footer contents will be the same for every page and order. It's also recommended that you print this template alone, and not combined with other templates that don't share the same edits or footer content.
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 code listed below or download the attached file; it contains the same code.
Invoice - Fixed footer code
Invoice - 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" -->
<!--
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-0000 fixed-footer">
<table>
<tbody>
<tr>
<td>
<!--template body-->
<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>
<!--footer -->
<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>
@media print {
[class*="template-"]:first-child [class*="template-"].fixed-footer table tfoot .footer,
.printer-inline-preview:first-child [class*="template-"].fixed-footer table tfoot .footer,
[class*="template-"].fixed-footer table tfoot .footer{
position: fixed;
bottom: 0;
page-break-inside: avoid;
width: 100%;
left: 50%;
transform: translateX(-50%);
display: block !important;
}
.printer-inline-preview [class*="template-"].fixed-footer table tfoot .footer {
display: none !important;
}
.page-footer-space {
height: 120px;
}
}
.template-0000 * {
font-family: "Open Sans", sans-serif !important;
font-size: 14px;
font-weight: 300;
line-height: 18px;
box-sizing: border-box;
}
.template-0000 {
margin: auto;
padding: 10px 30px 0 30px;
min-height: 600px;
}
.template-0000 p {
margin: 0 0 7px 0;
}
.template-0000 a,
.template-0000 a:link,
.template-0000 a:visited {
color: #000;
font-weight: 300;
text-decoration: none;
}
.template-0000 .header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
margin-bottom: 30px;
}
.template-0000 .header p {
margin: 0
}
.template-0000 .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-0000 .shop-logo {
max-width: {{ SETTING_shop_logo_width }}px;
max-height: 240px;
}
.template-0000 .order-title {
-webkit-box-flex: 4;
-webkit-flex: 4;
flex: 4;
}
.template-0000 .customer-addresses {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
margin-bottom: 15px;
}
.template-0000 .shipping-address {
flex-grow: 1;
flex-basis: 0;
}
.template-0000 .billing-address {
flex-grow: 1;
flex-basis: 0;
}
.template-0000 .order-details {
text-align: right;
flex-grow: 1;
flex-basis: 0;
margin-bottom: 15px;
}
.template-0000 .address-detail,
.template-0000 .order-detail {
margin: 5px 0 0;
line-height: 1.5;
}
.template-0000 .subtitle-bold {
font-weight: bold;
margin: 0;
font-size: 13px;
}
.template-0000 .order-detail + .subtitle-bold {
margin-top: 15px;
}
.template-0000 .to-uppercase {
text-transform: uppercase;
}
.template-0000 .text-align-right {
text-align: right;
}
.template-0000 .order-table {
display: block;
}
.template-0000 .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-0000 .order-table-header {
margin-bottom: 0;
}
{% if SETTING_show_product_images == true %}
.template-0000 .order-table-header .item-image-and-description {
-webkit-box-flex: 8;
-webkit-flex: 8;
flex: 8;
margin-right: 30px;
}
{% else %}
.template-0000 .order-table-header .item-image-and-description {
-webkit-box-flex: 7;
-webkit-flex: 7;
flex: 7;
}
{% endif %}
.template-0000 .order-table-header .order-table-cell {
white-space: nowrap;
}
.template-0000 .order-table-cell {
-webkit-box-flex: 2;
-webkit-flex: 2;
flex: 2;
margin: 0;
}
.template-0000 .item-image {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
margin-right: 15px;
min-width: {{ SETTING_product_image_size | default: 0 }}px;
}
.template-0000 .item-description {
-webkit-box-flex: 7;
-webkit-flex: 7;
flex: 7;
}
.template-0000 .item-description-line {
display: block;
margin: 0;
}
.template-0000 .item-description p {
margin: 0;
line-height: 1.5;
}
.template-0000 .item-line-price {
-webkit-box-flex: 3;
-webkit-flex: 3;
flex: 3;
}
.template-0000 .missing-line-items-text {
margin: 15px 0;
padding: 0 7px;
}
.template-0000 .barcode-image {
height: 32px;
display: inline-block;
}
.template-0000 .qrcode-image {
margin-top: 15px;
height: 75px;
display: inline-block;
}
.template-0000 .notes-and-pricing {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
margin-bottom: 15px;
}
.template-0000 .notes {
flex-grow: 2;
flex-basis: 0;
}
.template-0000 .notes-row {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
margin: 15px 0;
page-break-inside: avoid;
}
.template-0000 .notes-title {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.template-0000 .notes-details {
-webkit-box-flex: 3;
-webkit-flex: 3;
flex: 3;
margin-right: 30px;
}
.template-0000 .footer {
margin-top: 30px;
text-align: center;
line-height: 1.5;
}
.template-0000 .footer p {
margin: 0;
margin-bottom: 15px;
}
.template-0000 .footer p:last-of_type {
margin-bottom: 0px;
}
.template-0000 hr {
height: 2px;
border-bottom: 2px solid {{ SETTING_shop_accent_color | default: "#e1e1e1" }};
margin: 0;
}
.template-0000 .aspect-ratio {
position: relative;
display: block;
background: #fafbfc;
padding: 0;
}
.template-0000 .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-0000 .aspect-ratio--square {
width: 100%;
padding-bottom: 100%;
}
.template-0000 .aspect-ratio__content {
position: absolute;
max-width: 100%;
max-height: 100%;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.template-0000 .pricing {
flex-grow: 1;
flex-basis: 0;
}
.template-0000 .pricing-row {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: center;
margin: 15px 0;
page-break-inside: avoid;
}
.template-0000 .pricing-title {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.template-0000 .pricing-details {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.template-0000 .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 have changed the code or another template, please contact our support to review the possibility of making the changes.