Edit And Customize Email Template With Mailchimp

Mailerstock builds email newsletters compatible with the most popular email service, MailChimp. MailChimp is an email platform that provides the tool to edit, customize and send the email newsletter.

The MailChimp-integrated files of our templates 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: MailChimp enables the user to edit text and image content. You can duplicate and delete any module from the template.

Import Template

After purchasing template from Mailerstock, follow these steps to create template for your next email campaign –
  1. Create an account on MailChimp.
  2. Navigate to the Templates page.  
  3. Click on Create Template.
  4. Import template from your purchased file. You can import template in three ways.

    • Paste in Code – You need to copy content from your template HTML file and paste here.
    • Import HTML – You need to import HTML file only in case if you have hosted email on your location. There should be absolute URL in HTML file for images.
    • Import Zip – You need to import zip file of the template contains HTML and images. You can put all of your images in Mailchimp’s location.
  5. Specify the name of your template while importing zip file.

Customize Your Template

After you import, you can make changes to template design in the Edit Code pane instead of importing a new template. In this pane, you can also add files or images from the Content Manager to your template.

Edit Template

Your template is MailChimp ready. Click on the edit design option and you will find an editor to edit CSS style properties, text, and images. On the left side of the screen, you will find the template preview and on the right side, you will find an editor.

Insert Image

Hover over the image you want to replace, click on the edit and right side you will find the option to insert image. You can insert the image from MailChimp files or from your computer.

Edit Styling

On the right side of the screen, you will find all the styling properties section wise. You can edit colors, backgrounds, font sizes, spacing, border, links and many more.

Insert/Edit Text Link

Click on edit option of any text. You will find the angle brackets to edit/insert the link.

Export Template

You can export HTML template from template archive page and use for your future email campaigns.

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.

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 color are also 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. 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 from the VML code. You also need to do this manually, by editing the template HTML code.

To edit background images manually for Outlook, follow article-

Setting a Background Image for Outlook Version of Email

Setting a background image just like MailChimp’s visual editor does not update this code. Outlook will not show the correct image unless you manually edit the HTML.

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

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.

Also have a look at Best Business email Templates from Mailerstock