May 17, 2010

Repeatable Sections in the Template Language

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.

export_template

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:

repeatable_row_before

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:

repeatable_row_after

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.

upload_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:

repeatable_in_action

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.