Import a Custom HTML Template

If you want more control over your email design than our templates offer, you can code your own HTML template and import it to your Mailchimp account. After you import your custom template, you can use it for future campaigns.

In this article, you'll learn a few ways to import and edit your custom HTML template.

Before You Start

Here are some things to know before you begin this process.

  • This is an advanced feature and is recommended for users familiar with custom coding. Contact your developer or hire a Mailchimp Expert if you need assistance.
  • Before you create your own HTML template or hire a developer, consider other types of templates that don't require any HTML knowledge.
  • For code tips and best practices, learn about limitations of HTML in email design, and browse Mailchimp's Email Design Guide.
  • When you edit a code-your-own template in the Template Builder, your changes may affect existing draft campaigns that use the template.
  • We'll run your HTML through a validator service to make sure the syntax is correct.
  • Include the *|UNSUB|* tag in your custom template, which is required in all campaigns.
  • Make sure your HTML file's character encoding is UTF-8.
  • Format all images as JPG, JPEG, PNG, or GIF. Include any PDFs or other documents to host with Mailchimp that are linked in your template code.

Import Options

After you or your developer code your template's HTML, you can import the template with one of these methods.

Paste in HTML

To create a custom template by pasting in your own HTML, follow these steps.

  1. Navigate to the Templates page.
  2. Click Create Template.
    button-templates-clickcreatetemplate
  3. On the Code your own tab, choose Paste in code.
    button-codeyourown-pasteincode
  4. On the Edit Code tab, replace or edit the example code, and click Save in the editing pane.
    button-editcode-save
  5. When you’ve finished editing your template, click Save and Exit.
    button-editcode-saveandexit
  6. In the Save Template pop-up modal, enter the name of your template and click Save.
    modal-savetemplate-clicksave

Nice job. You can access your custom template on the Templates page and as a saved template in the Campaign Builder.

Import HTML File

To create a custom template by importing an HTML file from your computer, follow these steps.

  1. Navigate to the Templates page.
  2. Click Create Template.
    button-templates-clickcreatetemplate
  3. On the Code your own tab, select Import HTML.
    button-codeyourown-importhtml
  4. Click Browse and choose your HTML file.
  5. Name your template, and click Upload.
    modal-importhtml-clickupload
  6. Review your template and click Edit Code or Edit Design to make changes as needed.
    button-templateeditor-editcode
  7. When you’ve finished editing your template, click Save and Exit.
    button-editcode-saveandexit

Nice job. You can access your custom template on the Templates page and as a saved template in the Campaign Builder.

Import ZIP File

There are a few requirements to review before you import your ZIP file.

  • Your ZIP file must be less than 1MB and contain only 1 HTML file. If you have more than one HTML file, we'll use the first one we find.
  • Place all images and files in the root directory of the ZIP file and not in subfolders. We'll upload all your images and files to the Content Manager and create absolute paths for you when we convert your ZIP.
  • Use only letters, numbers, and hyphens in the file name. Spaces or unusual characters can cause problems when you import.
  • The upload is case sensitive, so your code must match your file names exactly.

After your file is properly saved and formatted, you’re ready to create your template. To create a template by importing a ZIP file from your computer, follow these steps.

  1. Navigate to the Templates page.
  2. Click Create Template.
    button-templates-clickcreatetemplate
  3. On the Code your own tab, select Import zip.
    button-codeyourown-importzip
  4. Click Browse and choose your ZIP file.
  5. Name your template, and click Upload.
    modal-importzip-clickupload
  6. Review your template and click Edit Code or Edit Design to make changes as needed.
    button-templateeditor-editcode
  7. When you’ve finished editing your template, click Save and Exit.
    button-editcode-saveandexit

Nice job. You can access your custom template on the Templates page and as a saved template in the Campaign Builder.

Edit Your Custom Template

After you import your custom template, you can modify it on the Edit Code pane of the Template Builder. If you used Mailchimp’s Template Language, you can also apply styles on the Edit Design tab.
button-templateeditor-editcode

When you’re ready to use your custom template in a campaign, you can add content and refine your design in the Campaign Builder. Any further changes made in the Template Builder may affect draft and ongoing campaigns that use the template.

More Editing Resources

Where to Edit Template Code
Add a Background Image to a Custom HTML Template
Getting Started With Mailchimp’s Template Language
Use Repeatable or Variable Content Blocks


Was this article helpful?

Anything else we can do to improve our site?