Once associated with unwanted advertising, pop-ups are now an expected part of online shopping. Ecommerce has the highest pop-up conversion rate of any industry (6.88%), according to pop-up platform Wisepops’ analysis of 1 billion displays with sign-up fields.
In this article, you’ll learn about the different types of pop-ups and how they work, with over a dozen real website pop-up examples to inspire you.
What is a website pop-up?
A website pop-up is a window that overlays on a webpage to capture a visitor’s attention. Businesses use pop-ups for different reasons, such as:
- Capturing contact information. Businesses use pop-ups to encourage visitors to opt-in to email or SMS messaging. Incentives like discounts can persuade customers to share their information.
- Upselling or cross-selling. Pop-ups can promote related or higher-value products to customers who have already shown interest in another item. This can increase the average order value (AOV).
- Preventing users from bouncing. Certain behaviors, like moving a mouse toward the back button, indicate that someone has an intent to exit the page. To deter users from leaving, a pop-up can appear with an incentive like free shipping.
- Collecting feedback. Pop-ups may ask shoppers about their opinions, such as a survey asking customers about their preferences.
- Sharing cookie notification. Businesses can use pop-ups to remain compliant with internet privacy regulations. Accessories and shoe business Rothy’s uses a pop-up to inform customers about their use of cookies.
How website pop-ups work
There are different styles of pop-ups, but they all function similarly. Here’s how pop-ups work:
1. Businesses create pop-ups
There are several ways to create pop-ups. If you have a Shopify store, the easiest way to get started is with a pop-up app like Shopify Forms.
The method for creating a pop-up will depend on which pop-up app you use. Here’s how to make one with Shopify Forms:
1. Download Shopify Forms. Install Shopify Forms from the Shopify App Store if you have not done so already.
2. Enable Shopify Forms. From your Shopify admin, go to Online Store > Themes. In your active theme, select Edit theme. In the theme editor sidebar, click the App embeds icon, then activate the Forms toggle and select Save.
3. Create a pop-up form. From your Shopify admin, go to Apps > Forms. Select Popup form, then enter a name for the form and select Create.
4. Choose settings and write your copy. Choose the popup form type, colors, position, trigger, and fonts and write your copy. There’s a preview box that will update as you change your settings.
5. Activate your form. Your form will not be live until you select Turn form on, located on the upper right-hand side of your screen.
2. Users trigger pop-ups
Website visitors cause pop-ups to appear when they take certain actions, known as triggers.
Here are a few types of triggers:
- Welcome. These pop-ups appear immediately after a user enters your website.
- Page-specific. Landing on specific pages can trigger a pop-up. For example, if a user lands on a page with a popular item, you can set up a pop-up that shows that people are buying it in real-time.
- Delayed. Pop-ups can show up after a user spends a certain amount of time on a page or on the second or third time they view a page.
- Scroll. This pop-up shows up if a user scrolls down to a specific part of a page.
- Exit intent. If a desktop user moves toward the address bar, signaling that they want to close or navigate away from the page, an exit-intent pop-up will appear.
Businesses can also set triggers for a teaser, or a small version of the pop-up. A teaser can appear before the full-size pop-up, in which case the user must click on the teaser to view the full pop-up, or after a user closes a pop-up without taking action.
3. Users take an action
To return to browsing, users must take action, either by closing the pop-up or following the pop-up prompts, such as accepting cookies or signing up for emails. Pop-up call-to-action (CTA) buttons can be simple, like “Continue,” or they can let visitors know what they’re about to do (“Agree & close” or “Sign up now”) or how the action can benefit them (“Get 20% off”).
On the back end, businesses collect pop-up form submissions. Shopify Forms integrates with Shopify Flow, so you can set up form submissions to trigger workflow automations, like automatically sending an email with a discount code to customers who opt into email marketing via your pop-up.
4. Businesses track results
Pop-up apps like Shopify Forms come with built-in analytics to help businesses monitor the success of their pop-up campaigns. With Shopify Forms, you can see the number of views and submissions and completion rate (conversion rate) for individual forms and across all forms on your site.
You can use this data to tweak your messaging, triggers, and pop-up appearances. Some pop-up apps also let you automatically A/B test, so you can run two versions simultaneously and learn what converts better.
4 types of website pop-ups
There are several different ways pop-ups can appear on a visitor’s screen:
Banner pop-ups
Banner pop-ups appear at the top or bottom of a webpage. They can take up the full width of the page, like the one shoe brand Steve Madden uses to let its customers know about their usage of cookies.
Full-screen pop-ups
Full-screen or overlay pop-ups take up the entire screen, so the user can’t see the original page. These are highly visible and effective pop-ups. According to OptiMonk’s analysis of its users’ pop-ups, full-screen pop-ups have a 14.4% conversion rate, 3.31 points higher than its average conversion rate.
Sichuan food brand Fly By Jing uses a full-screen pop-up that appears as soon as a visitor enters the website. The pop-up matches the bold color visible on the rest of their website.
Gamified pop-ups
Gamified pop-ups offer site visitors the chance to “win” or reveal a randomized mystery offer by spinning a virtual wheel or removing the foil from a virtual scratcher. Wisepops found gamified pop-ups had higher conversion than non-gamified (4.04%), with spin-to-win being the most successful (29.99%).
Skin and body care brand Kopari Beauty used the pop-up app Alia to create a scratch-off pop-up that increased opt-ins by 37% compared to their previous yes/no pop-up format.
Lightbox pop-ups
A lightbox pop-up dims the other elements on the page, drawing the user’s attention to the content of the pop-up without taking up the entire screen. High-protein cereal brand Magic Spoon uses a lightbox pop-up to offer customers a chance to win free cereal.
Website pop-up examples
Here are some more pop-up examples to inspire your strategy:
Elavi
A pop-up is a useful way to learn more about your customers and collect their contact information. Take protein snack company Elavi, who surveys customers on what they prioritize when looking for snacks. Elavi incentivizes customers with a discount, which they receive after they provide their email address and phone number.
Elavi worked with design agency Otherhalf Studios to create their website. Cofounder Jaz Fenton says there’s another benefit to pop-ups: They help you keep your hero section uncluttered and focused on your brand story.
“A lot of people tend to focus on pushing a promotion [in the hero], which is great, but there are other spots that you can do that on your site, maybe in your promo bar or a pop-up,” Jaz says on an episode of the Shopify Masters podcast. “Your hero should really explain what you are trying to solve. What makes you different?”
By using a pop-up, Elavi’s hero section remains all about the brand. It uses a three-part hero slider that gives visitors an idea of what Elavi stands for (high-fiber, low-sugar snacks) and shows their product variety.
Bola Grills
Bola Grills uses pop-ups to provide social proof, a psychological phenomenon that explains people’s tendency to form opinions based on others’ actions and opinions. If a visitor looks at Bola Grills’ product and category pages, they will see a small pop-up at the bottom, left-hand side of the screen that informs them that someone recently made a purchase.
The pop-up displays the buyer’s name and location as well as the purchased item. The pop-up also links to the purchased item, making it easy for customers to learn about or purchase that item.
In an episode of Shopify Masters, Bola Grills founder David Levy says he added this feature to the Bola Grills site after seeing it on other ecommerce stores. There are a number of Shopify apps you can use to add this feature, such as TA Sales Pop up.
Taylor Stitch
Men’s clothing company Taylor Stitch uses a pop-up that is triggered once a customer scrolls about halfway through the homepage. This lets customers familiarize themselves with Taylor Stitch’s offerings before they are asked to connect with the company over email.
One way to test whether this strategy works for you is to A/B test the placement of your pop-ups to see what leads to higher conversions. Taylor Stitch uses Klaviyo, which allows businesses to run different versions to see which performs best.
Pip’s
Popcorn brand Pip’s has their pop-up pull double duty. It communicates an important message to customers, informing them about their name change. It also offers 20% off in exchange for their contact information.
The pop-up appears on a delayed schedule, giving visitors an opportunity to check out their new packaging before they explain the change. For customers who know the brand, the pop-up quickly reinforces that they are on the correct webpage.
3 top Shopify pop-up apps
There are hundreds of pop-up apps available through the Shopify App Store. The following are the highest-rated free pop-up apps created by Shopify or Built for Shopify:
Shopify Forms
Shopify Forms is a native pop-up form solution you can use to capture leads. With this tool, you can set triggers, choose placement, and change the color of the form so that they complement your website.
Shopify Forms has a translation feature, which keeps you consistent if you have localized store content. You’ll have to add extra languages on the Languages section of your Shopify admin and then turn them on in your Forms. You can choose from various languages, like Arabic, Armenian, Greek, Spanish, and Somali.
You can create up to 25 forms for each Shopify store. Forms integrates with other Shopify tools, like Shopify Flow. Shopify Flow has several templates that can help you organize the data you collect via Forms. For example, after a form submission creates a new entry, you can add a row to a Google spreadsheet.
- Pricing: Free
- Shopify App Store Rating: 4.4
Sendwill
Sendwill is a free pop-up app from Cwill, which offers a suite of marketing apps for Shopify. Alongside standard pop-up forms, Sendwill also supports spin-to-win pop-ups. It integrates with popular email marketing platforms like Klaviyo and Mailchimp.
- Pricing: Free
- Shopify App Store Rating: 4.9
Pop Convert
Pop Convert offers different styles of pop-ups, including gamified and banner types. You can A/B test several versions of a pop-up to get the most engagement, and there are more than 250 templates from which to choose.
Watch company Santa Nova uses a scroll-based pop-up created with Pop Convert, which they connected to Shop. Visitors can choose between sharing their email or claiming their discount through Shop if they already have an account with the app. (Shopify Forms also has this feature.)
- Pricing: Free plan available; the unlimited plan is $15 per month
- Shopify App Store Rating: 4.9
Website pop-up examples FAQ
What is an example of a pop-up notification?
A box that overlays a store’s website offering a discount in exchange for a customer’s email address is one of the most common pop-up notifications.
How do I make a pop-up message on my website?
You can create a pop-up by using a tool that offers customizable pop-up templates, like Shopify Forms and other pop-up software available through the Shopify App Store. Some sites add custom JavaScript and HTML code to trigger the pop-up based on user behavior.
Are pop-ups good for websites?
Pop-ups can encourage website visitors to generate leads and encourage purchases. An OptiMonk analysis found that cart abandonment is the use case with the highest conversion rate at 17.12%
