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:

  • /all-in-one - all-in-one template .zip file
  • /components - buttons, navigation, spacers, and dividers
  • /grid - the grid system
  • /layout - the base layout file
  • /sections - all the template sections

Only the all-in-one template .zip file from the /all-in-one 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.


Working with MailChimp

We've made a video tutorial on working with our email templates in MailChimp. Please watch this first, as it covers the most common questions and issues:


Uploading to MailChimp

Inside the /mailchimp/all-in-one/ folder, you'll find the .zip file that you need to upload to MailChimp.

In MailChimp, go to Templates -> Create Template -> Code your own.
Choose the "Import zip" option, name your template, and browse for the .zip file mentioned above.

Important: once the import is finished, you will be redirected to the Template edit screen, which shows a preview of your imported template. Do not try to use the "Design" view here, as this is not the place where you build your email layout for your campaign. Instead, as instructed in the video tutorial, just click "Save & Exit" on the bottom right of the screen.

Supported Template Tags

The following MailChimp tags are supported:

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

See the MailChimp template tags reference.

Campaign MERGE tags
  • *|MC:SUBJECT|* - sets the <title> tag's content, useful when email is viewed online
  • *|MC_PREVIEW_TEXT|* - outputs the email preview text
  • *|LIST:COMPANY|* - shows company info, as defined in your account
  • *|LIST:ADDRESS|* - inserts your company or organization postal mailing address or P.O. Box as plain text
  • *|ARCHIVE|* - URL to view the email in the browser, on your campaign's page
  • *|UNSUB|* - generates the unsubscribe URL
  • *|DATE:Y|* - inserts the current year
  • *|REWARDS|* - outputs the MonkeyRewards badge, if you're on a free MailChimp plan
Automation MERGE tags

These MERGE tags are available in the notification sections.

  • *|FNAME|* - outputs recipient's first name
  • *|CART:URL|* - generates URL to shopping cart
  • *|ABANDONED_CART|* - loops over items in cart for e-commerce automations
  • *|PRODUCT:IMAGE_URL|* - generates URL for a product's image
  • *|PRODUCT:TITLE|* - inserts the product's title
  • *|PRODUCT:DESCRIPTION|* - inserts the product's description
  • *|PRODUCT:PRICE|* - inserts the product's price
  • *|ORDER_SUBTOTAL|* - shows order subtotal
  • *|ORDER_TAX_TOTAL|* - shows order tax total
  • *|ORDER_TOTAL|* - shows order total amount
  • *|HTML:ORDER_BILLING_ADDRESS|* - outputs formatted billing address
  • *|HTML:ORDER_SHIPPING_ADDRESS|* - outputs formatted shipping address

If you need to customise the product to use other merge tags, see MailChimp's merge tags cheat sheet.


Customisation

The template has many customisation options through MailChimp's interface, organised by section (see video @ 7:50).

These settings include:

  • page background colour
  • responsive font settings
  • setting the background images and colours of sections
  • customising buttons background and text colour

MailChimp's "Layouts" feature

Our all-in-one template works with MailChimp's "Layouts" feature (explained in the video).

Although needed for an all-in-one template, this feature isn't recommended for cases where you need only a few modules in a template in MailChimp, with no other modules to choose from. This is a common case for freelancers that provide pre-built templates to their clients by building templates manually from the individual sections we provide.

If you're a freelancer building ready-made layouts for your clients by using the base layout file and individual sections, we strongly advise removing the mc:variant="..." tag from all sections that you use. This way, your client will only see the intended layout.


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. This is particularly important with MailChimp, so please take the following into account.

Conflicting Browser Plugins

The Grammarly browser plugin severely affects online email editors, including MailChimp. By injecting itself into the page, it corrupts email HTML, resulting in a broken template.

Please disable any plugins such as Grammarly or Adblock when using an online email builder.

As a rule of thumb, we recommend disabling any plugins that manipulate content on a web page when using any of the integrations provided with our email templates.

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 HTML:

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 "Design" tab, 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. Outlook.com, 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 Outlook.com or Lotus Notes. MailChimp does not change it for you.

Outlook Background Images

Same as with the above, MailChimp does not fill in the URL for the image in the <v:image src="..." /> from the VML code. You also need to do this manually, by editing the template HTML code.

This is very important!
Setting a background image just with MailChimp's visual editor does not update this code. Outlook will not show the correct image unless you manually edit the HTML.
Tip: use the StampReady integration we provide, to build your layouts in StampReady's modern builder and then export to use in MailChimp. StampReady's editor properly updates background images.

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 potentially lead to message clipping in email clients such as Gmail. Increased CSS size can also lead to Gmail not taking the CSS into consideration at all. While we did test and found that Gmail's limit is not reached with our templates, always send yourself a test email to check.

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 for templates with dozens of modules.

Scrolling issues

MailChimp's builder has a bug that sometimes disables scrolling when you add a new section. We've seen that adding another section, or saving and refreshing, usually takes care of it.

What happened to my content?

MailChimp has a 'feature' called Recovered Content, which tries to be smart and match content from previous campaigns into your layout. Although well intended, this is frustrating when you add a new section and see its layout/formatting broken, because an image was completely replaced with some text, for example (check the video tutorial, it happened to us too).

What usually works is removing and then re-adding the section that got corrupted by this recovered content functionality. Sometimes, you might even need to save and refresh the page.

Preview looks weird

MailChimp's application styling overrides our template's styles. This is clearly visible in the visual editor, but can sometimes be seen even when using their preview tool.

Always send yourself an actual test email from MailChimp's preview tool, and check in an actual email client.


Next Up: Campaign Monitor →