Tutorial: Basic HTML Template for Mailchimp

So you’re an email developer (or not!) who’s been asked to whip up an  editable (insert joke about edible vs editable here) template for Mailchimp. Here, we’ll go over how to create a basic, one column template that includes a full-width image, some text, and a button link.

For the purposes of this tutorial, I’m going to assume that you already know how to code simple emails using basic HTML. The great thing about Mailchimp’s templating language is that we just need to add attributes to the appropriate places and we can be in business fairly quickly!

One more note: much of my base code is from goodemailcode.com, which is maintained by Mark Robbins. You can find additional tutorials and explanations about coding emails there.

To start, here’s the completed code. Below I’ll break it down a little more to explain the attributes used in Mailchimp’s template language and where they go.

Just kidding, another note: I don’t code my emails using <div>. I find it’s easier for my brain to keep track of tables and rows instead. It might bloat my code a little, but I’ve made peace with it … so far.

Step 1: Making our areas editable

In order to make our areas editable, we add mc:edit to the element. Each editable area is required to have its own unique name. One important thing to know is that any code nested inside the container with the edit attribute will show in Mailchimp, which can get tricky. We’ll cover this more when we go over buttons.

Image

Important info about images: If you want to use high-res (2x) images, you must set the size in Mailchimp in the image settings. Otherwise, the image will blow out to full size in Outlook. You only need to set the width Mailchimp will calculate the correct height.

Text 

Using conventional names like body will make switching templates easier, if needed.

Button Link

I’ve found coding buttons for custom Mailchimp templates to be a little tricky. Many times I’ve either ended up having to use the source editor to wade through extra code, or the button ends up not showing right. What you choose to do depends on who is creating the campaigns. For example, I can deal with some extra HTML in my edit window easily. Someone without HTML knowledge may struggle. If you need to code for the latter situation, this takes something like VML for Outlook out of the equation. After much fiddling, this is the code I’ve come up with. The button has rounded corners everywhere but Outlook. I consider rounded corners a progressive enhancement, so it doesn’t bother me.

Step 2: Make areas hideable

You may also want the option to hide different elements. Maybe there’s an email going out and you don’t need an image or a CTA. Mailchimp has you covered by adding the mc:hideable attribute to whatever element you want to hide. I recommend putting this on either your container <div> or <tr>.

For example, if I want to hide my image, I’d put mc:hideable on the <tr> so the entire row is hidden:

Important about hideable areas - to hide an area, you need to hover over the section but this will sometimes overlap with an editable block like a text area which will make clicking the hide icon impossible. To work around this, we can add the following CSS in our <styles> section -

This will add a strip across the section which allows you to click on the hide icon without activating an editable block!

Special thanks to Steven Hambleton for this nice snippet of CSS to make the hide icon easier to click!

Check out this tutorial from Steven Hambleton at Emailancer to see how you can change the icon and move it out of the way

Step 3: Footer!

Make sure you add *|UNSUB|* in your footer, or Mailchimp will add its own default footer. 

Step 4: Done!

And there you have it, your first basic Mailchimp template. Super easy, right!? Give it a try and let me know how it went!