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:

ShopWired offers 3 different PDF themes which you can choose from, install in your ShopWired account and customise to your requirements. You can have multiple PDF themes installed in your account at any one time.

To customise your PDF theme, install a new theme and add your company information to it, select Settings > Order Invoices from the menu, and edit your theme's settings.

• Selecting and installing a PDF theme
• Customising the PDF
• Customisation settings
• HTML & CSS
• Template and margin sizes
• Additional fields/values

Selecting and installing a PDF theme

When you created your ShopWired account, ShopWired automatically installed a PDF theme for you. For accounts created up until 10th April 2024, the Basic theme was installed. For accounts created on or after 10th April 2024 the Standard theme is installed.

If you're currently using the Basic theme, ShopWired recommends upgrading to one of the other available themes. Whilst the Basic theme is still available for new accounts to install, it's use on ShopWired is now deprecated.

To install a new theme in your ShopWired account select the create a new theme option and select the theme that you'd like to install.

Customising the PDF

Each PDF theme comes with a range of customisation options which you can use to adjust its layout and colours, add your logo and additional information about your company (such as your VAT number), and customise what information about orders and the products in the orders is displayed.

To make your changes to the PDF use the 'customise' tab and click to save your changes.

An explanation of each of the customisation options is available in the help section below.

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

Your logo file must be either a PNG or JPG. ShopWired recommends uploading a logo no more than 400px in width.

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

You can also change the colours for various elements on the PDF using the colour settings:

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:

Customisation settings

An explanation of each setting available within PDF themes.

Invoice logo

Upload a logo to display on the PDF. ShopWired recommends uploading a logo up to 400px width. Landscape logos display better than square or portrait logos.

Show delivery date

Display the customer's requested delivery date for their order.

Show payment method

Display the customer's payment method (for example ShopWired Payments or PayPal).

Show transaction ID

Display the transaction ID provided by the payment gateway - this is not available for all payment gateways.

Show SKU in product table

Display the product/variation SKU code in the table of products the order contains, this will appear as the first column in the table.

Show HS code

Display the HS code for the products the order contains, this will appear benath the product name.

Show VAT % in product table

Display the % VAT rate applied to each product.

Product price display

Display product and shipping prices either including VAT or excluding VAT. Changing this setting also affects the wording of the VAT line total displayed in the order totals.

Show VAT total amount in product table

Display the total amount of VAT applied to each product (VAT amount x quantity).

Product sort order

Change the order in which products appear in the table of products.

Footer height

Change the height (vertical space) that the footer occupies in the PDF. You can adjust this setting depending on the amount of information the footer contains (depending on your settings).

Show phone number

Display your phone number, the phone number displayed is the one entered into your ShopWired account on the company information page.

Show email address

Display your email address, the email address displayed is the one entered into your ShopWired account on the company information page.

Company number

Display your company number.

VAT number

Display your VAT number.

IOSS number

Display your IOSS number.

Colours

Use the various colour settings to set the colour of text and other elements. The exact colour settings available depend on your theme.

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 %}

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.

Menu Close

Get Support From ShopWired Close

Send A Message