Menu Close

Get Support From ShopWired Close

All systems fully operational

Subscribe To Updates
Prefer To Live Chat? Chat directly with ShopWired support Available from 9.00am to 10.00pm Monday to Friday Quickest response time
Send A Message
Response within 24 hours

Menu Close

Menu

Customising the order PDF

When viewing an order you have the option to print it:

When you select Print a PDF containing the details of the order will open in a new tab for you to be able to print:

You can customise aspects of the contents of this PDF by selecting Settings > Order Invoices from the menu, and editing your live theme's settings.

• Customise
• HTML & CSS
• Template and margin sizes
• Additional fields/values


Customise

In the 'Customise' section you can add your company's logo, details and return address to the order PDF:

To add your logo select Choose file and upload your logo from your computer's hard drive:

The logo can be seen in the top left of the order PDF.

Next, you can change the height of the footer and add text to the right side of footer, such as your address or company information:

To add a return address enter it in the ‘Return Address’ box:

This appears on the bottom left of the PDF just below the delivery address for the customer.

You can also change the colours for the text and the lines on the PDF:

Either type the HTML code for the colour you want into the box or click the current colour to open a colour picker.

You can preview how your PDF will look with your changes by selecting preview invoice at the bottom of the section:

Once you have finished customising your order PDF select save changes.


HTML & CSS

If you want to make further changes to the order PDF, you have full access to the HTML & CSS of the file. Use the menu at the top of the PDF creator to choose which section you would like to edit:

Once you have made changes to any section select save changes before moving on to another section.


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:

"_page_height": {
        "label": "Template Height",
        "type": "text",
        "note": "in mm",
        "value": ""
    },
    "_page_width": {
        "label": "Template Width",
        "type": "text",
        "note": "in mm",
        "value": ""
    },

Then create a new line beneath the 'footer height' setting (if you have not previously altered your settings for the PDF, the new line should be created on line 14). Then paste the code.

This should look something like this:

Then select save changes. 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:

"_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"
    },

Then create a new line, either beneath the 'footer height' setting (if you have not previously altered your settings for the PDF, the new line should be created on line 14) or, if you have also added the code to be able to change the size of the PDF, after the 'page width' setting (line 26). Then paste the code and select save changes.

You will then be able to enter your own custom margins in the 'Customise' tab.


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 won't display refunds by default. To add them use this code:

{% 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 this variable:

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 here.


Quote PDF

Because the code used to generate the quote and order PDFs is the same, you will need to use some code if you only want to change the appearance of the quote PDF.

The variable order.is_quote will return true if the PDF is being generated for a quote.

Because quotes do not have a reference or status (like 'dispatched), we'd recommend hiding these sections from displaying for quotations. You can do this by updating the HTML code that your PDF uses, as shown in the example below:

Please note: For accounts created after 1st February 2018 this will not be necessary as the latest PDF template has this change included.

In the HTML tab of the PDF customisation page locate this code:

<div class="column">
    <b>Invoice Number</b>
    {{ order.reference }}
</div>
<div class="column">
    <b>Invoice Status</b>
    {{ order.status|title }}
</div>

Change this code to the below:

{% if not order.is_quote %}
    <div class="column">
        <b>Invoice Number</b>
        {{ order.reference }}
    </div>
    <div class="column">
        <b>Invoice Status</b>
        {{ order.status|title }}
    </div>
{% endif %}

This will hide the section from displaying if the PDF is generating a quote. Don't forget to save your changes and test.

If you do not feel comfortable in changing the code yourself, the ShopWired team can make the change for you, but a small charge may be applicable to cover the coding time. Please contact us if you would like us to do this for you.

Alternatively, on the PDF customisation page click the 'create new theme' button in the top right to create a brand new PDF layout based on our most up to date template.