Display Multiple Popups at the Same Time

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.

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.

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.

Either create 2 new popups or edit 2 existing ones

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.

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. 

Go to  Popup Settings > DisplayPosition. 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.

Go to  Popup Settings > Display > Position. Check the Fixed Positioning checkbox. 

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.

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.

If your popups are still not "playing nice" together (i.e., blocking or hiding each other), try these 6 tips.

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. 

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. 

Go back to  Popup Settings > Display > Advanced.

Make sure to check the Stackable checkbox.

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.