Sufio offers fully customizable document templates that let you show all the necessary information while ensuring the design of your documents stays consistent with your brand.
Whether you’re looking to fine-tune your template or create one for from scratch for your brand, here are ten things worth knowing about templates in Sufio.
This article will take about five minutes to read. We recommend reading it all the way through first, then exploring the linked content.
Sufio document templates are built on Jinja, a popular Python templating language.
This templating language has a structure similar to Shopify’s Liquid. If you’re used to working with Liquid, you’ll feel right at home customizing Sufio templates.
A single template file named index.html is used to generate documents of all types, such as invoices or credit notes.
You can use conditionals in the template to display specific content only for certain document types.
Properties are data elements displayed on the documents.
All documents—including those created manually in Sufio—have three property objects available: document, client, and account.
These objects contain information about the document, its customer, and your company, respectively.
For documents created from store orders, an additional order object is available. This object allows you to access various properties from the order in your online store.
Most properties in Sufio are implemented as node objects.
Besides their underlying property values, node objects have attributes with additional information about the property, such as its formatted value, title, unique ID, or type.
The text attribute automatically displays the formatted values of properties. This comes in handy when creating documents in multiple languages or currencies, since the formatting of dates or numbers depends on the locale.
The title attribute is used to output the property's title, translated into the document's language.
Here’s an example of how different node attributes can be used in a template.
Related properties that are typically displayed together in a document are organized into groups of properties.
For example, dates like issue date and due date make up the document.dates group.
Instead of displaying each property separately in your template, use iterators over property groups. That way, your documents will only display the properties that are meant to be shown—based on the document type, your settings, and whether the properties have a value.
Filters let you format, style, or manipulate property values.
Most filters used by Sufio templates are similar to those in Shopify’s Liquid. However, some filters might use different names—for example, upper instead of upcase.
But don’t worry; you can search for a filter using either of its names in our template editor.
Some filters accept additional parameters to change their behavior.
Please note that while Liquid uses a colon : to specify filter parameters, Sufio uses named parameters inside parentheses (). This allows you to use different parameters with a single filter.
A single stylesheet file named styles.scss defines styles of all documents. You can customize this file in the template editor, too.
You can also use various predefined style functions and mixins to ensure a cohesive look for your documents, no matter the display language or whether the documents are viewed online or downloaded as PDFs.
The document has two main sections: container and footer.
The container includes most of the information displayed on the document—from your company and customer addresses, payment terms, and dates to the document lines and totals.
The footer typically contains your company’s contact information.
You can anchor the footer to the bottom of the page using the footer style mixin in your stylesheet file. For multi-page PDF documents, the footer can appear at the bottom of each page or only on the last page, depending on the selected template.
The document is typically laid out in columns—for example, with one column for your company’s information and address, and another for the customer’s.
You can use the generate-columns style mixin to create a column layout in your stylesheet.
The layout then helps you organize the information in the document.
Sufio generates PDF documents using a professional library with excellent support for the latest CSS styles. Still, you should always preview any changes you make to your template just to be on the safe side.
Our powerful template editor allows you to preview both the online and PDF versions of your documents easily. You can even view documents of different types or languages.
Clicking the Save button in the template editor saves the changes and updates the preview. However, it doesn’t affect the documents your customers see or receive in emails just yet.
Once you’re satisfied with your edits, click Publish to apply the updated template to all documents in your account, including previously created documents.
No need to panic if you publish a change you don’t like, though—our version control lets you easily revert back to any previous version if needed.
Need help?
Contact our experienced technical support! We will be happy to help you set up your document templates the way you need.