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

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.