7 Mobile Popup Best Practices to Boost Your Conversion Rate

Ensure your popups adapt to every mobile browser

In 2024, this goes without saying, but your popups must be responsive to every mobile device and browser.

Just think of it from a visitor’s perspective: they visit your store, and as soon as they start scrolling, a giant block of text interrupts their visit. They can’t find how to escape it, so they leave.

These days, every major popup tool offers responsive designs (like us), so you are likely to be saved from this issue. However, you may overlook a second issue that can still break your visitor’s experience: browser incompatibility.

Over 52% of online consumers in the US use Safari as their main browser on mobile, according to Statcounter. In a distant second comes Chrome (39.81%), and the laggards like Samsung Internet (3.83%) and Android (1.59%). Browsers like Edge are quite small (<1%) but not to be overlooked.

Use a tool like BrowserStack to ensure your popups work well on mobile on at least the four largest browsers mentioned above — Edge is optional, but I’d recommend you test it.

💡 If your mobile popups don't look well in one browser and you want to adjust them without affecting the other ones, create a separate popup for the “bad” browser, create a browser-based targeting rule so only people who use it will see the popup, and fix it.

Simplify your mobile popup’s design and copy

Design is undoubtedly affected by space. The more space you have, the more information you can present. And vice-versa.

In a mobile experience, your popups will have to adapt to the smaller screen size. Your goal isn't to present less information but to present only the most critical one.

To start, consider removing images or graphics if they take too much space. For example, Buffy shows the following popup to their desktop visitors:

The popup is already pretty simple, but on mobile, the company simplified it even further by taking the pillows out:

Some popup builders (like, ahem, ours) allow you to automatically remove images from the mobile version of the popup, so you don’t have to create a separate popup version.

Similarly, adapt your copy to smaller screens, ensuring the message is clear and readable. Notice how Javy uses the title to communicate the value, loud an clear:

Another important mobile popup practice is removing the non-mandatory fields. Filling out forms on mobile devices isn’t fun, so, when possible, limit the number of fields to two — or even just one, like in the examples above.

Also, make it easy for people to close your popup. The closing button should be evident and obvious, which plays a huge role in providing a good mobile popup UX.

💡 If the space on your mobile popup permits, consider adding a second button to quickly close the popup. Such buttons usually say something like “No, thanks” or “Maybe next time.”

Consider creating popups specifically for mobile devices

Whether you are running an ecommerce store all by yourself or managing a small team of people, you don’t have much time for micro-optimizing everything. We get it.

But if you want to give your mobile popups a boost in performance, you might need to create separate popups for desktop and mobile devices.

Even though the content on the popups can be the same, you may want to use different display triggers. Here is why.

Desktop and mobile visitors behave differently: they will likely visit your store from different sources and have an otherwise unique experience, including session duration, scroll depth, number of pages visited, and so on. The way you want to present your popups should adapt to these factors.

For example, if you’re displaying a popup with a 10-second delay, you should double-check the average session duration on mobile and ask yourself if it’s the optimal delay period.

Does it mean you should duplicate all popups on your website? Not necessarily.

If you already have dozens of popups, create a mobile version only for those with the most views or conversions.

If you don't, take the ones you already have and duplicate them. Then, rename them and adapt the mobile ones using the advice you are about to see in the rest of the article.

Be more conservative (and show fewer popups on mobile)

Once you start getting results from your popups, you will likely add an ever-increasing number of them all over your store. If you can create new popups without disturbing the visitor, provided they are triggered at the right time and place, go ahead.

But before you go crazy, remember that mobile users have fewer tools to close your popups. They can’t use a comfortable trackpad to click on your closing button — they have to tap it. And as you know, that’s not nearly as comfortable as clicking on a computer.

The differences between a computer and a mobile user experience are so great that you want to adapt your store likewise. Even if your strategy works, avoid disrupting the visitor’s mobile experience too much.

Here is the approach by Everlane, an online clothing retailer. When you land on Everlane’s website, you’re greeted with a welcome popup offering 10% off your first order:

Although it’s a modal popup, Everlane makes it easy to close it – either with the Close button in the top right corner or with a No Thanks button.

From there, Everlane follows the best mobile popup practices by keeping interruption to the minimum. Current deals are featured on a compact sticky bar at the top, and for those who didn’t respond to the welcome offer, it’s available via a floating button at the bottom.

Like Everlane, you may want to cut down on your mobile popups. How many you want to remove depends greatly on what you already offer. You are safe if you show three targeted popups on a store with over two dozen pages.

But if you show over a dozen in a small store and they are not targeted to specific pages or behaviors, you should consider removing some of them. Those whose conversion rate underperforms should go first. Continue with any other one that’s not tied to sales. Keep those that are most profitable.

Also, double-check that your popups aren’t showing at the same time. Although this is important on both devices, it's extremely so on mobile.

To fix this issue, use stricter targeting rules. For example, you can target your popups to specific pages and not site-wide. Or combine behavior-based triggers like time on site with specific pages and countries.

All of this advice is on principle. As always, you should test removing a popup to see how that affects your metrics (e.g., time on site, bounce rate) and conversions. The point is that when in doubt, err on the side of precaution.

Shrink your popup’s size

Adapting your user experience (UX) for mobile visitors is a crucial best practice that applies beyond popups. But besides the approach you take with your popups (i.e., being more conservative), you may also want to rethink their size.

Even if your popup is responsive (i.e., it adapts to any screen size), it doesn’t mean it will offer a good UX. One way it can fail to do so is by taking too much screen space, such as in the example below:

Now, there’s no right or wrong popup size. You can show a relatively small popup without any exit buttons, and the UX will be terrible, while the opposite is true (like the previous example).

You just want to make your site accessible and user-friendly. According to Google, a technique that makes content less accessible to a user is “showing a popup that covers the main content, either immediately after the user navigates to a page from the search results, or while they are looking through the page.”

Consequently, you want to avoid using large popups and fullscreens without an easy way to close them.

Google explains they prefer “banners that use a reasonable amount of screen space and are easily dismissible.”

Although they don’t explain the ideal size, aim for not more than 25-30% of the screen. Sticky bars and slide-ins are your best options. Take this sale promo bar on Nasty Gal’s website:

If you think this advice only applies if you want to rank your site on Google’s SERPs, I’d suggest it doesn't. From analyzing billions of pages over the last two decades, Google knows what type of sites provide the best UX, which, as Peep Laja asserts, correlates positively with conversions and profitability.

You don’t have to follow Google’s recommendations mandatorily, but it'd be wise if you do. As I've said already, test different sizes to see how they affect conversions. If you can't or don't want to, follow the previous best practice and be prudent.

Our research shows that when you’re using slide-in email forms on mobile, and you’re offering a discount in exchange for a signup, you can expect to convert around 4,42% of visitors.

Take a 1-2 combo approach

A usually ignored but still effective approach is avoiding showing a popup. Or, at least, one that takes a quarter or more of the visitor's screen.

Instead, show up a small floating bar or button — one that allows the visitor to continue to use the page without disruption. Once the visitor clicks on it, it triggers a bigger popup with the offer you want to present to the visitor.

For example, Pilgrim, a European jewelry brand, uses Getsitecontrol to show a sticky bar at the bottom of their screen offering a 10% discount. Upon click, it triggers the signup form, which they can fill in to get the deal:

Similarly, Waterdrop shows a sticky bar at the top with a signup message. After you click the “Join Now” button, they show a modal popup that leads to their signup page.

As you can see, sticky bars are ideal for this 1-2 combo approach.

💡 When combined with other more aggressive tactics, a 1-2 combo is a great option, especially on high-traffic, low-intent pages like the homepage.

Test different popup types to find the ideal option for mobile

As a marketer, you know that testing is the real way to see what works. And your mobile popups are no exception.

If you get more than 10,000 visitors a month — the more, the better — consider testing the performance of different types of popups like:

• Modal popups
• Slide-ins
• Sticky bars
• Fullscreens

For example, we ran such a test on our site, both on mobile and desktop, and found that fullscreens converted the best, followed by modals and sidebars. However, this applies to a blog on both desktop and mobile. For your mobile ecommerce store, the results may differ.

On mobile devices, modal popups convert 1,8 times better than slide-ins, according to the Getsitecontrol research.

If you decide to conduct a popup A/B test on your store, it's critical that your tests are always statistically significant. In other words, you want to be certain the test wasn't a fluke and that the results were caused by a specific change you made.

To do so, make sure your tests meet the following three criteria mentioned by Justin Christianson of Conversion Fanatics:

• Run tests to at least 90% statistical significance (check with this calculator)
• Get at least 500 visitors per variation (but aim for at least 1,000 if you can)
• Get at least 25 conversions per variation before finishing a test

Considering the relatively large traffic volumes you’ll need, run a test on a high-traffic page like your homepage.

Conclusion

The seven best practices you just saw will ensure you get the most out of your mobile popups. If your popups are optimized, you’ll be able to build an email list, promote your offers, and sell more products faster.

To recap, here’s a summary of everything you learned today:

• Make sure your popups are compatible with the top four browsers and Edge
• Simplify your popup’s design by using fewer images, shorter copy, fewer input form fields, and clear closing buttons (this isn’t just a mobile popup practice – conciseness works well regardless of the device)
• Consider creating popups specific for mobile so you can optimize them better
• Be cautious with the number of popups you present. Avoid showing more than one popup per page, and if you do, test the triggers so they don’t overlap
• Shrink your popup’s size so that it doesn’t take more than 30% of the screen
• Show a small sticky bar that, when clicked, shows a larger popup (the 1-2 combo)
• Run a test in your store to see which type of popup works best

And if you’re looking for an easy-to-use popup builder that will help you boost mobile conversions in your store, try Getsitecontrol. It comes with a free plan, so you can start adding popups to your website at no cost.