Templates

Templates set the design and wording of the PDFs and emails SparkLayer creates, such as invoices, quotes and purchase approval emails. They're written in Liquid (opens in a new tab), and each one receives the data listed under Available data.

The templates

Only the templates above can be used. Any other files uploaded to a theme are discarded, including supporting files such as images and fonts.

Create and upload a template

1. In the SparkLayer Dashboard, go to Settings,Templates (opens in your SparkLayer Dashboard in a new tab)Opens in your SparkLayer DashboardTakes you straight to Settings › Templates to do this now, whichever platform you're on. Opens in a new tab..
2. Click Create template. SparkLayer creates a template theme for you to edit.
3. Add only the files you'll change, and edit them in the SparkLayer editor. Click Save to create a revision. To go back, open a previous revision from the Revisions drop-down and save it.
4. For bigger changes, download the template as a ZIP file, work on it with your own tools, then zip it up and upload it.

A new template is empty, so it falls back to SparkLayer's core templates and language files until you add files to it. Once you add a file, it's no longer updated from the core templates: if a new feature changes a core template, copy the change into your file. See Templates in the Help Center for more.

Template markup and Liquid

Templates are written in Liquid (opens in a new tab) and have access to most Liquid tags and filters, plus the helper filters below.

Add styling in the template, in a style element or inline styles. All styles are inlined when the template is rendered, for better compatibility with email clients.

The email templates are tested in modern web-based email clients such as Gmail. Older email clients, such as desktop versions of Outlook, aren't supported. Test your custom email templates, because email clients often handle modern HTML and CSS badly.

Filters and blocks

• Currency
• Translate
• Localised date format
• Country from country code
• Template sections

Currency

Use the currency filter for monetary values. It renders the currency with the right formatting for the locale.

{{ "9.99" | currency: "gbp" }}

£9.99

To change the currency formatting, pass one of these options:

• display_none
• display_code
• display_symbol (default)

{{ "9.99" | currency: "gbp", "display_code" }}

GBP 9.99

The filter also has a shorthand alias, c, which works the same way.

Translate

Use the translate filter to translate text in a template. The theme needs a language file with the translation strings. See Internationalisation and translations for how to add language files.

{
  "example": {
    "heading": "Welcome to SparkLayer!"
  }
}

{{ "example.heading" | translate }}

Welcome to SparkLayer!

The filter also has a shorthand alias, t, which works the same way.

To insert values into a string, add numbered slots to the string and pass the values as arguments to the filter:

{
  "example": {
    "heading": "Dear ${1} of ${2}"
  }
}

{{ "example.heading" | translate: "Jeremy Sparks", "SparkLayer" }}

Dear Jeremy Sparks of SparkLayer

This filter translates using the store locale from the merchant data (data.merchant), falling back on the en translation file if no translation is found for the respective locale.

Localised date format

Use the ldate filter to format dates for a locale. By default, it uses the store's locale from the merchant data (data.merchant). To use another locale, pass it as a parameter.

{{ "2024-10-22T16:18:02.196Z" | ldate }}

22/10/2024

With a locale:

{{ "2024-10-22T16:18:02.196Z" | ldate: "fr-CA" }}

2024-10-22

Country from country code

Use the country filter to show a country name from its country code. This helps with address data, which stores the country code rather than the name.

{{ "gb" | country }}

United Kingdom

Country names are always returned in English, whatever the store's locale.

Template sections

Use the section tag to include a section template. Only the section templates listed under The templates are supported; you can't add custom sections.

<main>
    {% section email-header %}
    <p>Content</p>
    {% section email-footer %}
</main>

<main>
    <header>
        <h1>Hello World</h1>
    </header>
    <p>Content</p>
    <footer>Copyright Year</footer>
</main>

Internationalisation and translations

You can add language JSON files to a theme to translate its templates. Name each file with a language code (such as en or fr) that matches the locale used by your store. The translations in these files are available through the translate Liquid filter.

By default, the filter uses the store's locale. If your language files have no translation for a key, it falls back to SparkLayer's core language files, with en as the final fallback.

Available data

Templates get their data through the data Liquid variable, for example data.merchant.store_name.

The data varies by template, but every template has the store details (data.merchant). This object holds the store's general information, which you can change in the SparkLayer Dashboard settings.

Next steps

• Template objects: every object and property available to templates.
• Templates in the Help Center: what merchants can change with templates.
• Languages and international: the languages SparkLayer supports.