Hello, my name is Crystal
I'm a web designer and developer in Victoria, BC, Canada
I design and build mobile friendly websites using WordPress


Adding mailchimp’s drag and drop editor to a custom template

Written on September 24, 2019 at 4:20 pm

Today a client asked me if I could add Mailchimp’s custom drag and drop editor to a custom template.  In the past when I looked up this solution for them, after about 2 hours looking through Mailchimp’s documentation, I found a brief note that said it wasn’t possible to add the drag and drop editor to a custom html template.   At first I thought I would reiterate to my client that it was not possible, but I decided to look it up again to see if anyone else had figured it out. 

In a stackoverflow post, someone had posted a link to the html code for one of Mailchimp’s default templates.  Unfortunately they hadn’t highlighted the exact code needed to make the editor work, but by some trial and error, I found that adding the code below to the template’s main content area will enable the drag and drop editor on your custom template.

<div  mc:container="body_container" mccontainer="body_container"></div>

The mc:container tag will add the block editor section. The mccontainer tag (without the colon) is required for saving the content.  These tags can be added to either a td or div tag (div tag shown above for context).