Getting Started with Mailchimp's Email Template Language
Use Mailchimp's Template language to create your own email template. Learn how to create sections, use merge tags, test your template, and more.
Get the job done with a pro
From training to full-service marketing, our community of partners can help you make things happen.
Note
The template options in this article are available for the classic email builder only. To learn about templates in the new email builder, read Design an Email in the New Builder.
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.
The general attribute format for creating editable content areas is: mc:edit="section"
Create a unique attribute values and add to elements whose content should be editable. This section contains code names for some common content areas that you can include in your template code:
In the following example, an editable body section is created using the mc:edit="body" attribute.
<td class="defaultText" mc:edit="body">
<h2 class="title">Primary Heading</h2>
<p>Sample copy. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis.</p>
<h3 class="subTitle">Subheading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</td>
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="image_1" style="max-width:600px;" />
Add the mc:allowtext attribute to the image element for your header image to allow text to be entered instead of an image.
In the following example, the attribute is added to an image element that is made editable with the mc:edit="section" attribute.
<img mc:edit="header_image" mc:allowdesigner mc:allowtext />
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.
In the following example, the mc:repeatable attribute is added to a content area that is made editable with the mc:edit attribute.
<div class="article" mc:repeatable>
<h3 mc:edit="article_title">Title</h3>
<p mc:edit="article_content">Content</p>
</div>
Each instance of mc:repeatable creates a parent element. When a block is repeated, the new block is a child of that parent. Child blocks can only be rearranged if they're associated with the same parent element. For example, if you have two mc:repeatable sections in your template, a repeated block from the first instance can't be rearranged to appear between repeated blocks associated with the second instance.
To move blocks around more freely, you should create multiple instances of the mc:variant attribute defined by the same mc:repeatable name. This will create one mc:repeatable parent element, so any repeated blocks will be a child of the same parent element.
In the following example, multiple mc:variant attributes are used with the same mc:repeatable name.
<table mc:repeatable="content" mc:variant="variant_1">
<tr><td mc:edit="section_1">
Variant 1 Content
</td></tr>
</table>
<table mc:repeatable="content" mc:variant="variant_2">
<tr><td mc:edit="section_2">
Variant 2 Content
</td></tr>
</table>
<table mc:repeatable="content" mc:variant="variant_3">
<tr><td mc:edit="section_3">
Variant 3 Content
</td></tr>
</table>
Add the mc:hideable attribute to a content area to allow that block to be toggled between hidden and visible when you build your campaigns. The mc:hideable attribute cannot be used in conjunction with the mc:repeatable attribute.
In the following example, the mc:hideable attribute is added to a content area that is made editable with the mc:edit attribute.
<div mc:edit="content" mc:hideable>
</div>
Add the mc:variant="somename" attribute to a content area to allow you to switch between a number of layouts for that content block within the Campaign Builder. The mc:variant attribute requires an attribute name and must be used in conjunction with mc:repeatable.
In the following example, the mc:variant attribute is added to a content area that also uses the mc:repeatable attribute. In this case, the attribute name is "content with left image."
<div mc:repeatable="product" mc:variant="content with left image"> </div>
Note
Technical Support
Have a question?
Paid users can log in to access email and chat support.
Use Mailchimp's Template language to create your own email template. Learn how to create sections, use merge tags, test your template, and more.
With Mailchimp, you can import, reuse, and share your custom HTML templates. Learn how to import ZIP or HTML files.
If you code your own email template, you can use Mailchimp’s Template Language to add repeatable and variable content blocks to your layout. Learn when and how to use each block type.
These cookies are strictly necessary to provide you with the services and features available through our site. Because these cookies are strictly necessary to deliver the site, you cannot refuse them without impacting how the site functions.
These cookies are used to enhance the functionality and performance of the site. They help us to customize the site and application for you in order to enhance your experience. While these cookies are not needed for a basic website experience, certain functionalities such as personalization and video would become unavailable.
These cookies are used to make advertising messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.
These cookies collect information to help us understand how the site is being used or how effective our marketing campaigns are. They help us to know which pages are the most and least popular and to see how visitors move around the site. These cookies may be set by us or by third-party providers whose services we have added to our pages.