Our email templates include a MailChimp version, which you can edit in their builder.
The MailChimp-integrated files can be found in the /mailchimp folder.
This folder has the same structure as the standalone files from the /html folder, only that all files inside it are editable or ready to use with MailChimp:
Only the prebuilt templates from the /templates/zips-for-upload folder can be uploaded directly to MailChimp in order to be used in a campaign. All others are just for creating a MailChimp-compatible template yourself, which you then upload to their service.
If you're planning on creating a MailChimp template yourself, please first take a look at their documentation on importing a custom template, and then at our own templates to understand how to do it.
Inside the /mailchimp/templates/ folder, you'll find another folder named /zips-for-upload.
This folder contains prebuilt templates .zip files, organised into folders by function.
In MailChimp, go to Templates -> Create Template -> Code your own.
Click the Select button in the "Import zip" box, name your template, and browse for one of the .zip files mentioned above.
The following MailChimp tags are included:
See the MailChimp template tags reference.
See the MailChimp merge tags cheat sheet.
When editing one of our templates in MailChimp, you can click the "Page" section on the right of their editor, to get access to various customisation settings.
These settings include:
Most visual email builders are limited in functionality, meaning they don't or can't allow fine-tuned control over the template as if you were to manually edit the HTML code. That being said, please take the following into account.
Our email templates use the CSS @import to pull in Google web fonts.
This is inexplicably still not supported by MailChimp, so all our prebuilt MailChimp templates from the /templates folder, as well as the base layout example, are using a different technique - a <link> tag in the document head.
However, a frustrating issue occurs when you use some other service, like StampReady, to export to desktop and then upload to MailChimp:
The hamburger menu icon is visible only on the mobile breakpoint, so it can't be edited with MailChimp's visual editor.
Instead, you need to edit it manually in the code.
MailChimp is unfortunately very limited when it comes to background images, at the moment.
You can set a module's background image in the "Page" section, by replacing the default dummy image.
Other settings such as background size, position, tiling (repeat), and colour are available:
The downside of this is that it works by defining some CSS in the template's style tag. This means that email clients that don't support CSS-defined background images, will not show the image (i.e. Lotus Notes).
Because our templates use the background attribute when setting a background image (to ensure maximum compatibility), this means that you need to manually edit the code yourself, if you need background images to show up in clients such as Lotus Notes. MailChimp does not change it for you.
Same as with the above, MailChimp does not fill in the URL of the image in the v:rect from the VML code. You also need to do this manually, by editing the template HTML code before you import it, or after (in MailChimp's code editor).
Unfortunately, the MailChimp editor currently duplicates the @media CSS query, for every declaration in part. This will increase the message size considerably, and can lead to message clipping in email clients such as Gmail.
Always test before you send!
Please note that the MailChimp editor is very slow when working with the all-in-one template file. This is a limitation of their template builder, and unfortunately there's currently no way to overcome it.
It's also buggy sometimes, resulting in being unable to scroll after you add a new section, or replacing your content with no control over it. We cannot control this, but we've seen that saving and refreshing the builder usually works.