A little while back, we launched our email template language which gives you the power to craft emails so that you can edit them in the MailChimp application. In that was included the ability to set editable images, editable content blocks for text, repeatable regions, and even a way to change CSS for the entire document (which, thankfully, gets inlined automatically so you don’t have to worry about certain programs stripping out your beautiful styling).
Here’s a short mini-tutorial where we show you how you can jump in and get started using the template language to turn either our basic left column or right column templates into multi-section templates via the mc:repeatable tag.
The first thing you’ll want to do is create your template via the campaign builder by selecting Design Genius. Go ahead and get some basic styling and layout out of the way and select either the right column or left column templates. You’ll want to save the template and exit. Now, head over to the dashboard so you can select “my templates.” You’ll want to export that template so that you can edit it on your computer in a standard text editor. Here’s the full article on the process.
Now, once you’ve gotten that downloaded, it’s time to take a look at some code. (Here’s the template that I made and downloaded in my account.) When you look at the html for the template, it’s going to be a series of tables. What you’ll be doing is finding the line that looks like:
<table width=”600″ cellpadding=”20″ cellspacing=”0″ class=”bodyTable”>
This defines a the beginning of the table that holds both the main content area as well as the side column. You can see a screenshot of that here:
Tables in html work so that <tr> tags define “table rows” and <td> tags define “table data.” The <tr> tag just below that table tag defines the row that all of your content sits in. What you can do is easily add in “mc:repeatable” there so that it adds a special button to your template that allows you create more rows for content. Here’s where you would add that in the code:
Once you’ve got your code saved, you’ll upload it by going back to the “my templates” area where you can import your template.
Here’s a copy of the finished version that should work.
Once you use it in a campaign, you’ll see some new buttons: a “+” button to add new blocks of content and a “x” button to remove the content again. Here’s what that looks like in a campaign:
You could also go ahead and make an equivalent version of the right column template on your own now.
The MailChimp template language has some other neat features that you should definitely check out. I hope this helps show that the template language is accessible even if you’re not a top-notch designer or coder. It’s certainly possible to make small modifications to the existing templates that you can find in your account so that you can cater them to your own needs.





Unfortunately this is way to much for me to tackle. It was my impression that there was more flexibility with mailchimps templates than I see. I send out emails with more than the one or two topics that your templates show and as someone who doesnt want to write code I think it needs to be made clear that it is a necessity. If this is the case the program is not going to work for me…..it looks great but it also has to be easy for me not hard
Hi Susan, this article is about our template language, which is primarily used by web developers who are building templates for their customers. The “repeatable sections” feature is great if a designer wanted to make pre-defined, pre-formated “blocks” of content for a client to just fill in.
If you’re just talking about adding content to one of our built-in MailChimp templates, then all you have to do is add your content (exactly like you would in Microsoft Word). If you’re looking at our templates and you see “one or two topics,” that’s just placeholder text to give you an idea of how it can look. You’re not actually restricted to one or two topics. That would be kind of weird!
Your code is broken in your editor. I just tried stepping through a very basic template and when you add “mc:repeatable” your editor window breaks. Nothing can be clicked to become editable and your container div that holds the window is reduced to 150px.
So pretty much your code is broken on the MailChimp side of things. :P
If you need to me reproduce the bug let me know.
Hi Tony, it would be extremely helpful if you could reproduce and show us. Thanks!
The bug is two fold. It’s on my end and on your end.
It was on my end because I placed a repeatable section within a editable section.
It’s your end because when that happens your editor breaks and it doesn’t render the full div tag for the editor window. It also makes it so that any region before it is no longer clickable. So basically the whole template doesn’t work.
To replicate this bug here’s what you need to do:
1) Create a template and place within the tag place the mc:edit attribute.
2) within that tag nest a table and within its tag make that repeatable.
3) Upload template to your template folder
4) edit the template and you’ll notice it doesn’t work
Your documentation needs some help.
By the way, why is it so dang hard to find the media manager? and why it is only accessible to upload files when you’re editing content? Who thought that user experience through?? If I have graphics for a template I want to be able to upload those to your server but the only way I can do that is if I open a template up and edit it to upload images. That seems a backwards to me. How about you?
Thanks for the details. And the reason for a lot of the weirdness you’re experiencing with the image gallery UI is because we’re actually relying on a 3rd party WYSIWYG editor. We’re working on our own image gallery and editor solution to make it all seamless.
Anytime Ben. Regarding the image gallery I’m just wondering why we don’t have a drop down from the main navigation that takes us straight to that or at least pops it open in a new window instead of only being able to get to it through an editor window. But that may be the problem You can contact me offline for this. Email me back at tbianco [at] velocemedia.com.
One important technical point that caused problems with our custom template. You should not assign both mc:repeatable and mc:edit to the same HTML tag. For example, rather than:
[div mc:repeatable="my_repeat" mc:edit]Repeatable stuff here[/div]
you’ll need separate nested HTML tags, like this:
[div mc:repeatable="my_repeat"][div mc:edit]Repeatable stuff here[/div][/div]
When including both properties on the same tag, the editor will sometimes work fine, but in other cases adding a new item will yield strange behavior like populating a block with content from the wrong repeatable section.
This scenario isn’t addressed in MailChimp’s template language docs or related blog posts (at least, not anywhere we could find). Likewise, it isn’t clear whether we should provide a name for mc:edit blocks that reside within a repeatable section. The documents clearly say that having multiple mc:edit blocks with the same name is bad, but it’s not clear whether the repeatable feature is smart enough to give each repeated editable block it contains a unique name. For now, we’re just using mc:edit without providing a name when used inside repeatable areas, rather than mc:edit=”my_editable”.
Very much appreciated, Chris. FWIW, we’re working on putting together a wiki for the template documentation, so we can more easily add and edit. I’ll also FWD your comment on to the team.
I would also like to add – once you delegate a repeatable section, the “style” dropdown menu no longer functions. meaning you can’t assign headers or other styles to the template editor, unless you do it via code.
Also – the html output by the editor is completely wrong. it is all tags. not true – tags or even tags. just span and tags.
any thoughts on this? maybe switch to the new ckeditor for your editor.
Thanks, will FWD this on to our nerds. And yes, we’re currently testing ckeditor. If testing goes well, we may switch late this month.
sorry the editor stripped my comment of tags –
Also – the html output by the editor is completely wrong. it is all span and break tags. not true h1–h6 tags or even p tags.
Ben – Hey Mate I spent the whole day trying to get the Styles in the WYSIWG to accept my primary and secondary heading classes which thank god is working now.
BUT as soon as I add in a repeatable region it stops working! : (
What gives?
Can you help me out – I got a big oppertunity coming up and I have been recommended to get this job across the line. Little bit of a herad up and I will be in the good books!
Hey Matthew,
Can you elaborate on the trouble you’re having? Are you nesting your editable and repeatable areas correctly? Be aware that an mc:edit area must be nested within an mc:repeatable area, and that you need to define unique names for each of them.
For example:
div class=”repeatingcontent” mc:repeatable=”repeatingcontent”
div class=”note” mc:edit=”note”
This is a note!
/div
/div
And it seems like you’ve gotten your title/subtitle headings working, but just to recap: you must set the classes as .title and .subTitle in your CSS, and within each declaration block (those commented lines above your CSS rules) set the @style declaration to @style title and @style subtitle in order for the options to show correctly within the app’s template editor.
Feel free to shoot me an email at fabio at mailchimp dot com if you think I’ve missed what you’re trying to get at. I’ll be happy to help you get squared away.
Any chance of there being a way to do an automatic bullet list, i.e. TOC, based on and linking to the repeatable titles in the body? I.e. you have 10 items in body, each in a repeater, and we want to have a table of contents at the top of the sidebar.
thanks
Whoops. Looks like this is indeed possible, and old news. I’m surprised it’s not linked to here!
http://blog.mailchimp.com/table-of-contents-merge-tag/
Hi,
Can you help me with this code?
The ‘Eye’ and the ‘+’ signs of the repeatable blocks don’t display at the lower bottom and instead are placed somewhere at the top right and makes the adding and deleting blocks difficult.
—————————–
30
SEP
ADULT MINISTRIES
Curabitur vulputate, ligula lacinia scelerisque tempor
Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci….
———————————-
Thanks
Shravan
I absolutely love this feature; in fact, I think it’s one of MailChimp’s greatest assets and not advertised nearly enough. The ability to create a template myself rather than pay a designer — and then make sections both editable and repeatable so that other staff members without HTML knowledge can add blocks of content — is a big time-saver, and I haven’t found it in any other service. Haven’t run into any trouble with it either … keep up the good work guys!
Got some problem knowing how to add mc:edit=”" properly to editable copy sections.
If I do this:
Design
My style is completely ignored
But if I do this:
Design
Everything looks great.
Should I just use spans instead of p’s?
Oh btw I’m a complete noob
Cheers
Sorry
If I do this:
[Design]
“Design” has no style
But if I do this:
[Design]
It looks great
sorry
don’t know how to post code