Branding your documents

Your branding is set once, on the Settings page, and reaches every template: as the brand object in Liquid and as CSS variables. The ready-made templates use it out of the box, and your own templates can too.

The page shows a live Preview next to the form: the Invoice template with sample data and your branding, unsaved changes included.

Logo

Select Upload logo and pick a PNG, JPEG or WebP file of up to 1 MB. The logo is stored as soon as you pick it, without the save bar. Logo width sets how wide it is printed.

The ready-made templates show the logo at the top. Without a logo they print your company name, or your shop name when the company name is empty. Remove logo takes it out of future documents. Documents that were already generated keep it.

Colors

Five colors, entered as hex values such as #1a2b3c:

Color	Used for	CSS variable
Primary	Headings and the grand total in the ready-made templates	var(--brand-primary)
Accent and links	Links	var(--brand-accent)
Text	Body text	var(--brand-text)
Muted text	Secondary text such as labels and the footer	var(--brand-muted)
Table lines	Lines between table rows	var(--brand-border)

Typography

Choose a Heading font, a Body font and a Base font size. The fonts come from three groups:

• Built-in fonts - always available and the most dependable choice: Liberation Sans (like Arial), Liberation Serif (like Times New Roman), Liberation Mono (like Courier New), DejaVu Sans, DejaVu Serif, Noto Sans, Carlito (like Calibri) and Caladea (like Cambria).
• Google Fonts - Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Playfair Display, Merriweather, Source Sans 3, Oswald, Work Sans, DM Sans and Space Grotesk, in regular and bold.
• Your fonts - font files you uploaded, see below.

A new store starts with Liberation Sans for both and a base size of 11 pt.

Custom fonts

Under Custom fonts, select Add font files and pick your own font files: WOFF2, WOFF, TTF or OTF, up to 2 MB each. You can select several files at once and add more later, up to 8 fonts. Only upload fonts you are licensed to use.

Each font has a Font name and a Use for setting: Headings and body, Headings only or Body only. A name or a use is saved as soon as you change it. Uploaded fonts then appear under Your fonts in the font selectors.

When you delete a font, or change its use so it no longer fits, a heading or body font that used it goes back to the default, in your brand and in every template.

Company details

Field	Notes
Company name	Printed in the header
Address	One line per row
Tax or VAT ID	Printed under the address
Footer text	For example bank details or a thank-you line

The ready-made templates print these in the header and footer. Leave a field empty to leave it out. With an empty address, the templates print your shop's address from Shopify instead.

Use your branding in your own templates

In Liquid, the values are on the brand object. Multi-line fields keep their line breaks with the br filter:

{% if brand.logo_url %}
  <img src="{{ brand.logo_url }}" width="{{ brand.logo_width }}" alt="">
{% endif %}

<p>{{ brand.company_name }}<br>{{ brand.address | br }}</p>

{% if brand.footer_text != "" %}
  <div class="footer">{{ brand.footer_text | br }}</div>
{% endif %}

In CSS, use the variables:

h1 { color: var(--brand-primary); }
a { color: var(--brand-accent); }
td { border-bottom: 1px solid var(--brand-border); }
.footer { color: var(--brand-muted); }

Every document already uses your body font, base size and text color for the page and your heading font for headings. The full list of values is in Template variables and Liquid.

Different branding for one template

The Branding tab of the template editor sets colors, fonts and font size for that template only. Each setting is decided on its own: a field the template fills wins, a field it leaves empty uses your brand.

• An empty color field shows the brand color as a placeholder.
• A font selector shows Brand default with the name of the brand font.
• Reset to brand removes the template's own values.

The logo and the company details cannot be set per template. They always come from Settings. To print something else in one template, write it into that template's HTML.

Next steps

• Template variables and Liquid - the brand object in full.
• The template editor - the Branding tab in the editor.
• Developer API and MCP - read and change the branding over the API.