Create a MailChimp compatible HTML email template

Fed up with the standard MailChimp templates? Want to enhance your email campaigns using creative design & code, but still keep MailChimp as your main template editor? In this post i am going to walk you through the steps i take to create compatible MailChimp HTML email templates.

mc:edit=””

mc:edit=”” is used to let the MailChimp builder know which areas of the template you wish to edit. Add this to your image ,ahref & td tags that surround the element you wish to be editable. When opened in the MailChimp builder, click on an image, ahref or text you wish to edit and an WYSIWYG editor will popup on the right hand side allowing you to edit the element. When setting a mc:edit=”” tag make sure you give it a unique name that relates to the element you are placing it on.

mc:repeatable=””

mc:repeatable=”” is used to let the MailChimp builder know which areas of the template you wish to hide or repeat. Add this to all the first tables of a module. When opened in the MailChimp builder, hover over a module and a plus & minus icon will appear, plus will repeat & minus will hide the module. When setting a mc:repeatable=”” tag make sure you give it a unique name that relates to the element you are placing it on.

Custom CSS

MailChimp allows us to create custom CSS which can be edited via the MailChimp builder to do this we need to create CSS and then add a class to the surrounding td of that text, link or button. See example below on how to create custom CSS that the MailChimp builder can read.

The code above creates a tab in the MailChimp builder called “Header” when we click on this tab we can then change the styling of the hero link. It also gives us a class we can add to the tds or the ahref tags to allow us to edit the styling from the MailChimp builder.

Please Note : If you have any inline styling on the surrounding td when adding your custom MailChimp class, remove this as it will stop MailChimp from editing your element.

For more information on the different template tags available for your MailChimp template visit the official website at : http://templates.mailchimp.com/getting-started/template-language/

Merge Tags

The most important merge tags you need in your HTML email template & how to use them correctly.

*|UNSUB|*

All HTML email templates need an unsubscribe link, we can add this to our MailChimp template like so :

*|ARCHIVE|*

We all love to see a view in browser link, here’s how to add one to your MailChimp template :

For more information on the different merge tags available for your MailChimp template visit the official website at : http://kb.mailchimp.com/merge-tags/all-the-merge-tags-cheat-sheet

Create a MailChimp compatible HTML email template

That’s all there is to creating a MailChimp compatible HTML email template. Give it a try today!

If this post went straight over your head and you would rather a professional HTML Email Developer take care of this for you contact me via email to check if i have the capacity to take on your project for a fixed fee.


Glenn Smith





© 2017, All Rights Reserved - Glenn Smith