- Template Language: Creating Editable Template Styles
- Template Language: Creating Editable Content Areas
- Template Language: Working With Variant Selectors
- Custom Template Showcase
Getting Started with MailChimp's Template Language
These guidelines are intended to serve as a foundation for best practices when creating custom email templates with MailChimp's email template language.
Your email's layout should be no wider than 600 pixels, in order to allow proper viewing in the world's various email clients.
You can use Campaign Monitor's wonderful reference as a primer to what CSS is supported in major email clients: http://www.campaignmonitor.com/css/
As a general rule, you should avoid using the following CSS in your templates:
- 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.
It's a good idea to limit the number of editable spaces in the template to keep things simple, and you should name all editable spaces consistently. The name you assign via mc:edit="somename" is used to create a field in the database to store the user's content. If they switch templates after writing content, they could lose their 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="main" - used to name the main 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, 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 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.
You should get creative with the use of merge tags.
- Use social merge tags to provide your subscribers with new ways to connect with you over Facebook and 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 Merge Tags for your Footer for a quick overview of the merge tags that you can include.
Always include the required CAN-SPAM info in the footer. Otherwise, your campaign could be rejected. These required tags are also noted under Merge Tags for your Footer.
When using links within your email, make sure to 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!)
Once you've created a template, test it in a campaign and try customizing it by changing its colors in the style editor, adding content, uploading images and anything else that would go into creating a new campaign. This "stress test" can help you to make sure the template will work well for others who might be using it in different situations.
Learn more about testing campaigns and templates.
Walk through building a template and see a great example from Becs Rivett, a MailChimp user on What!? Creative Agency blog.