Build a Custom Mailchimp Email Template in MJML (Without the Headache!)

Hi everyone! It’s been a while since my last update, and I’m excited to be back. I recently faced some challenges due to a typhoon in my area, which left us without power for almost a month. Thankfully, everything is back to normal, and I’m eager to share new insights with you!

In this post, I want to walk you through my latest project—creating custom email templates for a client using Mailchimp and MJML. If you’re looking for an efficient way to design professional, responsive email templates, this guide will help you get started.

The Project Overview

I was contacted by Airbag Men to design custom email templates for their Mailchimp campaigns. They provided three PSD designs for different types of emails:

1. Latest Videos Update
2. Pricing List Update
3. Product Update

Each template had specific elements they wanted to customize, including images, headlines, subheadlines, text, buttons, and footers. My goal was to develop flexible, editable templates while ensuring they remained email-friendly and responsive across different devices.

Why MJML?

To build these templates efficiently, I used MJML, an open-source framework designed for responsive email development. MJML simplifies email coding by allowing developers to write clean, structured markup, which is then converted into email-compatible HTML.

If you’re familiar with Bootstrap, you’ll find MJML easy to work with. It provides a well-documented guide to help you navigate through the development process.

Steps to Create a Mailchimp Email Template with MJML

1. Understanding the Template Structure

Each email template included:

• A header with a customizable image
• A headline and subheadline
• A main content section (text, images, buttons)
• A footer with social media icons and copyright text

MJML makes it simple to define these sections with its pre-built components.

2. Writing the MJML Code

Once I received the designs, I began structuring the templates using MJML. The main advantage of MJML is that it automatically converts the markup into responsive email-friendly HTML, ensuring a smooth user experience on both desktop and mobile devices.

Here’s a simple example of an MJML structure:

<mjml>
  <mj-head>
    <mj-preview>My Custom Email Template</mj-preview>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-size="20px">Hello, this is your email content!</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

After writing the MJML code, I ran the build script, which converted it into fully formatted HTML.

3. Testing and Optimizing for Mailchimp

Once the HTML was generated, I copied and pasted it into Mailchimp’s design reference tool to ensure it was clean and compliant. Mailchimp provides a CSS inliner tool, which helps adjust styles for better compatibility across different email clients.

Previewing and Customizing the Templates in Mailchimp

In Mailchimp, the email templates were now ready for use. Here’s how it works:

1. Selecting the Template:
   • Mailchimp users can create a campaign and choose one of the custom templates.
2. Replacing Content:
   • Users can update images, headlines, and text with new content.
3. Adding Links:
   • Video thumbnails can be linked to YouTube or other video platforms.
4. Maintaining Consistency:
   • The social media icons and footer are left uneditable to prevent accidental changes.

Final Thoughts

Using MJML for Mailchimp templates significantly streamlined the design process. Some key takeaways:

• MJML simplifies email template development with its structured syntax.
• It ensures responsiveness across mobile and desktop views.
• Mailchimp’s built-in tools help clean and optimize the final HTML before sending.

If you’re building Mailchimp templates, I highly recommend using MJML to make the process more efficient. I’ll be sharing more tutorials soon, especially covering WordPress membership sites and CRM tools.

If you have any questions or need help with your email templates, drop a comment below! See you in the next post!

Tools & Plugins that used

• MJML (Email-friendly HTML framework)
• Mailchimp (Email marketing platform)
• CSS & HTML best practices for emails