Customising PDF invoice, delivery note & credit note templates

Breww allows you to customise your PDF documents to get them on brand.

Invoice details

Simple customisations can be done via our Invoicing Details tool. This allows you to define information, such as how you’d like your company name & address displayed, your bank details, logo, and which document template to use (Breww provides a couple out-of-the-box).

Breww is also powerful enough to allow you to vary these details by customer or customer group. This is really helpful if, for example, you sell under multiple brands or would like to show different bank details to a subset of customers. There’s no limit on how many different sets of invoice details, you’d like to define and of course, there’s always a default to apply to any customer that’s not had a specific one set.

This can be managed in SettingsOrder/Invoice SettingsInvoicing Details.

Custom PDF document templates

Breww even allows you to take this to the next level, with fully customisable PDF document templates, meaning you don’t need to pick one of our pre-built templates if you’d like something entirely different. The sky is the limit on the customisations available here.

:warning: We also highly recommend not using custom templates unless you absolutely must. If you make a custom template, you will not get the new template updates provided by Breww and may miss out on new features. You also may need to keep your template up to date with important legal changes manually (e.g. the recent UK beer duty regulation changes).

If you do make a custom template, please be careful, as you can cause problems rendering documents if you use invalid code.

Here’s a short video showing the power available to you when creating your own templates.

Customising your own invoice & other document templates is considered an advanced feature that will require you to have an understanding of HTML and CSS if you wish to make significant changes. Familiarity with “curly braces template languages”, such as Twig, Jinja or Shopify’s Liquid would be helpful too.

It’s possible for you to make changes to your template which completely break the rendering of your invoices, credit notes & delivery notes, so please be careful and make sure to test your changes before saving them.

You can customise your templates by visiting SettingsOrder/Invoice SettingsPDF Document Templates.

We allow you to define your own HTML-based header, body and footer, along with styling (CSS) and 3 custom image uploads. You can use this to do anything from minor tweaks to layout and colours, or start fresh and build something entirely different from the ground up. Your header and footer will be shown on all pages of a document (if it’s long enough to need more than one page), with the body being displayed just once.

Your document template will be rendered into a PDF and the same template is used for your invoices, credit notes & delivery notes. This means you need to consider all three documents when making a change.

Breww provides many “variables” to you which will be substituted in your template for the relevant value for the document in question. For example, you might like to show a heading at the top of your document that shows the invoice number, for example:

Invoice #123

If you were to write the code for this as:

<h1>Invoice #123</h1>

Then you’ll find that all documents, show the same invoice number (123), even though this isn’t always going to be the case. To resolve this, you can change your code to the following:

<h1>Invoice #{{ document_number }}</h1>

This will cause the {{ document_number }} part to be substituted for the relevant document number. However, this is also not quite right as not all documents are invoices, they may be a sales order, or proforma invoice (if not invoiced yet), or even a credit note, or a delivery note. For this reason, we’d recommend using the following:

<h1>{{ document_title }} #{{ document_number }}</h1>

If you’re making other changes based on the type of document, you can use our handy document type variables, to show and hide complete sections of code based upon the document type, for example, to only show payment bank details on your invoices. The variables you can use for this are:

  • is_invoice - This will be True for invoices and sales orders, but not for other documents
  • is_credit_note - Only True for credit notes
  • is_delivery_note - Only True for delivery notes

For example, you could use the following code:

Hey there, this is your:

{% if is_invoice %}
    Invoice/sales order, please pay us soon
{% elif is_credit_note %}
   Credit note, sorry for the problem
{% elif is_delivery_note %}
    Delivery note, we hope you enjoy the beer
{% endif %}

A full list of all available variables and their values can be found and tested in the document template management tool in Breww.

The Breww team can offer paid support for customising document templates, or you can ask your web developer for help as they should be familiar with the technologies involved. Sadly, due to the complexity of this, Breww’s standard support offering doesn’t include customising document templates for you, however, we can quote on a case-by-case basis to customise for you. Please get in touch via a Support Ticket, with as much detail as possible, if you’d like us to quote. For simple questions that may also be useful for others, please feel free to post below, and we’ll help where we can.

Happy customising :art:

Frequently asked questions

My new logo, or other invoice details, are not showing, why?

If you make changes to your invoice template or invoicing details (e.g. logo, bank details, etc), these will be used on all future invoices (including orders that have already been inputted but haven’t been invoiced yet). When an order is invoiced, all data required to produce that PDF on-demand is saved against the order, this means that the logo, bank details, company legal names, template, etc at the time will always be used, even if you try to view that invoice again in many years time and by then have changed the template, logo, etc significantly.

If you use the invoice template change tester tool, this will let you enter an order/invoice number to view your template changes, however, all details other than the template itself will be as per that invoice. This is fairly obvious for things like the customer’s name and the product lines, but it also applies to things like the logo that is applied to the invoice. If you upload a brand new logo but then test a template against an invoice that was previously raised with an older logo, this will be shown with the logo that applies to that invoice, not the new one. If you enter the order number for a non-invoiced order, this will be tested with “live invoice details”, so you should see the recently uploaded logo on the latest template version.

How do I give a developer/web designer access to edit my templates?

Head to SettingsUsers & security settingsInvite a new user. A permissions group is needed when inviting a new user, so add them to the Settings group. Once they’ve accepted the invite, you can then reduce the permission to just ‘Manage PDF document templates’. The developer can then edit the templates.

Can I use custom fonts?

You can import fonts from Google Fonts in your templates. Breww only supports only Google-provided fonts, fonts from other sources will be rejected.

To use this, add an import line to the top of the Styling (CSS) tab (this example is using the Silkscreen font):

@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400&display=swap');

Then you can reference the font in the applicable places in the rest of the CSS, using the font-family attribute, such as:

body {
    font-size: 16px;
    line-height: 1.5;
    font-family: 'Silkscreen';
}
1 Like

A post was split to a new topic: Adding BBE data on the assigned products to invoice/delivery notes