MailChimp

MailChimp Integration

Our email templates include a MailChimp version, which you can edit in their builder.


Structure

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:

  • /components - buttons, navigation, spacers, and dividers
  • /grid - the grid system
  • /layout - the base layout file
  • /sections - all the template sections
  • /templates/html - prebuilt templates
    • /all-in-one - single-file marketing & notification templates
    • /marketing - marketing-related templates, organised by folders
    • /notifications - notification email templates, organised by folders

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.


Uploading to MailChimp

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.


Supported Template Tags

The following MailChimp tags are included:

Template tags
  • mc:edit
  • mc:repeatable
  • mc:variant
  • mc:hideable

See the MailChimp template tags reference.

Merge tags
  • *|MC:SUBJECT|*
  • *|LIST:COMPANY|*
  • *|LIST:ADDRESS|*
  • *|ARCHIVE|*
  • *|UNSUB|*
  • *|DATE:Y|*
  • *|REWARDS|*

See the MailChimp merge tags cheat sheet.


Customisation

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:

  • page background colour
  • hero background image URL and background colour
  • buttons background and text colour
  • footer background and text colour


Limitations and Other Notes

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.

Google Fonts Issue

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:

MailChimp @import parse error
Unfortunately, the @import technique is currently needed with StampReady, so our StampReady templates are using it.
To get around it, you must edit the HTML you exported from StampReady*, and manually change the font import technique.

Copy the import URL, so you have it later.
Then, delete the entire @import code, as highlighted in the example below:
Remove at import code for MailChimp
Next, add the URL you copied, inside a <link> tag, just above your CSS block.
It should now look like this:
MailChimp correct web font import
Warning: note that !important was added for each font-family. This is because MailChimp auto-inlines the default font-family that is set on the tables, and we need to override it. If you don't add this to your web font font-family, the fonts will not be applied in MailChimp campaigns.
* Exported HTML code might not be as clean and organised as the one we provide. HTML knowledge is required.

Hamburger Menu Icon

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.

Editing the hamburger menu icon

Background Images

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:

Setting a module's background image in MailChimp

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.

Outlook Background Images

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).

Code Bloat

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!

Slow/buggy interface

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.