Template Language

Although you don’t have to use it in order to send emails with Mailchimp, our template language is a powerful, easy way to code your own email templates that are reusable and editable from within the application.

Creating Editable Areas

mc:edit

mc:edit is used to provide a content-editing action for a particular element within a template.
Adding mc:edit="$unique_name" to an HTML element allows you to add content or code from within the Mailchimp campaign editor.
The name used in mc:edit must be unique.
mc:edit="" should be used on a div, table cell, or any other element that can be considered a ‘container.’
mc:edit can be placed on an <img> element. This will allow the image to be replaced, resized, and edited using the Mailchimp campaign editor.
The name you assign via mc:edit="$unique_name" is used to create a field in the database to store the user’s content. If the user switches templates after writing content, they could lose their copy if the editable space names aren’t consistent. The following naming conventions are a good rule of thumb for common content areas:
- mc:edit="header" — Use this to name your email header.
- mc:edit="header_image" — Use this to name an editable header image.
- mc:edit="sidebar" — Use this to name an editable left- or right-side column.
- mc:edit="body" — Use this to name the main content space of your email.
- mc:edit="footer" — Use this to name your email footer.
A few things to watch out for when using mc:edit to create editable areas:
- You shouldn’t nest editable elements within other editable elements.
- You shouldn’t place editable images within an editable content container.
- Any content added within an editable window is tied to the name used in the mc:edit tag. If you change the name after saving the content to a template, you’ll lose the content.
- Hardcoded height and width attributes on editable images will be stripped in favor of allowing you to manage the image size in the Content and Settings tabs for that image in the campaign editor. If you do set a pixel width and height in the Settings tab you’ll need to add a class or id to your image so that you can override that size on mobile. Something like: @media only screen and (max-width: 480px){ .templateImage{width:100% !important; height: auto !important;} }
- For editable images we suggest including a max-width in the style attribute so that the heights and widths of those images don’t always have to be updated in the Content or Settings tab, and they’ll never stretch beyond that size.

mc:hideable

mc:hideable is used to provide a hide/show action for a particular element within a template.
Syntax: mc:hideable.
Use mc:hideable on any HTML element.
Avoid placing the mc:hideable tag on an element that already has an mc:repeatable tag.
When an element is hidden, it will not be visible when the email is sent from Mailchimp.
There are no restrictions on the use of mc:hideable. Any element can be hidden.
There’s no need to add a namespace to the mc:hideable tag (IE: mc:hideable=“$name”).
If you’re editing hideable sections in the campaign builder using your template’s remove button, note that the section won’t disappear in the editor screen. The section you want to remove will fade, but remain—just in case you change your mind and want to use the space. However, when you send out your email, the section you have “removed” won’t appear in your campaign. You can preview this change by clicking on popup preview.
The remove and hide section buttons don’t offer the same functionality in the template editor. In fact, you can’t actually remove anything while working in the template editor. If you need to make changes like that, we suggest you work in the campaign builder instead.

mc:repeatable

mc:repeatable is used to provide a duplication action for a particular element within a template.
Syntax: mc:repeatable.
Use mc:repeatable on block-level elements (like <div> and <p>) with the exception of lists, or inline elements (like <img>, <a>, and <span>).
mc:repeatable elements can be nested within each other, but use care if you’re going to do this. We don’t encourage this use.
mc:repeatable can be used on the same element as mc:edit, but nesting mc:repeatable beneath mc:edit will render content that is editable but not repeatable.
If you want to apply styles to repeatable container elements or elements within repeatable containers, either use class or apply them in-line. Don’t use the id attribute.

mc:label

mc:label is an optional tag used to name an editable section within the application.
Syntax: mc:label=“header_image”.
Use mc:label on any mc:edit element.
If no mc:label name is specified, the app will use the name from the mc:edit tag instead.

mc:variant

mc:variant is used to provide a way to switch between discrete blocks of HTML.
mc:variant must be used in conjunction with mc:repeatable.
Syntax: mc:repeatable=“product” mc:variant=“content with left image”.
Use mc:variant on any discrete HTML elements you wish to switch between.
mc:variant blocks should not be nested within each other.
mc:variant blocks must be adjacent to each other in HTML:

<!-- // Begin Module: Left Image with Right Content \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="image_with_content" mc:variant="content with left image">
    <tr>
        <td align="center" valign="top">
            <img src="..." mc:edit="left_image" />
        </td>
        <td valign="top">
            <div mc:edit="right_content">
               <h4 class="h4">Heading 4</h4>
               Lorem ipsum dolor sit amet.
            </div>
        </td>
    </tr>
</table>
<!-- // End Module: Left Image with Right Content \\ -->

<!-- // Begin Module: Right Image with Left Content \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="image_with_content" mc:variant="content with right image">
    <tr>
        <td valign="top">
            <div mc:edit="left_content">
               <h4 class="h4">Heading 4</h4>
               Lorem ipsum dolor sit amet.
            </div>
        </td>
        <td align="center" valign="top">
            <img src="..." mc:edit="right_image" />
        </td>
    </tr>
</table>
<!-- // End Module: Right Image with Left Content \\ -->

Defining Editable CSS

Style Declaration Block

Style declaration blocks share a basic structure regardless of the element style targeted. In this example, H1 tag styling is declared:

/**
* @tab Page
* @section heading 1
* @style heading 1
*/
h1{
    /*@editable*/ color:#202020 !important;
    display:block;
    /*@editable*/ font-family:Arial;
    /*@editable*/ font-size:34px;
    /*@editable*/ font-weight:bold;
    /*@editable*/ line-height:100%;
    /*@editable*/ text-align:left;
}

Each editable CSS ruleset opens with the declaration block:

/**
* @tab Page
* @section heading 1
* @style heading 1
*/

“@tab” defines a tab under which you can organize several editable styles. It’s best used for high-level groups like “header,” “sidebar,” or “footer.” @tab is required.
“@section” defines a subsection within a tab. It’s best used for narrow-focus groups such as “body content,” “footer links,” or “background colors.” @section can encompass styles from several different elements or areas (“@section body,” for example, can have styles for the background color of the table, along with text and link styles.) @section is optional, but highly recommended.
“@style” allows you to add a ruleset’s styles to the drop-down menu in the campaign text editor window. This facilitates the quick application of specific CSS to any selected text. @style should only be used on text styles. @style is optional.

Each editable CSS property is preceded by the @editable declaration:

h1{
    /*@editable*/ color:#202020 !important;
    display:block;
    /*@editable*/ font-family:Arial;
    /*@editable*/ font-size:34px;
    /*@editable*/ font-weight:bold;
    /*@editable*/ line-height:100%;
    /*@editable*/ text-align:left;
}

“@editable” is required on each style intended to be edited in Mailchimp’s campaign builder.