How to create a custom email theme ?

In your marketing automation account, in addition to the default templates, you can create your own custom themes.

Creating a custom theme matching your brand identity allows you to build emails or landing pages that strictly follow your graphic charter, with layouts tailored to your needs. The goal: simplify creation, ensure visual consistency, and save time on future campaigns.

There are two methods to create a custom theme in Webmecanik Automation: the visual method (the easiest) and the technical method (via code).

The Easiest Method: Create and Convert an Email in the Builder

If you do not want to code, the simplest way to create a theme is to build your email directly in the visual builder, then convert that email into a custom theme.

Steps:

1. Create a new email in your Webmecanik Automation account.

2. Open the Builder and design your layout from scratch using drag-and-drop: insert your logo, adjust colors, and arrange text blocks, images, and buttons.

3. Once your design is ready, use the native feature to convert the email into a custom theme for future reuse.

👉 For step-by-step instructions, refer to our dedicated guide: How to transform my email into a custom theme?

Advanced Method: Code Using MJML

For technical users who prefer full control over their templates through code, Webmecanik Automation's email builder relies on the open-source markup language MJML.

MJML automatically generates responsive HTML code across major email clients. If you have basic HTML and CSS knowledge, writing MJML is straightforward.

Steps:

1. Draft your code: Use the online editor at https://mjml.io/try-it-live/.

2. Build your theme: Refer to the official MJML documentation to construct your layout.

3. Save your file: Save your completed template file using the following naming convention: yourtemplatename.mjml.twig.

4. Package the theme: Compress the files into a standard .zip archive (see structure guidelines below).

5. Import the theme: Upload the .zip file in Webmecanik Automation (Themes > Install a theme).

6. Apply the theme: Create a new email and select your imported template.

⚠️ Important: All styles must be inline. The <mj-head> and <mj-style> tags are not supported.

Theme Folder Structure (.zip File)

When importing a theme via a .zip file, your folder hierarchy must strictly comply with the platform requirements to avoid import errors.

Key rules:

• Directory structure: Keep the expected file/folder architecture (html subfolders and configuration files).

• The config.json file: Located at the root level, it defines the theme name and active features ("page", "email", or "form").

• Zipping instructions: Zip the contents of the folder, not the parent folder itself.

  • Example: If your working folder is named MyTheme, open MyTheme, select all files inside (including config.json), and archive those selected items. The config.json file must sit at the root of the .zip file.

Ready-to-Use Example

A sample theme file is attached directly to this article. Download it, review its structure, and use it as a reference or starting template for your custom developments.