Getting started with Quaderno templates

What are templates?

"Template" is the word we use for how documents are structured in Quaderno. Every receipt, invoice, and credit note is the result of filling a template with your information, making it look beautiful!
To use our advanced template system, Quaderno Templates, a little knowledge of HTML comes in handy. We have tried to make our guides as user-friendly as possible, including a step-by-step guide to create your own template.

How do they work?

Quaderno templates are based on the Liquid templating engine created by the clever people over at Shopify.
If you have some HTML know-how and a rough idea of how coding works then you’re well up to the challenge of creating your own templates using the Quaderno system. If not, we have lots of examples to help you get started, including step-by-step instructions.
To learn about Liquid, we recommend checking out the basics page from Shopify, but here’s a quick rundown.
Templates use a combination of tags, objects and filters to put your details (dynamic content) into the templates that structure your financial documents behind the scenes.


Tags are the brains of your document, denoted by curly braces and percentage signs: {% and %}. They let you make decisions in a document, like to create a temporary variable in your document, loop over a series of objects, or even whether to show a logo or not:
{% if account.logo_url != "" %}
    <img src="{{account.logo_url}}" width="150" />
{% endif %}
You can customize everything with Quaderno Templates!
If the account object property logo_url is not equal (!=) to “” (meaning that it’s not empty), then you put an image in with the logo_url as the src (source). Boom! Your lovely logo in pride of place on your document.
Note that the tag itself does not show in the document at all – only the img between the tags will show, if that account.logo_url isn’t an empty string!


Objects (like the above account object) have attributes that you can access (like logo_url) to display information in your document. They basically tell Quaderno where to show content on a document, so, unlike tags, objects accessed in this manner are visible (unless hidden by surrounding tag conditions). They are always wrapped by double curly braces: {{ and }}.
Take an item, for example (and note the tag ({% for item in document.items %} ... {% endfor %} that makes looping through all the items happen!):
    {% for item in document.items %}
        <td class="right">{{item.unit_price}}</td>
        <td class="right">{{item.subtotal}}</td>
    {% endfor %}
Looping over products example.
Just like that, you’ve enumerated every item in the document (like a list of products on an invoice), displaying their description, quantity, unit price and subtotal!


Filters are useful tools to modify the output of object properties, making them a little better looking, easier to read or otherwise useful. They are used within an object and are separated from the object’s target (item.unit_price, for example), by a single pipe character: | (though usually you put a space in either side of the pipe for clarity as well).
For example, financial amounts are stored in the background as numbers of cents (or pence) so that no decimal rounding errors can impact your bottom line. That’s great, except when you want to display those numbers on your documents – people aren’t used to seeing €10 written as 1000 cents! With filters, you can handle this, like so:
<strong>{{ | money }}</strong><br>
The money filter converts that number in cents to a string (like 1000 -> “1000” as characters instead of numbers) based on the currency of the document.
You should check the official list of Liquid filters, they're really useful. You can also create your own, here are a few extra filters you can use with Quaderno templates:
Quaderno Templates specific filters
What it does
Use example
Example output
Converts the country code to a name, in the user’s language
{{ | country_name }}
Converts the given number into a string based on the amount’s currency
{{ | money }}
250 USD
Format a number to 2 decimal places
{{ item.quantity | precision }}

Some Quaderno-specific tips

Here are a couple of tips to help you get the most buttery-smooth results from your Quaderno templates:
  • Your canvas must be 800Ă—1131 pixels in size
  • Your logo space must be 308Ă—125 pixels in size
  • If you want to get the maximum quality when you print your invoice at 300dpi, your logo image file must be 945Ă—380 pixels.
And apart from that, you’ll want to check out the related article on the special variables and labels that Quaderno templates have available.

This is awesome, how can I learn more?

Great to see you so enthusiastic! To reiterate, it’s really worth spending a little time getting to grips in more depth with the Liquid syntax.
After that (or alongside if you’re really in a rush), we’ve got a sweet in-depth walkthrough tutorial for you to get stuck into that gets you into how Liquid is specifically applied to Quaderno documents and information, and walks you through creating a Quaderno template from scratch.
Keep rocking the free world, intrepid Quadernonaut!