Integrate with Mailchimp Email.

Mailchimp

One of the email market leaders, Mailchimp, gives us fantastic support for making our email template customisable from within its email campaign editor.

How to create Mailchimp email templates

Firstly, lets go through the basics of the Mailchimp language. Mailchimp editable regions are areas of your email template that Mailchimp recognises as being editable. You simply tag an element and Mailchimp does the rest. Anything that isn't tagged as a Mailchimp editable region will be locked down; this is handy to stop areas being edited that should remain consistent from one email to the next.

Mailchimp content regions we'll cover:

  • Repeatable Sections
  • Variant Sections
  • Hideable Sections
  • Editable Content Sections
  • Editable Image Regions
  • Editable CSS Options

Repeatable, Variable and Hideable Sections

To give the most customisation to your email template from within Mailchimps' email editor, you will need sections that can be repeated, changed and be hiden. This allows the user to create multiple layouts using the same email template.

Add the below tags to a <td>, <tr> or <div> element.

Mailchimp repeatable tag: mc:repeatable="repeatable group name"

Mailchimp variant tag: mc:variant="unique variant name"

Mailchimp hideable tag: mc:hideable

In the Cogentro email template, we make use of these tags by adding them to our section blocks in the opening <tr>. This makes each section within our email repeatable, with the choice to choose the design of each section block. So make it repeatable, with a group name of 'Header Styles', then for each section block give them a unique choice name, like 'Header Style 1'. See the example below:


<!-- // SECTION BLOCK // -->
<tr mc:repeatable="Header Styles" mc:variant="Header Style 1" mc:hideable>
    <td align="center" valign="top" class="Section">
        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="SectionBlock" bgcolor="#ffffff" style="width: 600px;" align="center">
            <tr>
                <!-- // CONTENT CONTAINER // -->
                <td class="Section1padding" align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td align="left" valign="top" class="Section1Content Responsive">
                                Email content
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- // CONTENT CONTAINER // -->
            </tr>
        </table>
    </td>
</tr>
<!-- // SECTION BLOCK END // -->


<!-- // SECTION BLOCK // -->
<tr mc:repeatable="Header Styles" mc:variant="Header Style 2" mc:hideable>
    <td align="center" valign="top" class="Section">
        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="SectionBlock" bgcolor="#ffffff" style="width: 600px;" align="center">
            <tr>
                <!-- // CONTENT CONTAINER // -->
                <td class="Section2padding" align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td align="left" valign="top" class="Section2Content Responsive">
                                Email content
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- // CONTENT CONTAINER // -->
            </tr>
        </table>
    </td>
</tr>
<!-- // SECTION BLOCK END // -->

Editable Content Sections

Now that we can duplicate our email section blocks, let's make content within the blocks editable.

Add the below tag to a <td>, or <div> element. You can also add the editable tag to font elements if you want to reduce down the editing to one element. Make sure its' name is unique.

Mailchimp Content Sections: mc:edit="unique_name"

In the Cogentro email template, we make use of this tag by adding it to either the final <td> element (see below), or wrapping the editable content in a <div> within the final<td>. You cannot have content regions inside other content regions, so sometimes wrapping them in a few divs is helpful.


<!-- // SECTION BLOCK // -->
<tr mc:repeatable="Header Styles" mc:variant="Header Style 1" mc:hideable>
    <td align="center" valign="top" class="Section">
        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="SectionBlock" bgcolor="#ffffff" style="width: 600px;" align="center">
            <tr>
                <!-- // CONTENT CONTAINER // -->
                <td class="Section1padding" align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td align="left" valign="top" class="Section1Content Responsive" mc:edit="editable_block_1">
                                Email content
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- // CONTENT CONTAINER // -->
            </tr>
        </table>
    </td>
</tr>
<!-- // SECTION BLOCK END // -->

Editable Image Regions

Let's, make images changable in Mailchimp. Mailchimp will strip out your images' width and height rules, so if you are using retina images, make sure you resize them in Mailchimp.

Add the below tag to an <img> element.

Mailchimp Image Region: mc:edit="editable_image_1"

<img src="image.jpg" width="600" height="200" style="width: 600px; height: 200px;" alt="A beautiful description" class="MobileImg" mc:edit="editable_image_1"/>

Hyperlinks

Hyperlinks work a little differently in Mailchimp compared to other ESPS. In Mailchimp, you do not add an editable tag to an <a> element. Instead you add it to it's containing <td> or <div> and then use the link editor in Mailchimp to customise the links.

So if we wanted to edit the hyperlink for a button, we'd do it like this:


<!-- Button -->
<table border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <!-- Button Box -->
            <td bgcolor="#345CFF" align="left" class="btn_box" mc:edit="button_1">
                <!-- Button text and link -->
                <a href="http://cogentro.com" target="_blank" class="btn_text">Button Text</a>
            </td>
        </tr>
    </tbody>
</table>
<!-- Button End-->
                        

Editable CSS Options

Mailchimp has a fantastic user controlled options sidebar that customises your CSS. You just have to tell Mailchimp what you want the user to be able to edit. You can group the options in different tabs and sections to make things tidy. Below are some tags required with an explanation. We then take this further into a real example below this.

@tab Tab Name : This creates a tab group. These are placed in the sidebar of the template editor.

@section Section Name : This creates a section within a tab for better organisation.

@style Style Name : For typography only; use this to allow the style to be selected from Mailchimps content editor. You can highlight text and apply styles declared.

/*@editable*/ : Add this infront of any style rules you want to be editable. Anything you don't want editable shouldn't have it.

In your CSS, look for style rules you want to edit. Let's keep it simple for the example below, and add customisation options for all <h1> elements.

                            
/**
* @tab Typography
* @section Heading 1
* @style Heading 1
*/

/*=== Setup Header font Styles ===*/
span.h1, span.h1 a, h1, h1 a{
/*@editable*/ color:#000000;
/*@editable*/ font-size:40px;
/*@editable*/ font-weight:300;
/*@editable*/ text-align:left;
line-height:130%;
}
                            
                        

Other useful Mailchimp content

To complete your email there a few other things to consider listed below in this handy checklist:

Unsubcribe Link
Make sure the unsubcribe link is compatible by using the following:

<a href="*|UNSUB|*">Unsubcribe</a>

View email online Link
To create a Mailchimp view in browser hyperlink, at this to your code:

<a href="*|ARCHIVE|*">Read Online</a>

Email Title Tag
Add this to your title tag. It will display the email subject as your title.

<title>*|MC:SUBJECT|*</title>

Other documentation
Mailchimps template language can also be found here on Mailchimp's documentation website here.

Background Image Support
Background image suport isn't strong in Mailchimps' template editor. You can make the background image property editable through CSS (users will need to imput an image URL), but the v:fill fallback code for Outlook cannot be used. Therefore background images will not render in some versions of Outlook, so make sure a fallback background color option is available.