5 Best Popup Overlay Examples That Convert in 2026

Used well, popups convert, and they're a good tool for lead generation and email list building.

You have a variety of options available as popup use-cases for promoting your business and growing revenue. The overlay itself is the hard part. It has to be short, fit your brand, and still be worth stopping for.

The five popup overlay examples from Dolce & Gabbana, Nike, Bruno Magli, CoSchedule, and Revolve each show a pattern worth copying. Every teardown covers the design choices, the offer and the conversion principle underneath, so you can rebuild the pattern on your own site this week.

What is a popup overlay?

A popup overlay is a website element that opens on top of the page content with a darkened or blurred background behind it. The dimmed background does most of the work. It pulls the eye to the popup and leaves the visitor one decision: act on the offer or close the window.

Designers also call this pattern a lightbox popup or a modal popup. The names mean roughly the same thing in marketing, even if the underlying code differs. The shared trait is the focus-stealing layer that sits between the visitor and the rest of the page.

The overlays that work best do one of three jobs well: capture an email, deliver a discount, or rescue an exit. The ones that flop usually try to do all three at once, with cluttered copy and a CTA that fights itself.

Overlays are different from interstitial popups (which take over the full screen and block scroll), welcome popups (a use-case category that often runs as an overlay), and slide-ins or sticky bars (which never dim the background). Pick the format before you write a line of copy. Our guide to the types of popups covers every format. In our 2026 benchmark, center modal popups convert 0.88% vs 0.49% for corner/slide-in boxes (median campaign).

This post is the gallery. If you want the mechanics (how an overlay works on a page, the main overlay types, and a build from scratch), our guide to website overlays covers them.

Why popup overlays still work in 2026

Popups have a reputation problem. The numbers are kinder. Across 3,034 Popupsmart popups that ask for an email or phone number (January 2024 - September 2026, each with at least 1,000 displays and 14 active days), the median converts 0.83% of its displays into leads; the top 25% reach 1.96% and the top 10% reach 3.87%. The full method is in our popup conversion benchmark report.

The gap between the median and the top 10% is the room a better offer, a shorter form and tighter targeting have to work with. The overlays winning in 2026 do four things the losing ones don't: they target a specific visitor segment, lead with a concrete offer, run on a sensible trigger, and respect mobile users.

That last number is why the design choices in the examples below matter: an overlay gets one look before the visitor decides.

5 best popup overlay examples that convert

I picked these five overlays because each one teaches a different lesson. One nails brand-matched aesthetics, one keeps the copy short but asks for three fields, one trades a discount for an email, one rescues exits with a soft sell, and one combines a coupon with a refusal option that still serves the brand. Read them in order and you'll have five distinct patterns you can layer into one campaign.

The screenshots were taken in December 2023, when this post first ran. Brands change their popups often, so read them as patterns rather than as what the sites show today.

1. Dolce & Gabbana — newsletter overlay

The Dolce & Gabbana popup is the textbook example of brand-matched design. It looks like a page from the editorial, with the same model imagery, the same black-and-white palette and the same typography.

Nothing about it feels like a third-party widget bolted onto the site.

What it does: The overlay captures email plus two preference fields, gender and language. It opens over the homepage, takes up most of the viewport, and dims the catalogue behind it. The copy promises news from the world of Dolce & Gabbana rather than a discount, which fits the luxury positioning, and a consent line under the fields says what the emails will cover.

Why it works: A luxury brand rarely leads with "10% off", so Dolce & Gabbana swapped the price hook for an exclusivity hook, then used the two extra fields to segment the list from the start. Because the popup matches the editorial style, the visual interruption is small. You read it as part of the site, not as an ad.

The extra fields have a cost. In our benchmark, popups asking for one or two fields convert 0.88% and 0.94%, against 0.56% for three fields (median campaign; spin-to-win and other gamified popups are counted separately). For a luxury list where each subscriber is worth more, the brand is betting the segmentation pays that back.

Key takeaway: Match your overlay to your editorial design system, not to a generic template. If your average order value justifies a smaller list, ask for the segmentation field upfront.

2. Nike — short copy, three required fields

Nike took a different path from Dolce & Gabbana. Where D&G uses imagery, Nike uses near-empty space: a logo, a headline and one line of copy. The form is another story. Nike asks for an email address, a date of birth and a shopping preference, and marks all three as required.

What it does: One headline, one short subhead, three required fields, one button. The promise is "be the first to know": Nike emails with content, news and exclusive offers, which for Nike's sneaker audience reads as early word on limited releases. The page behind is blurred as well as dimmed, and the visual restraint matches the brand's product photography, which already relies on white space.

Why it works: The copy is Hick's Law in action. The fewer choices you give a visitor, the faster they decide, so there's one promise, one button and no second CTA competing for attention. The form goes the other way: date of birth and shopping preference let Nike send the right drops to the right people, at the cost of a longer form, and the field-count numbers in the Dolce & Gabbana example show that cost. A brand with Nike's pull can afford the trade. The early-access angle plays on loss aversion, because sneakerheads care more about missing a drop than getting a discount.

Key takeaway: Keep the promise to one line. If you don't have Nike's brand pull, collect email first and ask for everything else inside the welcome email.

3. Bruno Magli — 15% off discount overlay

Bruno Magli runs the most copied pattern in e-commerce: enter your email, get a discount code. Yet the execution still teaches something. The overlay is tightly cropped, the offer is specific, and the visual ties the popup to the product behind it.

What it does: The headline reads "Unlock 15% off your order". One field, one "Continue" button and a close ×. A row of the brand's sneakers runs along the bottom of the popup, which makes the popup feel like a continuation of the product page rather than an interruption.

Why it works: The discount is concrete and immediate. In our benchmark, signup popups that offer a discount code convert 1.46% vs 0.75% for signup popups without one. A discount overlay turns the email exchange into a trade with a known payoff. The visitor pays for a 15% coupon with their address, and knows it. The product row is a small touch, but it sells the idea that the popup belongs to the brand.

The one soft spot is the button. "Continue" says nothing about the offer, and first-person buttons ("Send my code") convert 1.18% vs 0.80% for neutral wording (English popups, median campaign). "Unlock my 15%" is the test I'd run first.

Key takeaway: If you run a discount overlay, name the exact percentage and let the product show inside the popup. Vague offers ("save more today") give the visitor nothing to weigh.

4. CoSchedule — exit-intent overlay

CoSchedule's exit-intent overlay is one of the better B2B SaaS examples of the pattern. Instead of begging the leaver to stay, it switches the offer to a demo of the marketing calendar and ties the imagery directly to the product it sells.

What it does: Fires when the cursor moves toward the browser's close button or the URL bar. Promotes the marketing calendar product with a screenshot and a "schedule a demo" CTA. The headline reads "Before you go...", and the copy says it only takes 30 seconds to sign up for CoSchedule's marketing calendar software. The brand colors carry through, and the copy speaks to the visitor's likely job title rather than to a generic shopper.

Why it works: Exit-intent triggers catch visitors at the lowest-intent moment. They were leaving anyway, so the cost of interruption is near zero. Don't expect the trigger to do the work, though. Exit intent shows no statistically reliable advantage: popups on the most sensitive exit-intent setting converted 1.10% vs 0.78% without exit intent (median campaign), a gap that could be chance. Our look at whether exit-intent popups work has the details.

So the offer carries it. CoSchedule recognized that someone bouncing from the product page isn't going to convert with another "10% off" offer, since SaaS pricing doesn't work that way. A demo request is the right next step for a high-intent visitor and a useful retargeting hook for everyone else. The format is closer to a guided handoff than a save attempt, which is the right tone when your buyer is researching, not impulse-shopping. For more of this pattern, see our exit-intent popup examples.

Key takeaway: For B2B SaaS, swap the discount on your exit overlay for a demo or a high-value content offer. The visitor's exit intent signals research mode, not buying mode. Your popup should respect that.

5. Revolve — discount-targeting overlay

Revolve's overlay is the most complete pattern of the five. It trades a discount for an email, adds one preference choice, and gives a respectful escape hatch that still leaves the visitor on the site.

What it does: Offers 10% off in exchange for an email, with a women, men or both choice for segmentation. The button reads "Get my coupon", and the dismiss link reads "No thanks, just let me shop". It's a soft refusal that doesn't punish the visitor for saying no. There's a four-photo collage on one side and the form on the other, with the button in solid black.

Why it works: Three details carry it. The offer is specific: popups stating 10% off convert 1.25% vs 0.67% for popups that state no discount. The button is first-person, the wording that came out ahead in the Bruno Magli example above. And the dismiss text lets the non-buyers continue browsing without guilt, which protects future intent. Revolve hedges the conversion bet without losing the email opportunity.

Key takeaway: Add segmentation by visit count to every discount overlay. Pair the offer with a dismiss link that returns the visitor to the page, not a closed tab.

Common patterns in high-converting popup overlays

Five brands with five different audiences, and the same patterns keep turning up. Here's what the winners share, checked against our benchmark where it has something to say.

• One value prop per overlay. Every example above promises one thing: brand news, early word on drops, 15% off, a demo, 10% off. None of them tries to sell three benefits at once. When you stack offers, the visitor has to evaluate each one before deciding.
• One primary CTA, one secondary action. The button does the work. The dismiss link is small, polite, and never competes for visual weight. There's no third option ("Maybe later," "Tell me more"), because every extra choice slows the decision.
• Brand-matched design. Dolce & Gabbana's editorial style, Nike's white space, Revolve's photo collage. Each overlay reads as part of the site, not as a third-party widget. Brand-matching is about trust, not about finding one winning color: button colour, dark vs light popup backgrounds, urgency words and question headlines show no measurable effect on conversion; the data are too noisy to rule out modest effects.
• Minimal form fields. Bruno Magli's overlay collects exactly one piece of data. Dolce & Gabbana adds two preference fields, but only because their luxury list demands the segmentation upfront, and Nike does the same with date of birth and shopping preference. A name field is a closer call: adding a name field alongside the email shows no reliable effect: the overall gap in its favour (1.25% vs 0.88% for email only) reverses among campaigns whose form rarely changed (0.74% vs 0.79%).
• Trigger that matches intent. Entry triggers work for first-time discount offers. Exit-intent works when the visitor has already shown research-mode behavior. Time-based and scroll-based triggers fit content sites where engagement signals come later. Wrong trigger, wrong popup.
• Mobile-first sizing. On a phone, an overlay needs thumb-reachable CTAs and dismiss buttons. An overlay that traps a mobile visitor is a refund request waiting to happen.
• Segmentation rules that protect repeat visitors. A new-visitors-only rule is the simplest version, and popups targeted at new visitors only convert 1.13% vs 0.77% for popups shown to everyone. With that rule, repeat visitors don't see the popup at all, which solves the most common complaint about overlays: showing the same offer over and over. Frequency caps, visitor type and URL targeting work from other angles, so the same person doesn't see the same popup forever. Most "popups are annoying" complaints trace back to this.

How to build a popup overlay in Popupsmart

Popupsmart is a no-code popup builder that lets you ship an overlay in five steps. The walkthrough below covers the full path, from sign-up to live campaign, and follows Popupsmart's guide to creating your first popup. I've grouped it into the five decisions you have to make.

If you'd rather describe the campaign than click through it, Popupsmart's AI agent builds a whole campaign from a chat request (template, targeting and triggers, integrations) and publishes it, on every plan, the free plan included.

Step 1: Sign up and create your campaign

Create a free Popupsmart account and click "+ New Campaign" from the dashboard. Give the campaign a name, choose the website it will run on, and click Save to open the builder.

Step 2: Pick an overlay template

Pick a layout that matches the overlay shape you want. The template gallery filters by popup type (Light Popups, Full-Screen Popups, Floating Bar), with extra filters for animated and multistep popups. Most teams start from a center-screen lightbox for entry triggers or a focused exit-intent layout for cart pages. You can browse popup templates or our popup design templates for inspiration before committing. If nothing fits, pick a blank template and build from scratch.

Step 3: Customize design and copy

The Customize and Style steps are where the overlay starts to look like yours. Update the headline, subhead, CTA button text, colors, image, and privacy line. The Style step also holds the overlay itself: in the body style settings you set the overlay color and its opacity, which decide how far the page behind is dimmed, and under the advanced options you choose whether visitors can close the popup with the Esc key or by clicking the overlay (how to adjust popup style). Match the design system on the page behind the popup. The Bruno Magli example earlier shows what good product matching looks like. This is also where you write the offer copy. Keep it short and concrete.

Step 4: Add form elements and targeting

Open the Segment step. This is where you decide who sees the overlay and when. Pick visitor type (first-time, returning, both), device (desktop, mobile, tablet), URL path rules, schedule windows, and frequency caps, or turn on Smart Mode and let Popupsmart set the targeting. Keep the form fields lean; the one-or-two-fields numbers above are why. If you need name or phone, ask in a follow-up email instead.

Step 5: Set triggers and publish

Pick the trigger in the same Segment step. Page load works for first-visit discount overlays. Exit intent works when you want to catch leavers, like the CoSchedule example. Scroll depth (50% or 70%) works on long-form pages. In the Publish step, check the targeting summary and click Publish. If your site doesn't carry the Popupsmart embed code yet, paste it just before the closing </body> tag or add it through Google Tag Manager, verify the domain, and load the page to confirm the overlay fires the way you set it.

Popup overlay best practices

The teams beating the median get the basics tight. These are the five I'd hold every overlay to before you ship it.

• Time the trigger to intent, not impatience. Don't fire an entry overlay before the page has rendered. Popups that wait before appearing convert 0.83% vs 0.61% for popups shown the instant the page loads (median campaign); the direction holds in every year of data but the difference is not statistically reliable, so treat it as a lean, not a rule. The exact delay length (0-5 seconds vs 21-60 seconds) makes no measurable difference to conversion, so a short wait is enough. Or use scroll depth to catch visitors who have started reading. Exit intent should fire only on the first detected exit motion, never every time the cursor wanders.
• Cut copy to under 20 words. Headline, subhead, and CTA text combined should fit on a phone screen without scrolling. 71% of visitors who close a popup do so within 5 seconds of it appearing. Bury the offer in a paragraph and you've already lost.
• Give the button readable contrast. WCAG 2.2 AA asks for 4.5:1 between the button text and the button, and 3:1 between the button and the panel around it. That's the floor, not the ceiling. A button that blends into the panel costs you clicks even when the offer is good. Test it in grayscale. If you can't tell the button from the background, neither can a colorblind visitor.
• Design mobile first. 63% of popup displays happen on mobile, and on mobile the median popup converts 1.02% vs 0.57% on desktop. Make the close button at least 44x44 pixels, keep the form within thumb reach, and never block the entire viewport on a phone. Google's guidance on intrusive interstitials warns against popups that cover the main content on mobile, so this is also an SEO concern. Our mobile popup guide goes further.

• Cap frequency before the third view in a week. The first two times a visitor sees a popup in a week convert at similar rates (1.33% and 1.22% of displays, pooled); from the third view conversion falls, and from the sixth view it is 0.41%, 31% of the first-view rate. Showing a popup a second time caused no measurable drop in conversion within the same campaign; the decline begins with the third showing. After that, showing the same overlay every visit trains the visitor to dismiss without reading. Once they convert, suppress the popup permanently for that user.

For the design side of these rules (close buttons, sizes, spacing), see our guide to popup UX design.

Common popup overlay mistakes to avoid

The same few mistakes keep turning up. Fix them before you chase anything clever.

• Asking for too much data. Every field you add costs you: three fields convert 0.56% against 0.88% for one in the field-count data above, and forms that ask for a phone number instead of an email look weakest (0.46% vs 0.88% for email only), though that gap is not statistically reliable. Ask for the minimum to start the relationship. Enrich later through behavior or a follow-up email.
• Using one overlay for every visitor. A first-time visitor and a returning customer want different things. New visitors convert on popups more often than visitors who were on the site in the previous 7 days: the same popup converts better for new visitors in 75% of campaigns (median gap 0.30 percentage points; pooled 1.28% vs 0.54% of displays). Skipping segmentation is the difference between a popup that converts and a popup that gets reported as spam. Build at least two variants, one for first-time visitors and one for returning ones, before you go live.
• Triggering on every page. Site-wide popups feel desperate. Pick the pages where the offer is relevant (category pages for discounts, blog posts for content offers, pricing for demos) and exclude the rest. Page type matters more than most teams expect: popups on cart and checkout pages convert 4.57% vs 1.07% on the home page (median campaign); blog pages convert 0.23%.
• Forgetting the close button. Some overlays bury the X behind a small gray icon or rely on background-click to close. Both behaviors frustrate visitors, and a hidden close on a mobile overlay runs against Google's interstitial guidance. Make the close button visible, large, and standard-position.

Launch your first popup overlay this week

That's five overlays, the patterns they share, the build in Popupsmart and the practices behind the better ones. The fastest way to test what you've read is to ship one campaign this week. Start with a single first-time visitor offer, fire it on the highest-traffic page on your site, cap frequency at two views a week, and watch the opt-in rate over seven days. Iterate from there. When you want more ideas, our website popup examples collect patterns beyond overlays.

Frequently asked questions

What's the difference between a popup overlay and a modal?

The terms overlap heavily in marketing. A popup overlay is any popup that opens on top of the page with a dimmed background. A modal is the same idea on the engineering side — a window that blocks interaction with the rest of the page until the user dismisses it. In day-to-day use, "modal popup," "lightbox," and "popup overlay" describe the same pattern. Slide-ins, sticky bars, and floating widgets are different formats — they don't dim the background or steal focus.

When should I fire a popup overlay?

Match the trigger to the visitor's likely intent. Fire on entry after a short wait for first-visit discount offers: in our benchmark, popups that wait before appearing convert 0.83% vs 0.61% for popups shown the instant the page loads (median campaign), a lean rather than a rule, and the exact delay length makes no measurable difference. Fire on exit intent when you want to catch leavers from a product or pricing page. Fire on scroll depth (50-70%) for content pages, since a deep scroll signals real engagement.

How do I measure popup overlay performance?

Track three numbers at a minimum: the lead conversion rate (leads divided by popup displays), revenue per display (for discount popups, divide attributed revenue by displays), and unsubscribe or complaint rate within 30 days of the opt-in. The conversion rate alone is misleading. A popup that collects many addresses that unsubscribe within a month is a worse channel than a smaller one whose subscribers stay. For a yardstick, the median Popupsmart popup that asks for an email or phone number converts 0.83% of its displays into leads (3,034 popups, January 2024 – September 2026).

Can popup overlays work on mobile without annoying visitors?

Yes, but the rules tighten. Use a smaller overlay that doesn't fill the screen, place the close button where a thumb can reach it (top right or bottom of the modal), and avoid firing on entry. Exit intent on mobile is harder to detect — most builders use a back-button signal or a fast upward scroll instead of cursor motion. Frequency caps matter more on mobile because re-engagement after a bad popup experience is much harder than on desktop. Mobile is also where most overlays are seen: 63% of popup displays happen on mobile in our benchmark.

Related Articles:

How to Build Vue Modal Popups

16 Must-Know Lead Generation Automation Solutions