Sidenote: It appears many people are having difficulty with the Mailchimp popup. If the below tutorial doesn’t work for you, or if you want more control over your popup, try this tutorial instead.
Did you know Mailchimp has a feature that allows you to add an email signup popup to your site? If you use Mailchimp and are looking for something simple and easy to setup, without having to install a plugin, using their popup is a good solution.
In this tutorial, I’ll go over how to setup your Mailchimp popup and more importantly, show you how to add it to your site.
1. Customize Your Mailchimp Popup
First things first, you’re going to have to setup your Mailchimp popup. To do this, login to your Mailchimp account, click on your list, then signup forms, followed by subscriber popup.
On the page there are 4 tabs: design, fields, content, and settings.
Design – where you’ll customize the look of your popup.
Fields – select which fields are displayed.
Content – add text to your popup.
Settings – set the popup delay and maximum width.
Go ahead and customize your popup to your liking. To see how the popup will look (as an actual popup), click on the popup preview button located in the top right corner of the window.
2. Get Popup Code
When your popup is customized and ready to go, it’s time to grab the code which you’ll add to your site in order to get the popup to display. Click on the view code button in the bottom right corner of the window. Copy the code, then click on publish (underneath the view code button) to save your popup.
3. Add Popup Code to Your Site
With the code in hand, you’re almost there! You just have to add the code to your site. To add the code to your site, it has to be added to the
<head> section of your theme.
Now depending on your theme and your comfort level with code, you have 3 options:
1. If you’re using a Genesis theme, you can paste the code to the header scripts box located under Genesis > Theme Settings.
2. If you’re not using Genesis and are comfortable editing your theme files, you’ll want to find your header.php file and search for the
<head> section. Paste the code before
</head>. But a heads up, updating your theme will cause this customization to disappear. So unless you’re using a child theme, use caution. Oh, and be extra careful when pasting your code. If you accidentally delete any existing code or paste your code in the wrong area, you’ll get the dreaded white screen of death.
3. And if code just isn’t your thing, you can download the Insert Headers and Footers plugin. After installing and activating, go to Settings > Insert Headers and Footers. Then just paste the code into the scripts in header box.
Want a more detailed explanation of these three methods? Check out this post on how to insert code into the head section of your WordPress blog.
Just a heads up, you only need to use one of these methods. Don’t use all three!
Once you’ve added the code to your site, head over to the front end of your site and check it out. You should now have a functioning popup!