Creating a custom email template with mailchimp

From May 15th 2019, in order to follow this tutorial, you must have pay the Standard Plan of Mailchimp (14.99$ / month).

So, in order to avoid the fee, just ask for the client to have a standard plan for mailchimp, and ask the client to invite you.

Here are the steps.

Step 1. Select a starting point for your template

First of all, make sure that you select a starting point that matches as much as possible to the template you want to design. To do so, go to Templates and click the Create Template button on the top right.

Step 2. Customize your template

You can now change the selected template so that it matches the desired as much as possible. A typical workflow would be this:

1. Background colors for every section (eg. Preheader, Header, Upper Body, Columns, Lower Body, Footer, etc.)
2. Text colors for every section. Use headings (h1, h2, h3, h4) so that you can change the typography once from Page Design section.
3. Use mailchimp merge tags where possible, eg. for the unsubscribe link, for the forward to a friend link, etc.

When you are set, click the Save and Exit button on the bottom right and give a name to your template.

Here is a list of useful merge tags:

You can see all the available merge tags here.

Responsive fixes

If you have HTML custom block code, add classes on your divs and then add to its bottom this code for responsiveness:

<style>
@media only screen and (max-width: 480px){
.table_4_cell {
padding: 10px !important;
}
}
</style>

Step 3. Export your template

It’s now time to export your template as HTML.

Step 4. Fine tune your template

Open your template with your default code editor and make fine tunings with code.

If you want to add your own images (for example for social icons, like facebook, twitter, etc.), upload them to your mailchimp content studio and use these links.

To do so, go to Templates and click the Content Studio button on the top right.

To add responsive CSS, you can use the following query:

@media only screen and (max-width: 480px){
....
}

Step 5. Create Editable Content Areas with Mailchimp’s Template Language

When coding custom templates with Mailchimp’s template language, use our recommended naming conventions to identify which areas of your template you would like to be editable from the Design section of the Campaign Builder. We recommend limiting the number of editable spaces to keep your code clean. It is important to create a unique name for each attribute value and to be consistent so you don’t lose your content if you switch templates while building your campaigns.

In order to see which areas are editable, just open your template and click the Edit Design button on the screen bottom.

Editable Text Area

To create editable text areas, add the attribute within the element that contains the text. This will usuall be a table cell, for example:

<td mc:edit="text1">My editable text</td>

Editable Image Area

To create editable image areas, add the attribute within an image element. Avoid creating editable images within editable content areas to keep your code clean.

In the following example, the attribute is added to an image element.

<img mc:edit="image1" style="max-width:600px;" />

For some reason, when I add the mc:edit to an image, it breaks my design at mailchimp design editor and preview. To avoid this add the same max-width as image’s width.

<img mc:edit="image1" width="564" style="max-width:564px;" />

Editable Image Card

There’s no way to create an editable image card, but you can add 2 editable attributes, one for the image and one for the text of the image card.

Repeating Content Area

Add the mc:repeatable attribute to any area that includes an mc:edit attribute to create a content block that can be repeatedly added to a template. Repeatable content areas are hidden by default so they only appear in a template if you add them within the Campaign Builder.

Step 6. Import your email template in your account and test it

To do so:

1. Go to Templates and click the Create Template button on the top right.
2. Click the Import HTML button.
3. Select your HTML file.
4. Click the Preview and Test button on the top right and select the Send a test email. Check that all appears as expected in your desktop or mobile phone.

Step 7. Share the Email Template

In Mailchimp, you can share your templates with other accounts right from the Templates page. The Share feature makes it simple to send a Mailchimp template from your account to someone else’s Mailchimp account, without having to export or import the template’s HTML code.

You can see the related tutorial here.