Join 3000+ of our customers who have doubled their sales with the potential of Optinly.

What are popups? How to Use them in Websites? – A Complete Guide with Practical Examples

Posted by Aadhithyan S on  October 12, 2021  in eCommerce, Popups


What is a popup and what is popup marketing? A popup is a GUI display area, usually a small window, that suddenly appears (“pops up”) in the foreground of the visual interface.

But chances are you already know what popup ads are. From those fraudulent ads with fake close buttons to the all so familiar popup messages that ask you to accept cookies immediately when you open most websites these days. popup marketing has had and still has a notorious reputation among internet users and let’s be honest, we’ve all been hit by unavoidable, irrelevant pop-ups more than once making one mentally feel this.

Fed up with popups

So why are they prevalent on the internet, as in, not limited to eCommerce websites? The next title is probably what you’re thinking now.


They must be effective then?


Yes. Definitely. Totally. The catch is knowing how to implement them effectively. You’ve got to know what the users think and what they do in reality are two different things. If used correctly, pop-ups are capable of improving all facets of your website from reduced bounce rates to a subsequent increase in email lists or purchase rates by combining them with automated emails, depending on the type of service your eCommerce website is providing.


Popular lead capture service Sumo conducted a study of almost 2 billion popups which produced some interesting figures. From this comprehensive analysis, some numbers stand out showcasing the customer conversion capacity of pop-ups. The most successful pop-ups have a whopping 50.2 conversion rate! The average of top 10% highest-performing pop-ups is at 9.28% while the average popup has a 3.09% conversion rate.


To give you a better picture, let’s say your website has decent traffic and a few eye-catching pop-ups that are in the top 10%. If your website garners 2000 visitors per week, you get 742 sign-ups in a month. The conversion rate doesn’t look so bad now does it? This is just the tip of the iceberg as to why good pop-ups have become an irreplaceable tool of successful eCommerce campaigns for every range from small independent businesses to multinational eCommerce giants.

How are they (not so surprisingly) this effective?


That’s a lot of math huh, but why are pop-ups so good at converting website traffic to grow your email list and customer retention?


They are impossible to ignore:

No matter the reaction of the user, there is a short time frame in which the popup grabs their attention. This is where the value of the popup can make the user engage it. Even if it is ignored, getting the user’s attention if only for a short while is a success in itself.


Brings value to the user right away:

The standout feature of pop-ups is that they get to the point right away, and are concise. It is always a high-stakes game, all you have to do is make the ones that will get your motive across to the user easily and attractively to create engagement, which is the desired outcome from a business owner’s perspective.


Immediate feedback:


User reaction irrespective of its nature is instantaneously available to the website owner which lets them understand what’s working and what isn’t. So they can edit and change them based on their performance continuously.


Flexibility:


Popups are flexible. They are more than just ads, which is a bit of an uncommon view that you can capitalize on. They can be anything from an announcement, survey, feedback, guide to your product or service, or a cheeky anecdote. This marketing perspective brings character to your brand and makes you memorable in the customer’s mind next time they’re thinking about using products or services you provide.

So how to make your pop-ups, well, pop up?


Cheap pun alert but you saw it coming. Anyway, how do you employ pop-ups correctly and get beyond their bad rep to make them useful for your business? There is no panacea to enhance pop-ups, it is a mix of several factors. The baseline is to approach it from the user’s perspective. The more relevant, relatable, and context-rich you make it, the higher the chances of piquing the visitor’s interests and consequently, more signups and fewer bounce rates. The context ranges from where and how you place your popup, to the quality of your website and articles accompanies. We’ll see some successful popup implementation methods with examples now.

Visual appeal and prominence to offers:


Using bright colors and visuals in your popup can be considered a thing for beginners. Yet it is successful and when you combine the discounts and promos that you’re offering in a popup with such an aesthetic, it’s hard to ignore. Steve Madden has a great example of this.

Steve Madden going bold

It is a bright red and black popup stating they have a 50% off for their products. That’s it, a good example of a simple popup sticking to basic marketing ideas.


Don’t impose your pop-ups:


With the above paragraph being said, you have to keep in mind the main reason why people hate popups. It is their shoved-down-the-throat nature. Let’s consider the full-screen popups that are commonly used by a lot of websites right when you open them. Sure, they’ll get the visitor’s screen time but they’re not going to be spending that time all intrigued like:

Fascinated Miranda Cosgrove

Rather, this is most likely similar to their reaction:

Mad Batman

The point is unless it is necessary as in the cases of age or nationality verification and similar essential reasons, don’t put a full-page banner popup right after the visitor opens your website. It also affects the SEO ranking of your site. Here is an example of an instance where Grey Goose uses a full-page banner for location-based age verification.

Grey Goose age verification popup

This is a common procedure but what makes them stand out is they redirect ineligible visitors to responsibility.org, a nonprofit organization that works to reduce social issues such as drunken driving and underage driving.

Grey Goose being responsible

So though they have used a first-page banner popup, they did it with responsibility. Okay, we’ll stop with the puns now.

Know the time and place for your pop-ups:

Okay, immediate popups are not the best idea. How do you bring them in then? Use the timed popup feature to display it after the visitor has spent a set time on your website. Or better, use the scrolled popup feature where you can set them to appear as the user scrolls to a certain point of the website. This is what Petco has done with this popup:

Petco's wholesome popup

As you scroll through their site, a friendly popup (yes they do exist) appears, offering a discount on signing up to their email list, along with the picture of this adorable dog on its hind legs. This is what we’re talking about.

Get to the point, quickly:

The title says it all. Making a brief and straightforward popup is easy, and it saves the user’s screen time. While conveying what you are going to offer concisely helps the user decide quickly, if anything, your brand gets points for being sincere. Under Armour accomplishes it in this popup:

Under Armour straight to point

Another thing to be noticed in this popup is that it has just one form field. Sumo’s study shows a correlation between successful onboarding rates of popups and their form fields. Having one or two fields asking for necessary and relevant information show high conversion rate than long cumbersome forms. People don’t want to give their information to every website they visit, and the less you ask, the more likely the user will engage. Or you can always use multi-stage popups where the first one asks for basic information to establish a subscription and an optional second specific to the user’s requirements.

Don’t disrupt the user experience:

This can be done in a few ways, we’ll get to them but the main takeaway is for the popups to not look blatantly like ads. Let’s see the sideline approach. Look how Old Navy brings its popups smoothly into their website without interrupting the user’s browsing experience.

Old Navy subtle popups

The popups are out of the way yet noticeable, and their calling their mailing list “fam” brings that touch of friendliness to the brand.

Make them easy to avoid:

While we are talking about user experience, take a look at this popup in American fast food retailer In-n-Out’s website.

Remember Grey Goose’s responsibility pop-up? This is a similar approach where a full-screen banner pop-up is used purposefully, the purpose being philanthropic this time. Another thing is how the close button is bright red and is big enough to click on, easily. There is more to see about pop-up optimization in terms of UI and devices, which is our last topic regarding successful pop-up implementation.

Cross-device optimization:

This seemingly self-explanatory tip is another underrated and crucial must be of top priority not just in your pop-up strategy checklist but in online marketing as a whole. Mobile devices are the dominant platform for searches with 48% of users buying a product through smartphones and the mCommerce numbers at international levels are even more staggering with mobile shopping expected to hold a 72.9% share in overall online shopping. So, optimizing your eCommerce site including its elements such as popups with it is paramount. Often, big businesses are aware of this, but the small and mid-level businesses ignore it unintentionally perhaps due to the resource lacking to focus in such areas. For this example, we are going with popular sports retailer Reeboks who are doing exactly what we’re saying.

Desktop version:

Reebok popup desktop version

And now the mobile version:

Reebok popup mobile version

Note how they have not only optimized the popup but have also followed some other methods we have gone through for this article.

Popular popup types available in Shopify and WordPress plugins:

Now that we’ve established the effectiveness of pop-up marketing if done correctly, you must have a general idea about the diverse kinds of popups that can be created to suit your business. let’s see the types of popups you can create using popup plugins, the easiest way to create and customize popups for your website. Shopify and WordPress popup plugins like Optinly are available in plugin stores, from free plugins to freemium and paid premium versions.

Exit Intent Pop-ups:


Exit intent pop up detects the user attempting to leave the site or switching tabs. They are best suited to get a last-minute conversion by showing a pop-up with discount coupons, newsletter signups or, re-engage by showing related items as a way to cross-promote similar products. Exit intent pop-up also can give a gentle nudge to the undecided user into performing an impulse action.

Floating Sidebar:


Floating pop-ups have the advantage of lingering on the viewer’s screen as they scroll through the page. They make an impression on the viewer due to their continuous presence, these popups can be used to showcase photos or hold friendly messages that add merit to your brand, a calendar, or as a navigation bar for your website. They have the versatility of being not just popups.

Gamified Pop-ups:


You know this kind. How often have you tried a spin the wheel popup for a chance to get discounts and special offers? They’re so prevalent owing to their success. The goal of gamifying your digital marketing campaign is to increase user engagement. They can also be digital scratch cards or a progress bar as the user performs actions to give them a feeling of accomplishment.

Notification Pop-ups:


These are also called push notifications. Once again, these kinds of popups are common even outside marketing. In the context of ecommerce websites, you can use them in many ways; time them to appear after a user has spent a while on a page, or when they have scrolled to a certain part where the pop-up is relevant. Relevancy in implying popups must be a rule of the thumb generally, they’re just more useful in notifications. You can offer to notify relevant pages, or when your product is restocked, there are endless ways to implement such popups in your site.

Full Screen Overlays:


You might remember and know from your own experience how random the success of fullscreen popups is. If you see the pattern of full screen banner popups though, it is not random and indeed has a pattern. We even showed the proper implementation of fullscreen popups with the Grey Goose and In-n-Out examples. This is going to sound repetitive but the thing to remember with these popups is to not being obtrusive with them. When they’re used with purpose, fullscreen overlays have the advantage of getting the user’s undivided attention as they get major screen space.

Timed Delay Pop-ups:


Time delayed popups sound similar to push notifications except they’re not complementary. Timed notifications can be a subset of time delayed popups. These popups have good responses as the thinking behind them is to promote content to the user after they have engaged with the page for some time. Optinly and other WordPress pop-up plugins have features to not show the same popups to repeat visitors. The approach of this kind of digital marketing is the prominence given to user experience and so is useful in the promotion of relevant content, growing your mailing list.

Wrapping up with key takeaways:

  • Pop-up marketing works when rightly implemented.
  • There are so many ways to include pop-ups in your digital marketing strategy, and a myriad of pop-up types and plugins to build them as well.
  • You can stop reading this now and get started with proper pop-up implementation and improve your business in all aspects from growing a brand loyal clientele in the form of newsletter subscribers, retaining and returning customers, and the subsequent revenue growth.

Author Bio
Aadhithyan S 
Aadhithyan S
I like writing. Exploring the world of Saas and SEO nowadays. When I'm not doing this I do other stuff characteristic to all humans.

Optinly Email Subscription

Get industry’s best growth hacks delivered to your inbox!

Optinly - CTA

Engage visitors, capture leads & monetize website traffic!

Try Optinly Free!

*No Credit Card Required
*Free Forever

Get Started With Optinly Today

Optinly helps businesses build better popups and
convert visitors into leads.