Wisepops logo

Last updated Thu Mar 21 2024

How to Make a Mobile Popup (+Best Practices)

Want to know how to create a mobile popup?

This guide will show you how to do that the right way: fully complaint with Google's requirements and friendly to the user experience on your website.

In this post:

Create mobile popups easily. Adjust the design for mobile in a few clicks
Newsletter popup

What is a mobile popup?

A mobile popup is an overlay box that appears on on mobile websites. Mobile popups must comply with some UX requirements, including allowing visitors to access the website without closing them and occupying a screen space of about 30%.

mobile optimized popup recess
mobile optimized popup brooklinen

How to create a mobile popup

Follow these steps to make a mobile-friendly popup:

  1. Choose a template

  2. Customize the template

  3. Add the discount code

  4. Adjust the display settings

  5. Save and publish

For this mobile popup tutorial, we'll use Wisepops popup builder—a popular app (rated 4.8 stars on Shopify).

Get a free account to begin:

No cc needed, unlimited free trial.

trustpilot
"Great way to implement pop ups"

"We have been using Wisepops for months and the results have been fantastic.

Wisepops is easy to implement and makes designing pop ups, bars and embeds simple. You can also effortlessly monitor displays, clicks, CTR etc.

We have used this system to drive our newsletter sign ups and sales."

Adam, a review from Trustpilot

Step 1: Choose a template

Once in Wisepops dashboard, go to Create Campaign > Campaign Assistant > Coupon.

create mobile popups

Next—

Choose this template in the template gallery:

template mobile popup
Shop now sales popup
Popup templates

You can also browse our library of designer-made popup templates (all of which you can use for mobile by adjusting the display settings):

➡️ Go to templates

Step 2: Customize the template

Use the menu on the left to add your website's colors and text (just click the element to open the customization settings):

editing mobile popup

This video will help you find all the customization options you need:

Step 3: Add the discount code

Go to Step 2 (inside the Wisepops editor) and customize the window that will open once the visitor signs up.

There, apply your design in one click (using the button highlighted below) and add the discount code:

thank you window customization

Note:

You can use the design of the first popup window to the second by clicking Apply this design to all steps (make sure you're in Design > Style menu for that option to be visible).

Also, you can add unique Shopify discount codes to your popup: check this guide to know how.

Step 4: Adjust the display settings

This simply means optimizing your popup to be shown on mobile devices. Go to Display Rules > Audience.

There, you'll see the device setting; choose Display on mobiles (if you selected the same template as in this tutorial, this option will be enabled by default):

display on mobile popup settings

Note:

Click Refine by OS (right next to Display on mobiles) to select or exclude specific operations systems (iPhone, Android, or Windows Phone)

Step 5: Save and publish

Hit Preview (in the right top corner of your window) to see how your mobile popup will look like to your visitors:

mobile popup preview

Once you're finished designing the mobile popup, click Done editing. Wisepops will take you to the campaign overview window, where you need to choose Publish.

publish mobile popup

That's it, your mobile popup is now live!

FInd more inspiration:

Popup design examples (incl. mobile popups)

Mobile popups: best practices

Here's what to keep in mind when designing mobile popups:

mobile popups best practices breakdown

And now let's break down these best practices for mobile popups.

1. Pick the right incentive

This is probably one of the only sections where what you applied on desktop can work on mobile as well.

For mobile visitors as for desktop devices, you need to provide a good reason for your customers to subscribe to your newsletter.

This reason can be the promise to receive great content. Plain and simple.

mobile email bar example

You can also use a coupon.

Like Carbon38 who offers 15% off to new subscribers:

mobile popup design example

It can also be a surprise.

Beyond Yoga simply mentions a “welcome gift” (so this is a welcome popup, basically):

a mobile popup on BeyondYoga

If you want to know more about the topic, I suggest you read our guide to email popups or see this collection of email popup examples.

Now that you’ve picked a proper incentive, let’s dive into the format and position of your mobile popup.

2. Choose the appropriate format and position

As we discussed earlier in this article, mobile popups must follow strict rules when it comes to position and format.

I will walk you through 3 ways you can use them to enrich your contact list without crossing any SEO or UX red line. I ordered them from the easiest to implement to the hardest.

I’ll also share the result of an ABC test of these 3 options in the last part of this section to help you pick the best strategy.

Strategy 1: display a full-screen modal on the second page

A mobile popup displayed on Tom Ford's website

Remember what Google said? Don’t hide any content on the landing page. If you want to adapt your popups to the new SEO rules, the quickest method is to wait for the second page to display your big interstitial. You can also display it when your visitors are about to leave your website using mobile exit intent detection.

Pro: it’s 100% compliant with Google guidelines

Con: not sure your visitors will appreciate being interrupted during their navigation.

Strategy 2: use a smaller bottom popup

You could also use a smaller popup. This would make sure important content doesn’t get hidden. And it won’t get in the way of your users.

This popup on Onitsuka Tiger is a good example:

a mobile popup displayed at the bottom of Onitsuka

Pros: It’s 100% OK for Google. It’s also clean in terms of UX. And you can display it on landing, which means that it will reach a large audience.

Con: it might be challenging for users to subscribe as the email fields are very small.

Strategy 3: use a call-to-action displayed on every page to trigger your popups

The last strategy you can use to capture emails on mobile with popups is CTA-triggered popups. In this scenario, the user is presented with a reasonably-sized call-to-action which appears on every page of the website. When clicked, it triggers a real popup.

signup tab

Cons: not all popup solutions allow you to design this kind of popup.

Pros: It’s very user-friendly and 100% SEO-compliant. Plus, having the option to display a big popup means users will have more space to input their email. Finally, by displaying it on every page of the website, you dramatically increase the chances that your user will click it and subscribe.

The results of an ABC test

We were wondering what strategy would produce the best results. So earlier this year, we ran a test with Skechers, comparing the 3 methods:

And the winner was the CTA popup, collecting +48% more emails than the second best-performing version!

Of course, these results don’t apply to all websites. But they’re proof that good UX can generate good results.

3. Prepare a visible design

By now, you should have picked a format and a position for your popup.

We have enough information to start thinking about the design of your popup itself.

Tip 1: choose a visible background

Most of the time, mobile popups are smaller than their desktop counterparts. So you need something to help them stand out. And your popup background can help.

See the difference between these 2 campaigns? By using a coloured background which contrasts with the rest of the website, Zumiez makes their opt-in popup unmissable.

This is practically the first thing you see on their website.

two mobile popups

Tip 2: select a colourful call-to-action

The same goes for your CTA. It should stand out from the popup itself.

Look at this example from Murray’s. The CTA is red and highly visible. You can’t miss it!

Murray cheese's mobile popup

Tip 3: Add actionable closing options

Have you ever heard of the fat finger syndrome?

It’s what happens when you accidentally trigger an action you didn’t intend to while browsing on your mobile. Or when the link/button you’re trying to click is too small so it’s difficult to click it.

One of the main frustrations for visitors when it comes to mobile popups is the difficulty to close them.

To avoid this problem, there’s one rule of thumb (pun intended): make everything bigger than it would be on desktop. UXM recommends a minimum size of 44 x 30 px for mobile buttons for example.

We also recommend adding a “dismiss” link to complement your closing X. Usually, they’re larger and easier to click on mobile.

Here’s a good example on LiveChatInc.

Livechat's mobile popup

Tip 4: Limit visuals

As space is scarce and the bandwidth of your visitor might be limited, we recommend limiting the use of visuals.

Let’s take Carbon38.com.

Here’s their desktop popup. The picture on the right alone weighs 749 kb.

carbon38.com desktop overlay

So—

on mobile devices, they stripped out the picture:

Carbon38's mobile pop-up

As you can’t use visuals to support your message, you need a strong message…

Speaking of messages, let’s see what words can help you convert these mobile visitors into subscribers.

4. Choose the right words

If we had one motto for mobile popups copy, it would be: “Choose your words carefully”.

Why so?

First, because you don’t have much space. Or at least you often don’t have enough space for long sentences.

Monetate - Average views by device

In short, it means that you should use clear and concise wording to avoid wasting your visitors’ time.

See this example on UnderArmour? They just kept what’s essential to a mobile user: a strong incentive to subscribe:

UnderArmour's mobile popup

Their desktop popup (which includes “Everything here is built to make you better”):

UnderArmour's desktop popup

The same goes for your call-to-actions. We recommend using short and actionable words such as “Submit”, “Sign me up”, “Send” instead of the long wordings you can find on desktop (“Join the list today”, “Send me my discount”, etc.)

See this guide for more detailed tips: Popup message messages

Mobile popups: Wrap-up

As Jeff Bezos once said: “we [should] see our customers as invited guests to a party, and we are the hosts. It’s our job every day to make every important aspect of the customer experience a little bit better.”
Mobile popups are part of this experience. It’s time you work on making them better (while building your email list efficiently).

Pawel Lawrowski

Pawel is the Head of Growth at Wisepops and an expert in lead generation, popups, ecommerce, and onsite marketing.

With over a decade of experience in digital marketing and ecommerce, he has both build marketing teams from scratch and led strategic business growth projects.

Pawel has worked with countless online businesses on marketing strategies and is now sharing his knowledge. Previously, he was an head of growth at Tidio, where his responsibilities ranged from creating marketing materials to building acquisition channels.

Education

West Pomeranian University of Technology

Certifications

  • Marketing Strategy (course)

  • Advanced Growth Strategy (course)

  • Retention & Engagement (course)

Help