Popup Maker displays 1 popup at a time by default. We think 1 popup on a post or page at a time gives your visitors the best experience. However, we understand that sometimes you need to display more than 1 at the same time.
If you want need to display two or more popups at the same time, you can make your popups stackable. Stackable is a special Popup Maker popup setting that lets more than 1 popup display on the same post or page at the same time.
Heads Up
We don’t usually recommend displaying more than 1 popup at the same time on the same post or page. Here’s why:
- Too spammy: Apart from information overload, your site might seem spammy. Make sure you have a good reason to do this, and do this sparingly.
- Not everyone uses a big screen: Multiple popups on a desktop or big monitor might look fab. But, if 50% of your visitors use their phones, they’ll see a stack of popups with only the top popup visible at first.
One other option is using a sequence of popups one after another. See the related articles at the end of this guide to learn more.
Displaying 2 Popups at a Time Example
As an example of what to do and what to avoid, let’s display 2 popups at the same time on the same post or page. Follow these instructions for both popups.
1) Create or edit two popups
Either create 2 new popups or edit 2 existing ones.
2) Turn off the overlay and turn on stackable
Turning off the overlay and turning on stackable for each popup is the next most important step. So, let’s change those settings right away.
Go to Popup Settings > Display > Advanced.
Check the Disable Overlay and Stackable checkboxes. See the screen capture below to see what those settings look like.
3) Change the popup size to Small – 40%
Go to Popup Settings > Display > Size. Change the popup size from Medium – 60% to Small – 40%. This should allow both popups to display on a desktop-size screen without overlapping each other.
4) Make each popup open in different positions on the screen
Go to Popup Settings > Display > Position. In the Location dropdown, select different locations for each popup.
For example, set the first popup to Top Left and the second to Top Right.
5) Make each popup have a fixed position
Go to Popup Settings > Display > Position. Check the Fixed Positioning checkbox.
6) Use the same targeting conditions for both popups
If you didn’t add any targeting conditions, you can skip this step.
If you do have targeting conditions for your 2 popups, make sure the conditions are exactly the same for both popups. Otherwise, they might not display on the same page at the same time.
Under Popup Settings > Targeting, set the same targeting conditions for both popups.
In the screen capture above, the popup is targeting the Home Page only. That means the other popup should also target the Home Page.
Again, if you don’t have any targeting set up, you can leave this alone. By default Popup Maker targets all posts and pages for your popup when you have no targeting conditions set up.
7) Use the same popup theme for both popups
Under Popup Settings > Display > Appearance, select the same theme for both popups. Using the same theme keeps things consistent and easier to manage when displaying multiple popups at the same time.
In the screen capture above, the popup is using the Light Box theme. So, the other popup should use the Light Box theme too.
Troubleshooting
If your popups are still not “playing nice” together (i.e., blocking or hiding each other), try these 6 tips.
Tip 1) Try changing the popup position locations again
For either 1 or both popups, go back to Popup Settings > Display > Position. Try different locations until both popups display properly at the same time.
Tip 2) Make sure you turn off the overlays
At the time of writing, having overlays turned on when displaying multiple popups at the same time doesn’t work. You might see some weirdness, like no overlays showing up or even one of the popups not launching.
To fix that, go back to step 2 above.
Tip 3) Try changing the popup sizes again
In step 3 above, we went to Popup Settings > Display > Size and changed the default Medium – 60% to Small – 40%. Try going even smaller for 1 or both popups.
Tip 4) Double-check that your popups are stackable
Go back to Popup Settings > Display > Advanced.
Make sure to check the Stackable checkbox.
Tip 5) Try making your content smaller
Maybe you’ve got just too much content. Try a lower word count for both popups. If you’ve images, make them smaller, or maybe don’t use them. Lastly, remove any whitespace you don’t need (e.g., padding and extra line returns).
Tip 6) Check for a CSS conflict
Sometimes, displaying multiple popups at the same time leads to a CSS conflict. You’ll know if this happens when you’ve done everything correctly, but one or both of your popups don’t appear. To top it off, your page might freeze up.
If this sounds familiar, check out our guide Your Popup Is Not Displaying on Your Homepage (or Another Page).
Tip 7) Save your changes and clear ALL caches
Make sure you publish or update your popup to save your setting changes. Always clear all of your caches and use a private or incognito browser window to test your changes.
