Customising the order PDF

When viewing an order you will see a link to print the order.

This will open up a PDF file containing the order details, in a printer friendly format.

You can add your logo and details to this PDF if you wish to (like in the example below).

Select 'settings' from the left menu and then 'order sheets'.

Here click the 'choose file' button to select your logo from your computer's hard drive (your logo must be in JPG, JPEG or PNG format and we'd recommend no more than 600px in width).

You can add your address/details in the bottom right section.

You can also add in a return address to the order PDF.

The return address is shown directly beneath the delivery address (where it is displayed in the bottom left corner of the PDF), as indicated in the example below.

To enter a return address, enter text in the 'return address' field, as shown on the example below.

Click 'save changes' when you're finished and check how the PDF looks by clicking the 'preview invoice' button in the bottom right.

Further customisation

The order PDF system allows you to also change the colour used by selecting the new colours from the colour picker.

You also have full access to the HTML & CSS that creates the order PDF.

Use the menu at the top of the PDF editor to select the section that you would like to edit. Don't forget to save the changes made to each section before proceeding to a new section.

Creating new themes/testing

You can create a new PDF theme by clicking the 'create theme' in the top right.

When you create a new theme you'll need to base this on an existing theme by selecting the base theme from the drop down.

When you've clicked 'create' the new theme will show beneath your live theme.

You can make changes to the theme and click the 'preview invoice' button at the bottom to see what your PDF will look like with the new theme.

When you are ready you click the 'make this your live theme' link to make the theme live.


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 }} - this will display the product image.

This 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: center; 
    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 %}

Prices including VAT

By default, your order PDF will display product prices excluding VAT (with a VAT breakdown in the order totals section). You can change this to instead show prices including VAT by using the two variables shown below.

product.price_including_vat - this will output the price, including VAT, for a single quantity of the product.

product.total_including_vat - this will output the price, including VAT, for the quantity of the product ordered x product price.

Refunds

Your order PDF may not be displaying refunds. To add them in you can use the code shown below.

{% for refund in order.refunds %}
    {{ refund.name }}
    {{ format_price(refund.value) }}
{% endfor %}

Payment method

The payment method used to pay for an order (e.g. PayPal or SagePay) can be returned using the variable shown below.

order.payment_method

Product bundles

If you are using the product bundles APP then the consitutent products of a product bundle won't be displayed on the order PDF unless you add in the code for them to do so. This is described in more detail at the bottom of the help guide about product bundles.