{"id":30779,"date":"2021-06-21T14:11:11","date_gmt":"2021-06-21T18:11:11","guid":{"rendered":"https:\/\/www.litmus.com\/?p=30779"},"modified":"2025-12-15T15:35:22","modified_gmt":"2025-12-15T20:35:22","slug":"how-to-mailchimp-email-templates","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates","title":{"rendered":"How to Create Custom Mailchimp Templates That Actually Work Perfectly"},"content":{"rendered":"\n\n\t
\n
\n \t
\n \t\t
\n \t\t\t
\n \t\t\t\t

Coding every email from scratch takes way too long, so having a reusable, tried-and-true email template<\/a> can do wonders for your workflow efficiency. But building your own template can be an adventure in and of itself, too\u2014even for Mailchimp, the second most popular email service provider (ESP) according to our State of Email Service Providers<\/a> report.<\/p>\n

You might have a preferred way to develop emails, but when it comes to custom templates for Mailchimp, it\u2019s important to follow some very specific guidelines to ensure you don\u2019t lose hours getting your template to work. And I say this having lost many hours myself!<\/p>\n

As I walk you through creating a custom Mailchimp template, be aware that the way you structure the code, how you create buttons, and even the size of your imagery all need to be tackled with a Mailchimp technical point-of-view.<\/p>\n

That\u2019s why we collaborated with Mailchimp and other experts on this blog post to ensure your Mailchimp templates will actually work perfectly.<\/p>\n

The difference between Mailchimp\u2019s prebuilt templates and custom templates<\/h2>\n

Mailchimp has a substantial library of templates you can use to create emails. Each of them is editable within a drag-and-drop editor and multiple email modules<\/a> to choose from for laying out your content.<\/p>\n

So why create a custom template?<\/p>\n

Mailchimp\u2019s templates are highly editable so that any brand can use them with their own brand colors and styling. This can make it challenging to monitor their usage, and for a brand\u2019s identity to remain consistent from email to email. Creating a custom template ensures that many of the styles you build into the template aren\u2019t altered.<\/p>\n

Also, the editing environment for custom templates is different. There\u2019s no drag-and-drop editor. Instead, create modules and elements that can be duplicated, switched, or removed depending on the template language you implement.\u00a0 This is another way to guard against unwanted layouts and edits.<\/p>\n

How to code a custom Mailchimp template<\/h2>\n

Ready to create your own Mailchimp email template? Keep reading for the tips and tricks you need to do it right.<\/p>\n

Think about your goals and end-users<\/h3>\n

Before you begin, it\u2019s important to first think about the goal of the template and the people who will be using it. For example, you may need a template with a lot of details and flexibility. Or, it may need to be simple and easy for less technical members of your team to adopt.<\/p>\n

Joolz Joseph, email marketing consultant<\/a> and marketing motivator<\/a>, says:<\/p>\n\"Joolz\n

\u201cAsk yourself \u2018What are we trying to achieve with this?\u2019<\/p>\n

Is it a catch-all template that can be used for multiple email types so needs lots of flexibility with different blocks? Or something more rigid such as a promotional template, onboarding series, or newsletter?<\/p>\n

There is a great advantage to a template with lots of blocks which can be adapted, but sometimes 2 or 3 shorter templates are easier to manage for people who may be overwhelmed by lots of options.<\/p>\n

This short consideration at the start enables you to build your template with the goal and end-user in mind.<\/p>\n

For example, a promotional template needs to be focused on the primary objective and call-to-action (CTA), whereas a newsletter may have multiple CTAs which are all different.<\/p>\n

This all needs to be reflected in your template design. It will also make it easier for someone running a promotion to drop in relevant content if their options are limited!<\/p>\n

Doing a single template that captures every possibility can result in an email that is on brand but not as effective as it could be, so it is worth taking that step back first and looking at what you want to achieve and what kind of template (or templates) will best help you do this.\u201d<\/p>\n

Thanks, Joolz, for the tip! Once you know the goals for your template, you can get to building.<\/p>\n

Embed your CSS styling<\/h3>\n

One of the first things worth mentioning is Mailchimp inlines your embedded CSS styles automatically when you save your template within the platform. So as you kick off development work, you may find it easier to embed all of your styles, and limit code bloat.<\/p>\n

Create rows of modules<\/h3>\n

As you structure your code, think about the blocks you would like to be editable, especially those you want to be able to re-order. These blocks should sit within rows, for example:<\/p>\n \t\t\t<\/div>\n \t\t<\/div>\n \t<\/div>\n <\/div>\n<\/div>\n\n\n\n

<!--modules that can be re-ordered-->\n<!--module 1-->\n<tr>\n<td>\n<!--module code here-->\n<\/td>\n<\/tr>\n<!--\/\/module 1-->\n<!--module 2-->\n<tr>\n<td>\n<!--module code here-->\n<\/td>\n<\/tr>\n<!--\/\/module 2--><\/pre>\n\n\n\n\n\t
\n  
\n  \t
\n  \t\t
\n  \t\t\t
\n  \t\t\t\t
Once you close the parent table, you won\u2019t be able to re-order your rows past this point.<\/p>\n
Consider button limitations<\/h3>\n
There are many ways to code a button<\/a>. However, it\u2019s only the padded button that\u2019s going to work in your custom Mailchimp template. This is because a lot of styling applied to the anchor tags of editable buttons is removed automatically. The format of VML code and any spans you place within your anchor tag may also be adjusted.<\/p>\n
The padded button method means that only your button\u2019s text is going to be clickable, as you need to apply your padding and other button styling to a parent table cell. Mailchimp\u2019s extensive documentation provides more detail on button code<\/a> (and other HTML email limitations<\/a> if you\u2019re curious).<\/p>\n
Use exact-sized images for editable placeholders<\/h3>\n
Like buttons, images shed a little code when made editable. This time, it\u2019s the HTML attributes that define the width and height that are removed. Outlook relies on these, and the Mailchimp editing environment will also render the actual size of the image until you put these attributes back in using the editor.<\/p>\n
This makes it a little tricky to use retina images<\/a>, aka images at twice their size, to be scaled down in the email.<\/p>\n
I recommend using 1x imagery for any placeholders you code into your template. Then when the template is used for a campaign, switch out your placeholder for a 2x image (retina image), defining the width and height in the settings tab of the image editor.<\/p>\n
Apply Mailchimp\u2019s template language<\/h3>\n
To define editable areas within your template, you need to implement Mailchimp\u2019s template language. There is ample documentation available that outlines the things you need to include, depending on the kind of template you create.<\/p>\n
For highly customisable templates that may be used by multiple brands, you can make CSS styles editable. To do this, follow Mailchimp\u2019s guide on editable styles.<\/a><\/p>\n
For the purposes of this walkthrough, we\u2019re going to look at how to create a template that limits editability to just the content. And to do this, we need to add the following language to HTML elements within the template:<\/p>\n
mc:edit<\/b> is used to provide a content-editing action for a particular element within a template. Make sure you use a unique name for each instance of this within your template.<\/p>\n
mc:hideable<\/b> is used to provide a hide\/show action for a particular element within a template.<\/p>\n
mc:label<\/b> is an optional tag used to name an editable section within the application.<\/p>\n
mc:repeatable<\/b> is used to provide a duplication action for a particular element within a template.<\/p>\n
mc:variant<\/b> is used to provide a way to switch between discrete blocks of HTML.<\/p>\n
For more detailed information on Mailchimp template language, this is my go-to document<\/a>.<\/p>\n
Include Mailchimp merge tags<\/h3>\n
There are lots of merge tags<\/a> you can leverage within templates and campaigns. The tags I recommend applying are:<\/p>\n
*|MC_PREVIEW_TEXT|*
\n<\/b>Add this preview text merge tag to your build to ensure that during campaign set-up, content added to the preview text field is injected into the email. The preview text hack<\/a> we usually add to Litmus emails to create whitespace after our preview text doesn\u2019t work within Mailchimp. Fear not. Mailchimp has documented the ideal way to do this<\/a> for custom templates.<\/p>\n
*|UNSUB|*<\/b>
\nIn the header and\/or footer of your template, add this merge tag to your unsubscribe link to ensure that people can take themselves off of your list should they choose to. Plus, it\u2019s a legal requirement, so you definitely don\u2019t want to forget this.<\/p>\n
*|UPDATE_PROFILE|*<\/b>
\nGive subscribers the opportunity to update their information or manage their preferences.<\/p>\n
*|ARCHIVE|*
\n<\/b>Add this merge tag to a \u2018view online\u2019 link to offer people the opportunity to view your email within their web browser.<\/p>\n
How to add your template to Mailchimp<\/h2>\n
Now that you have your template coded, you\u2019re ready to put it to work.<\/p>\n
Head to \u2018Campaigns > Email templates\u2019 and click the \u2018Create template\u2019 button to import your template.<\/p>\n
The easiest way to bring your template into Mailchimp is to upload a zip containing your HTML and images, as Mailchimp will manage the image paths for you.<\/p>\n\"Mailchimp:\n
Once you\u2019ve named your template and navigated to your zip file, your template will open up in the template editor. Here, you can make adjustments, access the content studio where images and other assets are stored, and test your template rendering.<\/p>\n
When you\u2019re finished in this editor, you can save and close, and your template is ready for use.<\/p>\n
Make sure your template works in Mailchimp<\/h2>\n
There are many common HTML mistakes<\/a>, so it\u2019s a good idea to see what the editing experience is like in Mailchimp before you send it off to your team, clients, or other people to use. To do this, head to \u2018Create\u2019 on the main menu, then select \u2018email\u2019 and stick with a \u2018regular campaign\u2019.<\/p>\n
You can add some campaign details, such as a subject line and preview text. This will give you the opportunity to check that you have your merge tag and preview text code implemented correctly.<\/p>\n
On clicking \u2018Design Email\u2019, you will be able to select the template you\u2019d like to use. Find your custom template in the \u2018Saved Templates\u2019 tab.<\/p>\n\"Select\n
Once you\u2019ve selected your template, you\u2019ll be taken to the Mailchimp editing environment where you can put all of your editable sections to the test.<\/p>\n
To edit an editable element, simply click on it, and an editing pane will appear on the right-hand side.<\/p>\n\"Editing\n
Something to note<\/strong>: Sometimes rearranging my content blocks doesn\u2019t work, so if you can\u2019t see the icon with an up and down arrow when you click on a block, try duplicating the block you would like to re-order. You can delete the unwanted extra block once you\u2019ve dragged the block you wish to move to its new location.<\/p>\n\"Rearranging\n
Don\u2019t forget to test email rendering<\/h2>\n
As always, it\u2019s super important to see how different email clients are rendering your template, especially after it\u2019s been used to create an email campaign.<\/p>\n
It\u2019s through such testing that I\u2019ve identified issues with my templates and come across some of Mailchimp\u2019s code-removing quirks. You can easily test in both the campaign and template editors by going to \u2018Preview\u2019 and \u2018Send a test email\u2019 to your inbox or your Litmus test address for thorough, automated pre-send testing<\/a>.<\/p>\n
Litmus and Mailchimp also integrate in several ways to help you test your emails as thoroughly and efficiently as possible. Head to \u2018Enter preview mode\u2019 and select the \u2018Inbox\u2019 tab to run Litmus-powered email testing within Inbox Previews<\/a> in Mailchimp. With a Litmus Plus or Enterprise plan, you gain access to additional testing and time-saving integrations<\/a>, including the ability to test crucial pre-send elements as you build with the Litmus Extension<\/a> in Chrome and sync emails between Litmus and Mailchimp<\/a>.<\/p>\n
\"Litmus
See how this works in our quick video \u2192<\/a><\/figcaption><\/figure>\n
Get ready-to-go custom templates<\/h2>\n
If you\u2019re looking for editable Mailchimp templates that you can use right away, we\u2019ve got your back.<\/p>\n
Free Litmus-built Mailchimp template<\/h3>\n
To help get you started, we\u2019ve created a Dark Mode-optimized, custom Mailchimp template. It has repeatable rows, a variable content block, and a Mailchimp-friendly button.<\/p>\n
Download our Mailchimp template \u2192<\/a><\/p>\n\"free\n
Grab your free Litmus-built Mailchimp template<\/a> (.zip file). Then, dig into the code to see how we\u2019ve applied Mailchimp\u2019s template code to make a mini version of our free Subscriber Love email templates<\/a> editable in Mailchimp.<\/p>\n
Mailchimp partner-created email templates<\/h3>\n
For even more options, check out the Mailchimp Marketplace<\/a> with beautiful email templates designed by Mailchimp Service Partners.<\/p>\n\"Mailchimp\n
You can search email templates based on your marketing goal, whether it\u2019s onboarding new subscribers or promoting a new product. Select and purchase the template that\u2019s perfect for you, then start customizing it to match your brand. No installation or coding required.<\/p>\n
Your perfect custom Mailchimp template is within reach<\/h2>\n
Whether you code your own editable template or customize someone else\u2019s, you\u2019re well on your way to a more efficient email building process\u2014and one you can trust to create on-brand, error-free emails.<\/p>\n
\n\n\n\n
\"graphic<\/td>\n\n
Make sure your Mailchimp template looks great<\/strong><\/p>\n
Preview your emails in over 90+ email clients, apps, and devices with Litmus to ensure an on-brand, error-free subscriber experience. Every time.<\/p>\n
Book a demo \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Wondering how to create your own custom Mailchimp templates? Get expert tips & tricks to tackle the quirks and build an email template that actually works.<\/p>\n","protected":false},"author":25,"featured_media":30819,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[1789,1344],"blog_category":[53],"class_list":["post-30779","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-subscriber","tag-templates","blog_category-tips-resources"],"yoast_head":"\nHow to Make Custom Mailchimp Templates That Work Perfectly - Litmus<\/title>\n<meta name=\"description\" content=\"Wondering how to create your own custom Mailchimp templates? Get expert tips & tricks to tackle the quirks and build an email template that actually works.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Custom Mailchimp Templates That Actually Work Perfectly\" \/>\n<meta property=\"og:description\" content=\"Wondering how to create your own custom Mailchimp templates? Get expert tips & tricks to tackle the quirks and build an email template that actually works.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-21T18:11:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-15T20:35:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/06\/how-to-create-mailchimp-templates.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"726\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Make Custom Mailchimp Templates That Work Perfectly - Litmus","description":"Wondering how to create your own custom Mailchimp templates? Get expert tips & tricks to tackle the quirks and build an email template that actually works.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates","og_locale":"en_US","og_type":"article","og_title":"How to Create Custom Mailchimp Templates That Actually Work Perfectly","og_description":"Wondering how to create your own custom Mailchimp templates? Get expert tips & tricks to tackle the quirks and build an email template that actually works.","og_url":"https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2021-06-21T18:11:11+00:00","article_modified_time":"2025-12-15T20:35:22+00:00","og_image":[{"width":1380,"height":726,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/06\/how-to-create-mailchimp-templates.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates"},"author":{"name":"","@id":""},"headline":"How to Create Custom Mailchimp Templates That Actually Work Perfectly","datePublished":"2021-06-21T18:11:11+00:00","dateModified":"2025-12-15T20:35:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates"},"wordCount":10,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/06\/how-to-create-mailchimp-templates.png","keywords":["Subscriber","Templates"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates","url":"https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates","name":"How to Make Custom Mailchimp Templates That Work Perfectly - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/06\/how-to-create-mailchimp-templates.png","datePublished":"2021-06-21T18:11:11+00:00","dateModified":"2025-12-15T20:35:22+00:00","description":"Wondering how to create your own custom Mailchimp templates? Get expert tips & tricks to tackle the quirks and build an email template that actually works.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/06\/how-to-create-mailchimp-templates.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/06\/how-to-create-mailchimp-templates.png","width":1380,"height":726},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/how-to-mailchimp-email-templates#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"How to Create Custom Mailchimp Templates That Actually Work Perfectly"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/30779","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=30779"}],"version-history":[{"count":3,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/30779\/revisions"}],"predecessor-version":[{"id":121659,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/30779\/revisions\/121659"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/30819"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=30779"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=30779"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=30779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}