Getting Started with Mailchimp's Email Template Language

When creating custom email templates with Mailchimp's email template language, there are some basic guidelines you should follow. These guidelines are intended to serve as a foundation for best practices when using Mailchimp's template language.

In this article, you'll learn how to get started with Mailchimp's template language.

Things to know

• Depending on your plan, you may not have access to custom coded templates. To find out what features are included in each plan, check out our pricing page. To change your plan type, visit the plans page in your account.
• This is an advanced feature and is recommended for users familiar with custom coding. Contact your developer, or hire a Mailchimp Expert if you need assistance.

CSS styling

We recommend that your email layouts be 600 pixels or 640 pixels wide to allow for proper viewing in various email clients. The Email Client CSS Support page in our Email Template Reference provides a thorough list of supported CSS styles for different types of email clients.

As a general rule, avoid using the following CSS in your templates:

• Floats
• Positioning
• Background images (they don't work in Microsoft Outlook or in Gmail)

Remember to set the @theme declaration in your CSS for the page background, header, footer, and content space so templates can be quickly customized with the Mailchimp color themes. Refer to the Template Styles article for the correct syntax of the names that can be used.

Editable sections

Limit the number of editable spaces in the template to keep things simple and name all editable spaces consistently. The name you assign via mc:edit=" somename" is used to create a field in the database to store unique content. If you switch templates after writing content, you could lose the copy if the editable space names aren't consistent. Use the following conventions for common content areas. See More Examples.

• mc:edit="header" used to name the header of your email.
• mc:edit="header_image" used to name an editable header image.
• mc:edit="sidecolumn" used to name an editable left- or right-side column.
• mc:edit="body" used to name the body content space of your email.
• mc:edit="footer" used to name the footer of your email.

You should not place editable images within an editable content container.

If you're editing hideable sections in the Campaign Builder using the remove button in your template, please note that the section won't disappear in the editor screen but will appear faded as a placeholder in case you decide to use the space. That section will not appear in your sent campaign. To preview your campaign, click the Preview drop-down menu and choose Enter preview mode.

The remove and hide this 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.

Merge tags

You should get creative with the use of merge tags.

• Use social merge tags to provide your contacts with new ways to connect with you over Facebook and X (formerly Twitter) and easily share your content.
• Use the table of contents merge tag ( *|MC:TOC|*) to create an automatic list of links to the <h1> and <h2> headings in an email.
• You can refer to Customize Your Footer Content for a quick overview of the merge tags that you can include.

Always include the required CAN-SPAM info in the footer. Otherwise, your email campaign could be rejected. These required tags are also noted under Customize Your Footer Content.

• *|UNSUB|*
• *|LIST:DESCRIPTION|*
• *|LIST:ADDRESS|*

External links

When using links within your email, include the target="_blank" attribute in your anchor elements to ensure they open a new browser window or tab when emails are viewed in browser-based email clients. Make an effort to include these handy links in your email.

• A link for users to update their subscription preferences:
  <a href="*|UPDATE_PROFILE|*" target="_blank">change subscription preferences</a>
• A link to let users view the email in a browser:
  <a href="*|ARCHIVE|*" target="_blank">view this email in a browser</a>
• A link to your website:
  <a href="*|LIST:URL|*" target="_blank">visit our website</a>
• A link to let users forward the email to a friend, usually somewhere prominent:
  <a href="*|FORWARD|*" target="_blank">forward to a friend</a>

(It's a good idea to make a cool button treatment for it, where possible, to encourage sharing!)

Testing

Test your templates by creating an email campaign and then customizing the template. This stress test can help you to make sure the template will work well for others who might be using it in different situations.

Quick links

• Template Language: Creating Editable Template Styles
• Template Language: Creating Editable Content Areas
• Template Language: Working With Variant Selectors
• Types of Templates