Email Directory Structure
Finqu email themes use a structured directory layout, similar to storefront themes. Each part of your email theme has its own dedicated folder. Understanding this structure helps you organize, maintain, and extend your email templates efficiently.
Overview
Folder | Description |
---|---|
assets | Includes all custom styles. Every .liquid file will be compiled against settings_data.json . See below for more details. |
config | Contains settings_data.json for organizing code and data. |
layout | Layout files for emails. Define the layout at the beginning of your template with the layout tag. |
locales | All translations. Locale is automatically detected from the message context. |
snippets | Reusable components. Render snippets with the render tag. |
templates | The actual email messages. The contents of this directory are limited to supported template types. |
assets
Assets in emails are used for custom styles. Finqu currently supports .scss.liquid
and .css.liquid
files. All compiled styles are available in the styles
global variable. We recommend keeping styles simple for email compatibility.
Example:
Suppose you have a main.scss.liquid
file in your assets directory. When you update this file, Finqu automatically compiles it. The compiled styles are available in your templates like this:
{%- for style in styles -%}
<mj-style>
{{ style }}
</mj-style>
{%- endfor -%}
The styles
variable is an array of compiled style files.
config
The config
folder contains settings_data.json
, which helps organize your code and data. This file is mainly for future graphical editors for emails, but you can use it to store settings now.
layout
Your theme must include a theme.mjml.liquid
layout file. You can also define additional layouts, such as campaign.mjml.liquid
, and use them in your templates:
{%- layout 'campaign' -%}
locales
For every language you wish to support, include a locale file (e.g., en.json
). If a matching locale is not found, Finqu defaults to English. You can add new translations by adding keys to the locale files:
Example:
locales/en.json
{
"my_key": "My translation"
}
Use in template:
{{ 'my_key' | t }}
You can also include variables in translations:
locales/en.json
{
"greeting": "Hi {{ name }}!"
}
Template usage:
{%- assign name = "Example Name" -%}
{{ 'greeting' | t: name: name }}
Output:
Hi Example Name!
snippets
Snippets are reusable components. You can use them to simplify maintenance, such as creating a button snippet:
snippets/cta-button.liquid
<mj-button color="blue">{{ button_text }}</mj-button>
Usage in template:
{% render 'cta-button' button_text: 'Click me!' %}
Output:
<mj-button color="blue">Click me!</mj-button>
templates
Templates are the core of your email theme. Each template represents an email message. For more details, see the dedicated documentation on templates.
Best Practices
- Keep styles minimal and email-friendly.
- Use layouts to maintain consistent structure.
- Organize translations for all supported languages.
- Use snippets for reusable components.
- Store configuration in
settings_data.json
for future compatibility.
Example Directory Structure
email-theme/
├── assets/
│ └── main.scss.liquid
├── config/
│ └── settings_data.json
├── layout/
│ └── theme.mjml.liquid
├── locales/
│ └── en.json
├── snippets/
│ └── cta-button.liquid
└── templates/
└── order-confirmation.mjml.liquid
This structure ensures your email themes are organized, maintainable, and ready for future enhancements.