Emails

Directory structure

Learn about the directory structure in emails

Emails are using similar directory structure to storefronts. Every piece of your theme has it’s own named location. The directory structure is as follows:

Path Description
assets Includes all the custom styles. Every .liquid file will be compiled against settings_data.json. Read more about assets compilation in emails from below.
config Contains settings_data.json
layout Your layouts go here. You can define the layout at the very beginning of your template file with the layout tag {% layout 'layout_name' %}
locales All the translations. Locale for the messages is automatically detected from the message context.
snippets Reusable stuff goes here, snippets can be renderer with the render tag {% render 'snippet_name' %}
templates The actual messages. The contents of this directory is limited.

Assets

Assets in emails are a little bit different from storefront themes. Finqu only supports .scss.liquid and .css.liquid files at the moment. All of these files will be come available in styles global variable. We only recommend using either one of these and keeping your styles simple, we are talking about emails here after all. As for an example, let’s say you have created a main.scss.liquid file in your assets directory. When you make changes to this file Finqu automatically compiles it. This style will be then available in your templates like this:

{%- for style in styles -%}
  <mj-style>
    {%- comment -%}The contents of the main.scss.liquid file compiled.{%- endcomment -%}
    {{ style }}
  </mj-style>
{%- endfor -%}

styles variable is an array of compiled style files.

Config

At the moment settings_data.json can help you organise your code and data. It’s mainly here to make it possible to create graphical editor for the emails in the future.

Layout

Your theme must include theme.mjml.liquid layout file. You can also define other layout files like campaign.mjml.liquid and then you can use it in your template like this:

{%- layout 'campaign' -%}

Locales

For every language you wish to support you must include a locale file. If the matching locale is not found Finqu will default to English. There is an translation tool in the Finqu administration that can help you create correct locales. But if you wish to add new translations you can do so by adding new keys to translation files like this:

locales/en.json

{
    // ...
    "my_key": "My translation"
}

and then you can use it in your template like this:

{{ 'my_key' | t }}

It’s also possible to include variables in the translations like this:

locales/en.json

{
    // ...
    "greeting": "Hi {{ name }}!"
}

and then you can use it in your template like this:

{%- assign name = "Example Name" -%}
{{ 'greeting' | t: name: name }}

which would output

Hi Example Name!

Snippets

These can be whatever you want or you don’t have to use them at all. A simple example would be using snippet as a wrapper to a primary button for easier maintenance.

snippets/cta-button.liquid

<mj-button color="blue">{{ button_text }}</mj-button>

This could then be used in your templates like this:

{% render 'cta-button' button_text: 'Click me!' %}

which would then ouput:

<mj-button color="blue">Click me!</mj-button>

Templates

The heart of these emails and we have dedicated own page for the them. Head there now and learn more about templates in Finqu emails.