Editing Mailchimp Templates in Backstage Manager: Full Guide

You can bring your existing Mailchimp email designs into Backstage Manager.

Important: Imported Mailchimp templates keep their original HTML code. This means you can't edit them using Backstage Manager's visual drag-and-drop blocks.

Your two options

Option 1: Rebuild in the visual editor (recommended for regular emails)

Rebuild the emails you send most often using Backstage Manager's visual editor, where the design you need is supported. Once built, you can update text, pictures and links without editing any HTML.

Option 2: Keep your existing Mailchimp design

Import the original HTML and update its text, pictures and links using the steps in this guide. This keeps your design exactly as it is, but needs more care.

Our recommendation: use Option 2 for a quick move away from Mailchimp, then gradually move your regular emails to Option 1. The Backstage Manager team can help you decide which templates to rebuild first.

Five-minute quick start

Once your template is set up, every new email follows the same five steps:

•       1. Duplicate your master template. Never edit the master itself.

•       2. Change the content: update the booking link, dates, performers, text and pictures.

•       3. Preview the email in Backstage Manager.

•       4. Test by sending it to yourself.

•       5. Send your campaign.

This guide is in two parts. Part 1 covers moving an email from your Mailchimp campaigns into a master template, which you only do once per email design. Part 2 covers the weekly changes. The examples come from a real Komedia Comedy Club email, so they will match what you see in your own templates.

Words you'll see in this guide

The golden rule

You only ever change two things:

•       Words your customers read, such as dates, names and button text. In the code, these sit between a > and a <, for example >BOOK YOUR TICKETS<

•       Links, the web addresses that start with https://. These sit between quotation marks, for example href="https://www.komedia.co.uk/" for a link, or src="https://...jpg" for a picture.

Leave everything else exactly as it is. If you're not sure, don't change it. And always follow the same order: duplicate, edit, preview, test, send.

Important: Most words and links appear twice in the code. This is normal: Mailchimp adds a second hidden copy of buttons and pictures for people who use Outlook. If you only change the first copy, Outlook users will still see the old version. That's why you should use Replace All, then search again to check nothing was missed.

Tip: In the code, the & sign is written as &amp;. So FRI 25 & SAT 26 SEP is written as FRI 25 &amp; SAT 26 SEP. When you type a new & yourself, write it as &amp;.

Setting up your text editor (once only)

You'll make your changes in a simple text program on your computer, because it has Replace All.

On Windows: use Notepad. It's already on your computer, and there's nothing to set up.

On a Mac: use TextEdit, but change these settings first. If you skip this, TextEdit will damage the code.

•       Step 1: Open TextEdit. In the top menu click TextEdit > Settings.

•       Step 2: Click the Open and Save tab. Tick Display HTML files as HTML code instead of formatted text.

•       Step 3: Click the New Document tab. Choose Plain text.

•       Step 4: Close Settings. In the top menu click Edit > Substitutions and untick Smart Quotes. Curly quotation marks break the code.

How to open Find and Replace:

•       Windows (Notepad): press Ctrl + H

•       Mac (TextEdit): press Cmd + F, then tick the Replace box to show the Replace field and the All button

Part 1: Moving an email from Mailchimp (once per email design)

Step 1: Copy the email's code from Mailchimp

•       In Mailchimp, go to Campaigns and open the email you want to use, for example your latest Comedy Club email.

•       Open its HTML source code.

•       Select all the code (Ctrl + A or Cmd + A) and copy it (Ctrl + C or Cmd + C).

•       Open Notepad or TextEdit and paste the code in (Ctrl + V or Cmd + V).

•       Save the file with a clear name ending in .html, for example Komedia Comedy Club MASTER.html, and keep it safe as your backup.

Tip: Saving as .html: in Notepad, choose File > Save As, set Save as type to All files, and type the name ending in .html. In TextEdit, choose File > Save, type the name ending in .html, and if asked, choose Use .html.

Step 2: Remove the Mailchimp parts

Some parts of the email depend on Mailchimp and will stop working when your Mailchimp account closes. Search for each item on the left:

Step 3: Replace and label your pictures

Upload each picture to Backstage Manager and swap it in, following Changing a picture in Part 2. While you're doing this, give each picture a label, so you can find it easily every week:

•       Find the picture in the code. Just before its link you'll see alt="", an empty description.

•       Type a simple label between the quotation marks, for example alt="Main show image".

•       Do the same in the second copy of the picture, where alt="" comes just after the link.

Suggested labels for the Comedy Club template: Main show image, Photo left, Photo right, Food and drinks and Diary show image.

Tip: Labels stay the same however many times you change the picture, unlike the long picture codes, which change every time. They also show if pictures don't load, and help people who use screen readers.

Step 4: Save it as your master template

•       In Backstage Manager, go to Email & Promotions > Template Designs and create a new template design.

•       Name it to match, for example Komedia Comedy Club MASTER.

•       Drag an HTML block into the email.

•       In Notepad or TextEdit, select all the code (Ctrl + A or Cmd + A) and copy it (Ctrl + C or Cmd + C).

•       Click the HTML block, delete any sample code, paste your code (Ctrl + V or Cmd + V) and save.

•       Check the preview and send yourself a test.

When you've finished, search the code for mailchi, list-manage and mcusercontent. Nothing should be found.

Important: Never edit your master template directly. Always duplicate it for each new email.

Part 2: Making a new email each week

The routine

•       Step 1: In Email & Promotions > Template Designs, duplicate your master template and give the copy a name, for example Comedy Club 3 Oct.

•       Step 2: Open the copy and click the HTML block. Select all the code and copy it.

•       Step 3: Open Notepad or TextEdit and paste the code in.

•       Step 4: Make your changes using the sections below.

•       Step 5: Select all the code in Notepad or TextEdit and copy it.

•       Step 6: Go back to the HTML block. Delete the old code, paste in your new code and save.

•       Step 7: Check the preview and send yourself a test (see Before you send).

At a glance: what to change each week

Each of these is explained step by step below.

Changing the booking link

This is the change you'll make most often. In the Comedy Club email, the show link is on the main picture, the BOOK YOUR TICKETS button and both photos. With the Outlook copies, it appears eight times. Replace All changes them all at once.

This is what the button looks like in the code. The second line is the Outlook copy ("..." means code has been left out to keep the example short):

<a href="https://www.komedia.co.uk/shows/komedia-comedy-club/" ... class="mceButtonLink" ...>BOOK YOUR TICKETS</a>

<v:roundrect ... href="https://www.komedia.co.uk/shows/komedia-comedy-club/" ...>

•       Step 1: Copy the new booking link from your website or ticketing system.

•       Step 2: Open Find and Replace.

•       Step 3: In Find, paste the old link: https://www.komedia.co.uk/shows/komedia-comedy-club/

•       Step 4: In Replace, paste your new link, then click Replace All.

•       Step 5: Do it once more with the old link without the / at the end: https://www.komedia.co.uk/shows/komedia-comedy-club. One of the photos uses this version. Doing the version with the / first stops a stray / being left behind.

•       Step 6: Search for the old link one last time. If nothing is found, you've changed them all.

If only the button should change: if the pictures should still link somewhere else, don't use Replace All. Use Find Next instead, and only replace the two copies next to mceButtonLink and v:roundrect.

Other show links: smaller listings, like the Date for your diary section, have their own links, for example https://www.komedia.co.uk/shows/jordan-brookes-the-part-of-you-thats-always-screaming/?eid=18866. Change these the same way.

Changing dates and text

•       Step 1: Open Find and Replace.

•       Step 2: In Find, type a few words you want to change, for example SAT 26 SEP.

•       Step 3: In Replace, type the new words, for example SAT 3 OCT, then click Replace All.

In the code, the date in this template looks like this:

<span ...>FRI 25 &amp; SAT 26 SEP, 8PM<br></span>

Button text: search for the button wording, for example BOOK YOUR TICKETS, type your new wording and click Replace All (it appears twice).

Inbox preview line: the short line people see under the subject in their inbox is hidden near the top of the code. Search for Live comedy is just around the corner! and replace it with your new line.

Page title: at the very top, between <title> and </title>, is What are you doing this weekend?. Change it to match your email's subject line. Don't use emojis here, as they can make the preview go blank.

Photo credits: if you change the photos, remember to update the credit line, for example Photos by Roxy van der Post.

Tip: If a search finds nothing, try fewer words or one unusual word. Text is often split up by formatting code, and & is written as &amp;.

Changing a performer

Each comedian has a name and an Instagram name (handle). In the code it looks like this:

<strong>...ROBERT WHITE...</strong> ... <a href="https://www.instagram.com/robertwhitejoke/?hl=en" ...>@robertwhitejoke</a>

•       Step 1: Find the name, for example ROBERT WHITE, and replace it with the new name.

•       Step 2: Find the Instagram name without the @, for example robertwhitejoke, replace it with the new one and click Replace All. This changes the link and the name customers see, both in one go.

Changing a picture

Step 1: Upload the new picture

•       Upload your new picture in Backstage Manager's file upload section and copy its link. It will start with https://.

•       Use a picture the same shape as the old one. The left and right photos in this template are square, so crop new ones square, or the layout may look odd.

Step 2: Find the old picture in the code

If your pictures are labelled (the easy way): search for the label, for example Main show image. You'll find it twice: the picture and its Outlook copy.

If they're not labelled yet, use one of these methods:

Method A: Copy the picture's address (most reliable)

•       Open your email somewhere you can right-click it: double-click your saved .html file (from Part 1, Step 1) to open it in a web browser, or use the preview in Backstage Manager. In Mailchimp, you can use the web version of a sent campaign (the page that "View this email in your browser" opens) or the editor's preview mode.

•       Right-click the picture and choose Copy image address.

•       Paste it somewhere and look at the long code near the end, for example 10843754-2e4e-0196-0320-9a88dd562c39.jpg. Note the first block, 10843754.

•       Search for that code in your file. You'll find it twice.

Important: Don't copy the address from a test email in Gmail or Outlook, or from Mailchimp's editing screen. Gmail and Outlook reroute pictures through their own systems, so the address won't contain the code.

Method B: Look for the page the picture links to

•       Each picture is wrapped in a link. For example, the Food & Drinks picture links to https://www.komedia.co.uk/food-and-drink/. Search for that page and the picture's address appears just after it.

Method C: Go in order

•       Pictures appear in the code in the same top-to-bottom order as in the email. Search for <img and click Find Next. Every picture appears twice, and social media icons (marked mceSocialFollowImage) can be skipped.

Step 3: Swap the picture's address

•       Next to the label or code, find src=" followed by a long web address. That address is the old picture.

•       Select the whole address between the two quotation marks, from https up to the closing quotation mark. Don't select the quotation marks themselves.

•       Paste your new picture link over it.

•       Click Find Next and do the same for the second copy.

You only replace the part shown in bold:

<img alt="Main show image" src="https://mcusercontent.com/2e13286a770afbbf642a5b825/images/10843754-2e4e-0196-0320-9a88dd562c39.jpg" ...>

Tip: Some pictures, like the two square photos, have extra settings after a ? in their address, and the Outlook copy writes the & signs as &amp;. The two copies don't match exactly, so Replace All won't catch both. Just swap each address by hand, as above.

Before you send

Always send yourself a test email first, and check:

•       All pictures show, on your computer and your phone

•       Dates, times, prices and names are correct

•       Every button and picture opens the right booking page

•       The old show name, date and booking link don't appear anywhere

•       If you can, open the test in Outlook too, as it uses the second copies

Tip: Backstage Manager adds the unsubscribe link automatically when you send a campaign. It may not show in a test email, and that's fine.

If something goes wrong

Still stuck? Contact the Backstage Manager support team with the template name, and we'll help.