Today I’m going to show you how to update an existing Mailchimp template. First, let’s see if this applies to you.
Why should you update an existing template?
If you are using one of the following templates, and you’ve customized it, you may want to update your existing template so you don’t lose your customizations.
- Extension Base Template
- Extension-eNews-template version 2.1
- Ext-newsletterTemplate version 2.2
What happens if you import the template instead?
If you import a new template instead, a new template will not keep your customizations. You will need to re-design your custom template, and you may need to reset standard text and other elements in your campaign.
If you have NOT invested a lot of time in a customized template, importing a template is probably a better choice for you. See how to import a template.
What are the steps for updating an existing template?
- Save a copy of your existing template.
- Locate HTML code for the updated template.
- Replace HTML code in your copied template.
- Confirm changes.
1. Save a copy of your existing template.
Go to the Mailchimp home page and choose “login” at the top and enter your login credentials.
This opens the dashboard view of Mailchimp. To get to saved templates, click on campaigns in the left menu and then select “saved templates” in the upper right corner (Fig 1).
This page shows all of the templates uploaded to this account. Find the template you want to replace and click “Edit” beneath the thumbnail image. In this example, the template is called “My County Template version 2.2” (Fig 2).
This opens the template editor. Take a look at the page and note any custom changes you’ve made. I’ve changed the background color to a charcoal gray, added a custom header image and made the stripe below the image green (Fig 3).
From here, create a copy of the template. You should create a copy to avoid overwriting your existing template. This step preserves the original template just in case you need it as a back-up template later. If changes are made directly to this template it will automatically update any campaign drafts that use this template.
To make a copy, click on “Rename or Replicate Template” in the upper right corner. Add the word “copy” to the existing title and choose “replicate”. After that choose “exit to templates” to go back to saved templates (Fig 4).
2. Locate HTML code for the updated template.
Our goal is to update this copied template’s HTML code with the code from the updated template. We will copy the code for the updated template and bring it back to Mailchimp.
Keep this browser window open. Launch a new browser tab and go to the Email Newsletter DIY Guide’s Using Templates page.
On the “Using Templates” page, scroll to the section that includes the template you want to use. For this demo, we want the template “Extension newsletter template version 2.3”. Note, this template number will change if the template gets updated again. Click on the link for “.html” to view the template in the browser window. You should now see the e-newsletter template with a gray background, placeholder header image and a red stripe. This is the default design for the template (Fig 5).
In order to access the HTML code for this template, you will need to view the source code. Right-click on the template page and choose “View Page Source.” This opens a window with the HTML code for the page (Fig 6). Select this window and press “CTRL + A” on your keyboard to select all of the code. Then press “CTRL + C” on your keyboard to copy all of the code on the page. We will use this code in a minute to update the copied template in Mailchimp.
3.Replace HTML code in your copied template.
Now, go back to the Mailchimp Templates page in the other browser window. Find the copied template and click on the right arrow beside “Edit”. Choose “Edit Code” from the drop down menu (Fig 7). This opens the “Custom Template Builder” for this template.
Take a look at the top of the page. There is an option here to view either code or design. Be sure you are viewing the “code” view (Fig 8). This should have a black box underneath it with numbered lines of text. Look at line 5 to see the date the current template was created. On line 6, check the current version number. In the screenshot, this template was created on March 18, 2014 and it’s version number is 2.2.
Click on the text in the black box, and again press “CTRL + A” on the keyboard to select all of the text in the black box. Now click “DELETE” on your keyboard to delete the existing code. Click “CTRL + V” to paste in the HTML code that was copied from the new template.
Scroll to the top of the text in the black box and examine lines 5 and 6 again. You should see a newer date and a newer version number here. Take note of the version number because you will add it to the template name next.
Choose “Save”. Edit the name of the copied template by replacing the word “Copy” with the new version number (Fig 9). It will be easy for you to see the version number for your template in the future. Choose “Overwrite” to save the updated code and keep your original template customizations.
4. Confirm Changes
Finally, let’s confirm that the changes have been made and take a look at any changes to the design options. From the Templates view, choose “Edit” underneath the new template. Take a look at the template again in the template editor and adjust anything that needs editing.
If you are upgrading from “Extension Base Template” this may look a lot different to you. The colors and customizations should still be in the template, but the design options on the right are new. Consult the E-newsletter Cheatsheet in the DIY Guide to see what you can change with the design options.
If you are upgrading from version 2.1 or 2.2, the preheader text colors you customized have probably been deleted. If this is true, just go to “Page, Preheader, Footer” in the design options and reapply the text color. This section now combines design options for both the top and bottom of the page. Now you can edit the colors for the text and text links for these parts of the page in one place.
Once you are happy with the changes you want to make, click on “Save and Exit” to leave the template editor.
You have now successfully updated the code for a custom template. The next time you create a campaign or replicate an existing campaign, be sure to apply this new template under the “Template” step.
Template release notes:
v1 – “Extension Base Template”
- Editable design options established
v2.1 release – “Extension-eNews-template-v2.1.html”
- Banner image editing enabled, can manipulate image and add text
- Design options better organized per page section
- Version number at bottom of template
- Updated UGA Extension logo
- Added “Share this” icons in sidebar
- Toggle between regular newsletter content and RSS feed (for blogs)
v2.2 release – “Ext-newsletterTemplate-v2.2.html”
- Updated for mobile viewing
- Updated “Share this” icons to be larger buttons
v2.3 release – “Ext-newsletterTemplate-v2.3.html”
- Corrected problem with text color in preheader
- Combined page, preheader, and footer styles into one design option
Learn more about Email Newsletters:
For more information about creating email newsletters, check out our Mailchimp posts.