Jun 30, 2010

Cool MailChimp Template Trick from Indiemark

One of the winners that Amy announced for our Email Template Throwdown had an interesting dynamic content power trick that I wanted to showcase.

Scott, from IndieMark, won an authentic Wildcat wrestling belt for his "x-ray" template (and made this video to prove it):

x-ray

If you open up his template design and look closely, you’ll see something intriguing bit of code…

First, this is where you’ll find all the winners’ templates:

pre-designed-templates

Go to the "pre-designed" category, and click on "Artists & Designers." You’ll find all kinds of email templates submitted by well-known designers there. Scroll down a little, and you’ll see Scott’s:

x-ray-thm

Select the template, and then you’ll notice a section with some merge tag code that looks something like this:

interested-blank

That’s using one of our dynamic content merge tags, * |INTERESTED| *

If you’ve never heard of them, here’s an article about our dynamic content tags, and here’s a full, more updated merge tag cheatsheet you can bookmark.

Anyway, Scott coded this merge tag so that you could place dynamic content in there, if you have content for a particular interest group. What’s cool is the way that he strategically positioned the merge tag in his code, in order to make his rounded corners work.

Here’s what I mean.

Let’s say I have an email newsletter list called "Tech News" and my signup form lets people check their news interests:

interested-checkbox

So I have some people on my list who are interested in Robots (who doesn’t?).

Now let’s say I’m working on my next newsletter, and there just so happens to be some cool robot video I want to show only to people interested in robots. I can tweak that dynamic content slot like this:

interested-robots

Then, in the slot between those INTERESTED tags, I place my robot content with the video link.

To check what that would look like, click pop-up preview, then the "view live merge info" button.

view-live-merge2

This will let you preview the email for each recipient on your list by clicking little "next" and "prev" buttons.

For those who like robots, the email will look like this:

view-live-merge3

For those who don’t like robots (assuming such people exist), that dynamic content will disappear, and those spiffy rounded corners elegantly collapse:

view-live-merge-collapsed

If you code templates for clients with our HTML email template language, this is a nice little piece of design trickery to try out.