# 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:

```liquid
{%- 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:

```liquid
{%- 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`
```json
{
  "my_key": "My translation"
}
```

Use in template:
```liquid
{{ 'my_key' | t }}
```

You can also include variables in translations:

`locales/en.json`
```json
{
  "greeting": "Hi {{ name }}!"
}
```

Template usage:
```liquid
{%- 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`
```liquid
<mj-button color="blue">{{ button_text }}</mj-button>
```

Usage in template:
```liquid
{% render 'cta-button' button_text: 'Click me!' %}
```

Output:
```html
<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.