03.11.2022
Mailchimp: How to Build an Email Using Mailchimp Template Language
This article can be of use to mid-level HTML developers and advanced Mailchimp users. There are two main ways to build an email template in Mailchimp:
- using a drag & drop editor;
- creating a HTML email.
Now there is one more option available — you can create an email with the help of Mailchimp Template Language (MTL). It allows you to edit HTML Mailchimp templates like you would in the drag & drop editor. This means that once you code an HTML email template, people who aren't familiar with HTML coding can easily edit it.
In one of our previous articles, we shared how to work with an HTML template in Mailchimp. This time we want to tell you how you can get started with MTL, how we use it to create email templates, and what challenges you may face along the way.
Apart from that, we will walk you through the process of creating a modular template in Mailchimp Template Language for our client. Looking at a real life case, it will be easier for you to see what problems you might make and get the gist of our method which will help you to modular Mailchimp Template Language.
Importing HTML Email into the Mailchimp Template Language
Let's start: we have an HTML email and we need to insert tags in Mailchimp so that other people can create and edit emails like in a drag and drop editor.
We'll use a big modular template consisting of different blocks as an example.
Once we learn how to code this email in MTL, everything will be possible for us. Just like with LEGO.
We will stick to the following algorithm:
- Break down our modular template into blocks for people to use in the future. These blocks are different from those in the custom template.
- Prepare everything in the Edit code panel to edit the blocks.
- Create a new template in the Templates section.
- Integrate MTL elements into every block and test them one at a time.
- Test the repeatable blocks and see how easy they are to edit.
- Test the email on different clients and devices.
Step 1. Break down our modular template into blocks
It is important to keep in mind the result you want to get while creating an email. This way you'll avoid adding excessive blocks.
Basically, we will create only one block that a user can then copy as many times as they like. The block will be variable and it will contain all types of content present in the modular template.
This is what a block can contain:
- an image;
- a button;
- a button with an image;
- a button with an image and text;
- a product block;
- a block with one product.
This what it looks like:
There are many options to choose from, so you need to decide exactly what you need before you start building the template.
We often create such templates for clients who want to build simple automated email campaigns on their own. We usually discuss the content of the modular template and the elements they will edit.
For example, we decide on an image with text and a button below. We can use either one or three blocks for this, depending on the situation. People tend to go for an email with an image or with text and a button. There is a more user-friendly way: making separate blocks for the banner, button, and text. It is like breaking a LEGO brick into three smaller bricks. These smaller bricks give the user space for creativity while editing an email.
There is one more example — a product block. While creating a modular template, we can choose from blocks with:
- one big product;
- two products in one line;
- three products in one line.
This is what a block looks like in the modular template:
This works for a modular template but to make it look good in MTL, we need to customize it a bit.
In the screenshot above, you can see two blocks. The first one includes the following elements:
- header;
- text;
- a two-product layout;
- a button;
- a background.
The second block differs only in the number of products — there are three of them.
We can make two variants:
Even though they are different from the initial modular template, they will work best for the user.
This is why it is important to envision how you can break the email down at the early stages of creation.
You may not be able to think of every little detail but you will still see what you'll need to work at. Now, we are going to take a look at a custom template and the blocks it consists of so that we can edit it with the help of MTL.
Step 2. Prepare everything in the Edit code panel to edit the blocks.
There isn't a solely right algorithm for creating an email with MTL. Let's organize our work space together to make it easier for us to create a template. If you're new to this and you don't really know where to start, you are welcome to use our guide.
Code editor is a must. We use Sublime as it lets you work on a template in three active tabs at once:
- HTML coding of the modular template. There are no MTL settings there yet — we will just copy blocks from it.
- The modular template with MTL where we will insert the customized blocks and continue with HTML coding until we have the final product. Later on, we will import this code to Mailchimp. The first thing we will need to do is to keep only those parts that the user won't edit. As a rule, these parts are the footer, the header, and a banner (if it will be included in all emails). You can change text and images in these blocks, but you can't delete content completely. We will add the necessary tags while tuning our template in MTL.
- The workspace where we will interact with each block individually and write tags for them.
The three-tabs thing is necessary to stay consistent while creating the template. It's a simple process but you may easily get distracted and miss something, so this approach allows us to add the blocks to the final file step-by-step.
Step 3. Create a New Template in the Templates Section
To make things work, we need to create a new template in the Templates section. This template will be the base for the end user to create and edit emails.
Go to the Templates section and create a new template:
Choose the option 'Code your own', copy the code, and save the template:
You can use the template to create a new email. Go to Campaigns and create a new email:
In the Design section, go to the Saved templates to choose our template:
Note that when you create a template in the Template section, the email will be long, as all blocks will be displayed there. However, when you use the template in an email campaign, the email will be shorter, as it will be made of only one block that can be copied and edited. Don't worry, this is how MTL works: the MTL settings aren't applied to the template, so you see all blocks in an email. All tags will be active when you will be creating a "working" email.
This is why we will refresh the page with our template in the Templates section after every step to see how it looks in the Campaigns section. Then we will run a test campaign using our template.
Important! You don't need to create a new campaign every time you refresh the page with the template to see the introduced changes — this will happen automatically. You just need to open the campaign once again.
Still, sometimes it may not work, especially if there are mistakes or bugs in the template. If you're not sure the changes appeared in the template, it's better to create a campaign once again. There, you can edit your email however you want — it won't affect the template in the Templates section. It works in the opposite way: the edits in the email can be seen in the Campaigns section after you tune it in the Templates section.
Step 4. Integration of MTL elements
The main task here is to create a template.
We start from doing everything in the code editor. We take the blocks we want to integrate from the original HTML code and insert them into the workspace tab one at a time. In the workspace, we write the tags for MTL to make this area editable in Mailchimp.
We have two types of editable elements:
- text
- images
For every editable element, we write unique tags. This is what they look like:
Here the mc:repeatable attribute makes it possible for the block to be copied when you click on "+" in the Mailchimp interface. However, this is not a must: we use this attribute when we want the user to be able to copy the paragraphs. Although the user can do the same in a text editor, the mc:repeatable attribute is usually helpful and definitely won't hurt your email.
The tag mc:edit="body_text_1" makes the element editable. For it to work, every element requires a unique name, in this case — body_text_1. This rule applies to images as well. If your modular template consists of many elements, you may easily get mixed up with the unique names in the middle of the setting process, so a systematic approach is crucial.
There may be several hundred unique names in a template, so here's a rule you may find useful.
Add the following elements to the tag names:
- the tag area (the body of the email, products, article, recommendations);
- the content type (text, image);
- the number of the element.
In our case, we start from the body of the email, so the tag name is body_text_1. If it was in the second image with the products, then the tag name would be products_img_2. Even in this case the number of tags can go up to several dozens but still it will be better than keeping up with numeration through the whole modular template. It's worth noting that Mailchimp doesn't have any regulations or rules for the tag names — they just need to be unique for the email you're working on. Our advice is to keep your tag names structured so that it will be easier for you to navigate in the email during the editing process.
Add these tags to div or span where the text is located.
Here's an example:
Each of these blocks (text, text + banner, button, etc.) should be detected as a variation of the main block with its own name. This is why we add the following tags to the whole block:
The tag mc:repeatable="EMS", as you may remember, allows us to copy the block. In our case it is essential that we can copy the whole block and choose another display mode.
For example, we can copy this text block and make a button out of it. Note that we have a tag name here — EMS. You can use any other name, just make sure it's the same for such email elements. This way one block will have several display options.
If you have two unique names in a block, there will be two blocks in the email instead of one by default. This isn't a mistake — it just doesn't work with our approach.
We need to make sure that the user will be able to create an infinite number of the block variations.
This is why we include different variations in a block:
We will work with this block: copy it, choose the necessary code, and edit it. We won't interact with the HTML code in any way.
The mc:variant="Headline and text" element is a name for a block variant. It needs to be unique and to be displayed in your Mailchimp interface. Give it a logical name so that the user can easily find it.
This is what it looks like in the interface:
It is important that the block doesn't distort the email, so every element of the structure should either be coded with a tr element or be stored in a separate table. This is what the complete code of the block with these tags looks like:
The necessary tags follow the tr element that is used throughout the whole block. This code will be included in the final version of the HTML code. The first brick of our template is ready — now we can test it in Mailchimp.
The whole procedure needs to be repeated for the rest of the email elements. After that, they need to be pasted into the HTML code one by one.
Looking at the example, you'll see that it is quite easy in general. The tricky part is giving content areas the correct tag names and breaking down your emails into blocks. That is why we don't dive into the email straight away, but work on one block at a time. It is better to fix a few bugs in one block than to find dozens of them once you finish the email. This way you can also track the progress of email creation which makes the long process rewarding.
Test the (Repeatable) Blocks
To see what the edited email looks like in the Campaign section, refresh the page containing the HTML code in the Templates section. You might have to create a new campaign with the same template for the changes to appear.
Test the HTML Code
Once all blocks are correctly displayed in your Mailchimp interface, it's time to test the email in different email clients. It's better to include all blocks you have to make sure we didn't mess up the MTL tags.
Common Mistakes
Even if you're good at HTML coding, you still can make some mistakes with MTL, especially if you work on an email with a big number of elements.
Let's take a look at some mistakes that you may make and how to avoid them.
You Used the Same Name for Different Elements
This often happens with big emails, usually with images or text. If two elements have the same tag name, they are duplicated in Mailchimp. For you it will look like a bug, but not for the platform. Here's a tip: if the MTL elements look weird while testing, check if there are duplicated tags. This will probably help you.
You can see in the screenshot below that the image in the footer and the image in the header have the same tag — as a result, the image is doubled.
We're lucky that in this case the images are of the same size. If we accidentally repeated the tag from the main banner containing the product card, it would look like the HTML code was broken because we forgot to add a closing tag. Go to Mailchimp: if the bug is seen only there, while the email looks good in the browser, the problem is in the tag names.
You Did a Bad Job Breaking Down the Blocks
A common problem here is connected to the absence of closing tags or to the misuse of the opening tags. Later on, we will take a look at a case where we will have to divide one product block into three blocks — this is where we can make a mistake that will affect the way the email is displayed. We will see how we can divide such blocks.
The second type of mistakes related to the breaking down of the blocks is the logical mistakes. The things that look good in the modular template coded with HTML may not function properly in the template with the Mailchimp Template Language. For example, when there are dividers both at the top and the bottom of the block. If we place such blocks together, there will be two dividers in one place (at their junction) and one divider on each side. This will look weird, so we need to place dividers and blocks separately.
You Forgot to Add MTL Tags Somewhere
If everything looks fine and you're able to add and copy blocks but you can't edit them in your platform interface, then you didn't write tags for an image or text. These two content areas tend to be neglected when it comes to adding tags for further editing.
It might take a while for you to spot the problem and when you start fixing it, you can get mixed up with the tag numeration, especially in a big template. If you find a mistake after some time, you'll most probably use a tag name that already exists. This will lead to another mistake.
To avoid making such errors, be careful and check every new block (especially if this is not a routine task for you yet). You can make the numeration system easy to remember. For example, don't give the text blocks the same tag names that only have different numbers: txt1, txt2, txt3, etc. It's better to include the area of the text into the tag name: footer_txt1 (the first text in the footer), product_txt1 (the first text in the product block). This way it will be easier for you to fix the numeration if you forget about a text in a block.
Case Study. How to Convert a modular Template into Mailchimp Template Language
Getting Ready
Within this case study, we will take a look at how we set up a modular template for our client. You will see the editing process and how the initial modular template looks compared to the Mailchimp template.
First of all, we need to figure out the number of blocks in our template. The blocks and our comments are given below.
The footer is the same for all emails, so there's no need to make it dynamic — we just add the necessary links. As for the banner, it needs to be editable. Since it will go after the footer, we won't use either the mc:variant or the mc:repeatable attribute — all blocks that can be copied and repeated will use the mc:repeatable attribute. Like in the code mc:repeatable="ems". Since the image is empty, a simple attribute will do.
Here we have two blocks that can be combined with other ones. They aren't functional on their own (they don't even have a button). We'll talk about them later. It is important not to forget about the background in the second block when we're forming it in the MTL.
The end user doesn't need to see the whole list of padding options — they will need to choose only one option based on their preference. To make the choice easier, we should make a separate block for each padding and give it a clear name.
In this case it is easier to create different blocks with two or three products than to create one variable block, as adding many elements to one block can lead to a mistake. Apart from that, the user may find it difficult to edit the block and change the product value.
Repeat the process and break down each padding just like we did before.
The second option is a two-product grid. We make a separate block for it.
We create a separate block for a three-product grid as well. Pay attention to the horizontal rules: we either include them in each block or create them individually. It is more preferable to make them separately as this will allow the user to place them wherever they need and edit the email.
Including a horizontal rule into each block can result in a limited number of block combinations or even redoing the template.
Here, as you can see, one horizontal rule would be enough but there are two of them because there are two blocks placed together.
In this case we have a separate block. There won't be variations in the email logic if we need to include only the player statistics or only the number of games played. If there were these variations, we would make three blocks instead of one.
Compound blocks need to be divided into several smaller ones, For example, in the screenshot below, you can see a block with one background containing a number of product cards at once.
We make a block for each product, so that the client has an opportunity to choose a product card and work with it.
Now we create two more blocks — for the subtitle and for the title without background. As for paddings, we also prepare separate blocks for them to make them easy to combine with other content blocks.
Now we see what blocks need to be implemented in the email and how we should do it. It's time for the next step.
The only thing left is footer:
It will be the same for all emails (just like the header) meaning that we make only one block for it.
Create the Template
It might seem like a lot of work but it's not hard work. If you know how to edit HTML code written by somebody else, you'll be just fine,
So, the HTML coding looks good and the email is displayed correctly on all platforms.
Now we need to insert the necessary blocks into containers and write tags for these containers. Be careful while doing this and don't forget about opening and closing tags or backgrounds. You won't have any problems with this task if you have a clear understanding of your code structure.
You sure know what an HTML table looks like:
Here tr stands for table row and td — for table data. We set the email content to take the main table with full width where each new tr tag is a new container. This way it will be easier to navigate through the code and distinguish between the containers
We'll start assembling the template from the header and footer.
We will create two files in the editor: the initial HTML code and the version we'll add to the blocks. Copy the initial HTML code and paste it into the second file. Now delete everything besides the header, footer, and the main banner. Write mc:edit="image_1" and mc:repeatable for the banner to make the image editable.
This is what it looks like in the code:
Now we have a minimalistic looking template:
Next, create a full-width table there and add the necessary blocks from the initial file. Note that we add MTL tags to the tr tag with content, not to the table.
For the text blocks, we add tags mc:repeatable mc:edit="unique tag name" to make them editable.
Take a look at the code for the welcome text:
At this stage we can already test the email to see if Mailchimp will locate the tags. Upload the HTML code to Templates and create a new email based on this template.
Testing the email campaign is a must because we won't be able to see Mailchimp Template Language elements in the templates.
If we point at the bottom left corner of the Edit tab, we'll see that Mailchimp offers to choose and copy the block — this means everything works.
As a rule, text is followed by a button, so we suggest adding all button variations to the tr tags.
It is important that all elements have the same name in the mc:repeatable="" attribute and different names for the mc:variant="". Technically, we create only one block with a number of variations.
This is what the code looks like now that we added a button:
We do the same thing for all buttons, update the HTML code in Templates and see how the email has changed. If a block can be copied and if it is actually variable, it means everything works correctly:
The next step is to implement the title in the text box. Here's what it looks like:
This is a table where each table row is inside a particular div element.
Which editing option will the user find easier: the one where each row is editable or the one where you can only edit the whole text?
Asking yourself such questions is crucial at the stage of creating a template with the help of Mailchimp Template Language. Your task is to create a user-friendly space and if you're not sure which option to choose, try both of them.
Think in what ways the template can be used.
The number of table rows can differ if you edit the whole text instead of each row. That is why we add a repeatable tag to the td element, not the div one with the text.
Take a look at the code:
All we have to do now is to add the rest of the blocks in the same way. You don't have to be an HTML coder or a skilled Mailchimp user to do it but you have to be careful and attentive to detail.
These qualities may be useful, for example, when you work with multi-variable blocks — we add each block to its own tr.
Like this one:
Here we should take a look at a block with the product grid that we break into smaller blocks. We need the third tab to copy the product block there. The block looks like this:
We create three blocks out of it:
- With one product.
- With two products.
- With three products.
If the email is coded according to the tabulation rules and if you have experience dealing with HTML codes written by other people, you won't find it difficult to find the necessary tables.
You can see this part of the code below together with our commentaries to see where each product block is.
We delete two variations of product display that we won't need and get the code to insert in the tr element. Don't forget to write the mc:repeatable and mc:edit=" attributes for editable texts and images.
As a result, we gradually create containers for all the three variants, deleting useless blocks as we go. The final template looks completely different from the template that was set up with the help of Malichimp Template Language. This is what a product block split into three parts looks like:
This variant is more convenient to edit. It would be tedious work for the user to delete the products they don't need for the moment if we placed everything in one block. Apart from that, it is much easier to make a mistake in tags this way.
Conclusion
Creating a template with Mailchimp Template Language is a rather simple yet effort consuming process. You can easily tackle it if you know at least the basics of HTML coding.
You probably won't need to convert whole modular templates to MTL — a simple email will be enough. It is also probable that your work process won't be as complex as the one we showed in the article. This tool is certainly worth trying as it allows marketers to set up and edit emails within Mailchimp no-code tools. Mailchimp has a more flexible editor than a standard platform block editor, so don't be afraid to use it, even if you're new to it. This tool may save your company a good deal of money spent on the email set up.
EmailSoldiers
Want to March Our Email Soldiers Into Battle?
If you’re ready to enjoy our services and get gorgeous email design, deep analytics, and comprehensive strategies, it’s time to make the first step. Schedule a free consultation; we’ll get the ball rolling!
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
