HTML customisations to invoice PDF themes
If you want to make advanced customisations to the order PDF, you can do so using the HTML & CSS of the PDF theme. Use the menu at the top of the PDF theme editor to choose which section you would like to edit.
Some example customisations are described below.
Template and margin sizes
Template and margin sizes
By adding some code to the Settings tab of the file, you can customise the size of the PDF and also the sizes of the margins within it.
Changing the size of the PDF
To be able to change the width and height of the PDF, copy this code into the settings tab.
"_page_height": {
"label": "Template Height",
"type": "text",
"note": "in mm",
"value": ""
},
"_page_width": {
"label": "Template Width",
"type": "text",
"note": "in mm",
"value": ""
},
You will then be able to enter your own custom width and height in the Customise tab.
Changing the margins in the PDF
To be able to change the margins in the PDF, copy this code into the settings tab.
"_margin_top": {
"label": "Margin Top",
"type": "text",
"note": "Enter width in mm",
"value": "50"
},
"_margin_bottom": {
"label": "Margin Bottom",
"type": "text",
"note": "Enter width in mm",
"value": "50"
},
"_margin_right": {
"label": "Margin Right",
"type": "text",
"note": "Enter width in mm",
"value": "50"
},
"_margin_left": {
"label": "Margin Left",
"type": "text",
"note": "Enter width in mm",
"value": "50"
},
You will then be able to enter your own custom margins in the Customise tab.
Additional fields/values
Additional fields/values
When editing the HTML/CSS for the order PDF, there are some fields/values connected with the order that aren't displayed by default. You can use the variables shown below to display the appropriate values from the order.
Product image
{{ product.photo_url }} will display the product image.
This variable is only available within the CSS file, so we suggest that you add the following:
Within the HTML add
<div class="product-photo p{{ order.id }}-{{ loop.index }}"></div>Within the CSS add
.product-photo {
background-repeat: no-repeat;
background-position: centre;
background-size: cover;
border: 1px solid #000;
width: 100px;
height: 100px;
}
{% for product in order.products %}
.p{{ order.id}}-{{ loop.index }} {
background-image: url('{{ product.photo_url }}');
}
{% endfor %}
Product bundles
Product bundles
If you are using the product bundles app, the constituent products of a product bundle won't be displayed on the order PDF unless you add in the code for them to do so.
Quote PDF
Quote PDF
The code used to generate the quote and order PDFs is the same, so to modify the display of the PDF depending on whether it is being generated for an order or a quote, use the order.is_quote variable, which will return true for quotes.
