Is your Mailchimp pop-up not showing up on your wordpress site after you have added the code?
You are not alone. This is one of the most common Mailchimp issues.
The main reason this happens is because of jQuery conflicts, which can easily be fixed by tweaking the code a bit.
In this guide, I will go over what could be preventing the Mailchimp pop-up from showing up in detail and show you a number of ways to make it appear.
⚡Also Read: Mailchimp popup showing only once
Why Is My Mailchimp Pop-Up Not Showing?
There are 3 main reasons why your Mailchimp pop-up won’t show up:
jQuery Conflicts
One of the most common issues is conflicts between Mailchimp’s embed code’s jQuery and the jQuery code of WordPress.
The embed code for the pop-up contains code (//s3.amazonaws.com/downloads… file) that tries to load the jquery.js file from the domain’s root directory.
But WordPress has its own jQuery code and it’s on wp-includes/js/jquery/jquery.js.
So the pop up code won’t be able load the script – and it won’t work.
Other Issues
⚠️ Plugin Issues
Some plugins you have installed on your site can sometimes clash with the Mailchimp pop-up code and stop it from appearing too.
⚠️ Z-index Issues can also cause this.
Z-index is the CSS feature that controls the vertical position of the various page elements.
It can sometimes make some elements come on top of the pop-up, so the pop won’t show properly and wouldn’t respond to the clicks to open or close it properly.
How To Fix Mailchimp Pop-Up Not Showing
Now that you know what might cause the Mailchimp pop-up form not to appear, lets take a look at the solutions:
⚡Also Read: Mailchimp Email Not Displaying Correctly
Fix jQuery Conflicts
There are two measures you can take to prevent jQuery conflicts:
#1. Add the Pop-up Code to the Header
The first method to resolve the jQuery conflict is to copy the embed code for the Mailchimp pop-up and add it to your wordpress site’s header.php file, above the `wp_head()` part.
This makes the Mailchimp jQuery code load before WordPress jQuery code is loaded, so a conflict is unlikely.
Plus, it won’t store the file locally in the root domain and it lets you manage it from MailChimp.
Here’s how the code would look like:
<script type=”text/javascript” src=”https://s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js” ></script>
<?php wp_head(); ?>
</head>
However, the Mailchimp jQuery code having to load before the rest of the page can slow down the page loading process.
So, I don’t recommend using this method and suggest you opt for the next method instead.
# 2. Add jQuery.noConflict() to the Code
In this method we add the code, jQuery.noConflict(); before the Mailchimp pop-up code’s jQuery reference.
It will look like this:
jQuery.noConflict();
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js”></script>
This instructs Mailchimp’s jQuery code to avoid conflicts with other jQuery codes on the page.
Add this code to your theme’s `footer.php` file, or wherever you have added the Mailchimp pop-up code.
⚡Also Read: Mailchimp this page appears to be missing
This is the recommended way to resolve jQuery conflicts.
Fix Plugin Conflicts
If that didn’t work, it might be a plugin that’s messing with it.
Try deactivating plugins one-by-one so that you can identify if any of them is interfering with the Mailchimp pop-up.
If you find problematic ones, keep them deactivated or delete them if you can do without them.
Fix Z-Index Issues
If both of that didn’t work, the only remaining possibility is a Z index issue.
If parts of your pop up are not visible like the close button, these too can be fixed by adjusting the Z-index value of the theme CSS.
Here’s how to check the Z-Index value of the Mailchimp pop-up and change it:
- Open your WordPress site in a web browser like Chrome or Firefox.
- Right-click on the page and select Inspect or Inspect Element to open the browser developer tools.
- Find the Mailchimp popup in the HTML code or DOM elements tab.
- Take note of the z-index value of the popup.
- Update the z-index value in the CSS code of the Mailchimp popup or your custom CSS to a higher value, and save the changes.
- Close the developer tools and refresh the page to see if the popup now appears correctly.
Mailchimp Popup Close Button Not Working
This usually happens in shopify when you manually add the pop up embed code. You shouldn’t do that because the Mailchimp for Shopify app automatically takes care of it.
When you add it manually, there will be two pop-ups – one on top of the other. This makes the close button not work.
To fix this, just remove the code you added manually – or wrap pop-up code in comment tags.
Quick Recap
If your Mailchimp pop-up sign up form doesn’t appear on your WordPress site, it is due to jQuery conflicts 99% of the time.
But sometimes, other WordPress plugins interfere with the pop-up code, or the pop-up element’s Z-Index is too low.
You can resolve this matter by adding the pop-up code to the header of the page, implementing a code to prevent the pop-up’s jQuery from clashing with the WordPress jQuery.
Also, inspect the pop-up’s Z-Index and increase it if low, and disable any plugins one by one to see if one is clashing with the pop-up.
