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.
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.
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:
- 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.
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 Preview and Test and then click 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.
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.