1 Folder Structure

Unzip the downloaded file to the local disk on your computer. The MailChimp-integrated files can be found in the MailChimp/ folder.

• MailChimp/
  • All Layouts/ – all layouts folder and files.
    • Layout 1/
      • images/ – all images, Social, Icons, Placeholder
      • index.html/ – index file of layout
      • zip-for-upload.zip – zip file for Mailchimp upload
    • All-in-One/ – all modules are in one files
      • images/ – all images, social, icons, Placeholder
      • index.html/ – index file of layout
      • zip-for-upload.zip/ – zip file for Mailchimp upload
  • grid/ – standard grid examples
  • modules/ – modules each in its own file
  • components/ – buttons, navigation, footer, and spacers

Understand full folder structure and files

2Uploading To MailChimp

Inside the /mailchimp/Select Your Layout/ 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.

Official MailChimp Tutorial

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.

Video Guide Uploading To MailChimp

We’ve made a video tutorial how to uploading our email templates in MailChimp. Please watch this first, as it covers the most common questions and issues:

3Editing Template

The template has many customisation options through MailChimp’s interface, organised by section

These settings include:

• Change Background Colour
• Drag and Drop
• Edit Images
• Clone Edit Delete Modules
• Change Link Colour
• Change Text Colour
• Customize Link
• Customize Text
• Background image support – just click a background image to change it

Supported Template Tags

• mc:edit
• mc:repeatable
• mc:variant
• mc:hideable

MailChimp Supported Template Tags

Important: Please note, MailChimp editor strips the width attribute from all editable images so if template contains any high definition (retina) images or icons, you must specify explicit dimensions for all such images in the MailChimp editor. All our templates contain retina icons and images. It is necessary if you upload the MailChimp version of template.

Video Guide Edit Template in MailChimp Editor

We’ve made a video tutorial how to editing our email templates in MailChimp default editor. Please watch this first, as it covers the most common questions and issues:

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.

Important: Sometimes mailchimp have slow and clunky interface. It’s not our fault, and we are not responsible for this! If you have bugs, first of all try to reload browser page, you changes would be saved!

4Change Google Font

Web Font or Google font not support on some email clients. it’s important to keep in mind, that not all email clients offer universal support for web fonts. best practice to use web fonts.

Generally, the following email clients have good support for web fonts:

• iOS Mail
• Apple Mail
• Android (default mail client, not Gmail app)
• Samsung Mail
• Outlook for Mac
• Outlook App

Web Font Support In Email Clients

Video Guide Change Google Font

We’ve made a video tutorial how to change Google font our email templates in MailChimp. Please watch this first, as it covers the most common questions and issues:

5Outlook Background Images

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.

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.

Video Guide Setup Outlook

We’ve made a video tutorial how to setup outlook background images our email templates in MailChimp. Please watch this first, as it covers the most common questions and issues: