13 Popup Design Examples: Why They Work and How to Make Your Own

To help you create high-converting popups, this guide dives into both the theory behind effective popup design and real-world examples that get it right.

Whether you’re after more signups, higher engagement, or increased sales, you’ll find actionable tips and inspiration to craft popups that work.

Let's dive right in!

8 key tips to nail your popup designs

The first section of the article will go over the theory behind designing website popups. Beyond the design and content, we'll also delve into some other relevant areas, like when and where to display your popups.

1. Match the popup with your website’s branding

When you design a popup, you want it to feel like it's a part of your site, rather than an intrusion.

The way to achieve that is to match the style, colors, and typography of the rest of your site, just like in the example from Sector 9 below.

It might seem like a small detail, but this way, when your popup does appear, it will feel like part of the experience and convey trust.

Want to recreate this popup design on your website?

Use the template below! Just swap the image with your own, and tweak the copy, color theme, and CSS code if needed.

2. Consider using animation on popups

Based on behavioral science studies, motion is one of the most efficient ways to capture a visitor’s attention. If you want to apply that knowledge in your popup design, you can either replace a still image with a GIF or use animated popups, as Etérea did in the example below.

This approach works especially well if you’re using popups to promote a new product, collection, or a limited-time deal and don’t want visitors to miss it.

Want to recreate this popup for your website?

Grab the template below. The animation part is already pre-designed and requires no special knowledge. Just replace the text and the image to make it yours.

3. Have a clear, enticing CTA

You're probably displaying a popup on your site because you want your visitors to “do something”. That “something” could be joining your email list, checking out a sale, grabbing a coupon, etc.

To drive people towards performing that action, you want to have a single button with a strong call to action (CTA). For example, if you're offering a coupon in exchange for an email subscription, something like “Get a discount” sounds way more enticing than “Subscribe.”

This is exactly what Lola Blankets does with their CTA. Instead of “Sign up” or “Subscribe,” their action button says: “Send me 35% off” 👇

4. Use contrasting colors for your CTA button

A compelling CTA isn't just about the text, it's also about grabbing your visitors' attention in other ways. Namely, color.

You want to use a color that contrasts with the rest of your popup to specifically draw visitors' eyeballs right to the button that you want them to click.

For example, Little Love Bug below uses a contrasting lilac color that draws attention while still matching the rest of the site.

If you struggle to find a contrasting color that will also match your branding, the easiest option is to paint the CTA button black and leave the button text white. It’s a universal solution that works for most websites.

5. Experiment with different formats

When you hear the word “popup”, the first thing that comes to mind is probably one of those modal popups that appear and take over your screen until you click a button.

Don't be afraid to experiment with less intrusive popup types, though. For example, you can try compact slide-ins.

When designed correctly, they can still drive action without requiring a modal interaction or drastically compromising conversion rates.

6. Consider designing a two-step popup

While on the topic of formats, one of the latest trends in popup designs is a two-step approach. It means that instead of displaying a pop-up form immediately, you can first ask website visitors if they’re interested in your offer.

Here is what it looks like in real life, implemented on the Bombas online store:

This approach employs the Zegarnik Effect which suggests that most people are likely to complete an action they’ve already started. In other words, those who have clicked on the first “Yes, Please” button are highly likely to complete the form.

7. Use microcopy to allay fears

Microcopy is a small, unobtrusive piece of text near your CTA button that allays the fears some people might have of interacting with your popup. For example, if you have an email lead generation popup, a natural fear that most people will have is “I don't want to get spam emails”.

Using microcopy, you can eliminate those fears by explaining what type of emails you’re planning to send and how often. Here are some phrases that can be helpful:

• “We won't ever share your email”
• “We'll only send you X emails per week”
• “You can unsubscribe at any time”

Here is an example of a popup with a minimalistic design and embedded microcopy at the bottom:

8. Remember mobile (and treat it differently)

Nowadays, web traffic is split about 50/50 between desktop and mobile visitors. When you're designing popups, though, it's easy to forget about that and just focus on the desktop experience of your visitors.

One of the best design practices for mobile popups is to use a sticky “Get X% off” button that opens an email form upon click. That’s exactly what Pilgrim, a European jewelry company does on its website:

9. Add newsletter preference options

If you’re planning to send promo newsletters to your contacts, the more targeted your emails are – the higher your conversion rates will be. And to be able to craft personalized emails, you should first segment your audience based on their interests.

For example, if you’re an apparel brand, you can ask new subscribers about their preferences, as Squairz does:

So rather than sending the same offers and product recommendations to all of your contacts, you might choose a more targeted approach and create a better experience for your audience.

While this does require a little more upfront work, it can pay dividends because your customers are more likely to engage with a personalized offer.

10. Play around with the timing

Finally, while timing isn't a part of popup design from an aesthetic perspective, it's still an important part of creating an effective website popup. Rather than displaying your popup right away, you can experiment with various delays.

Popup timing options you can experiment with are:

• Exit-intent popups
• Time-delayed popups
• Waiting for a certain number of page views

Most brands choose to display their email opt-in forms after a visitor spends a few seconds on their websites. If you wait until visitors are engaged with your content to ask for their email addresses, there's a better chance they will be willing to join your list.

13 Popup design examples we love

Now that you know some theory, let's explore real-world popup design examples. Beyond providing popup design inspiration, we'll also dig into why these examples work so well.

All the popup examples below can be easily recreated on your website with the Getsitecontrol popup builder.

1. Urban Kissed

This popup from Urban Kissed is a great example of a form using a contrasting color for the CTA button. This popup does several other things well, though, so it's worth investigating in a little more detail.

First, you can see how the entire design matches the looks and colors of the rest of the site, especially the combination of beige and black used for both the popup and the logo. It also uses an opt-out button (“no, thanks”), and dangles a 5% discount as an incentive in exchange for people's email addresses.

2. Michelle Vella Art

Michelle Vella is an online art store, and this popup design example is worth attention because it employs the two-step approach we discussed earlier. It also demonstrates a smart use of CSS, enabling a darkened background that drives focus straight to the offer.

This popup targets new store visitors and offers free shipping on the first purchase in exchange for an email. Note that the microcopy at the bottom of the popup specifies the locations included in the promo.

3. SIEDRÉS

Unlike the previous example, SIEDRÉS uses a minimalist, dark-themed popup to collect emails.

Although our research shows that popups with images convert better than popups without images, when your landing page is busy, a single-tone popup may be your best solution — as long it’s in contrast with the background. Another detail you should take note of is the inverted pyramid text structure in the description. It maintains the overall aesthetics and makes the text easier to read.

4. Scarpetta pasta

This popup design example from Scarpetta pasta is interesting mainly because it uses a GIF instead of a still image. The popup doesn’t just look attractive, it also creates a semi-immersive experience by showing the incentive in action.

5. Kanzen Skincare

Kanzen Skincare uses a fullscreen email popup, but with a twist. Rather than showing it as a “welcome mat” when a visitor arrives, which a lot of people find annoying, this brand triggers it with exit-intent.

This creates a less intrusive experience and gives Kanzen Skincare one more chance to capture exiting visitors. Beyond that, Kanzen uses a big bold call-to-action button saying: “SHOW ME THE MONEY!”. And they’ve also added a unique touch to the headline by making it fun and conversational.

6. Everyday Prayer Co

Everyday Prayer Co is a company selling Catholic street apparel, mass journals, and prayer tools. When they released a wallet Rosary Card, they used a welcome popup to notify website visitors of a new product.

This is a great popup design example because it appears at the right moment (soon after a visitor lands on the website), uses the same accent colors as the website, and effectively conveys the message through the background image and a concise text. Finally, the CTA button takes those interested in the Rosary Card straight to the product page.

7. BIBS

This BIBS popup is a good example because, unlike the vast majority of popups, it slides-in from the left, thus using a pattern-interrupt approach.

There's nothing too flashy going on, but such is the overall tone of the website aesthetics. What’s noteworthy is that the form is asking subscribers to type their first names — presumably, so that BIBS marketers can personalize email subject lines and newsletters. That’s another neat trick you may want to try when you collect emails on your website.

8. Johnny Fly

Johnny Fly utilizes interesting techniques that we haven't previously discussed — urgency and an element of surprise. In addition to offering a discount in exchange for visitors' email addresses, Johnny Fly ups the ante by adding a countdown timer.

While this is an aggressive tactic for a popup, urgency is a proven way to increase your conversion rates. Beyond that unique twist, you can also see how the popup matches the rest of the website in terms of style.

9. Swedish Linens

Swedish Linens uses a sidebar to collect emails. It’s a less common but highly-efficient popup type that slides in from the side and takes up the entire screen height.

There are a couple of nice things going on here:

• This popup position is less common, so it is less likely to be dismissed or closed accidentally.
• The image on the popup features one of most popular products, reinforcing the discount offer.

If you’d like to learn more about how different popup formats look and perform, here is a guide to help you.

10. Proper Pasty

Like some of the examples above, Proper Pasty uses a two-step approach in their popup design. A compact popup teaser in the bottom left corner notifies visitors of the 10% discount and launches a fullscreen popup upon click.

Once visitors agree to get a discount, they’re asked to type their email addresses and sign up. Although usually fullscreen popups are considered to be an agressive way to grow an email list, it’s perceived differently when a visitor launches it intentionally via a teaser button.

11. LE BRAQUET

At first glance, Le Braquet’s email opt-in might seem like any other popup in this roundup, but there is a couple of things here that are worth noting.

First, this popup contains newsletter language preference buttons that will help the company automatically tag new subscribers and send them newsletters in the corresponding languages. Second, the text on the signup button is crafted thoughtfully: “Yes, I want to sign up”. It’s actionable and affirmative. Finally, the link at the bottom of the popup links to the Terms and Conditions page, for those who might have questions before subscribing.

12. Hot Skwash

This compact pop-up coupon on Hot Skwash’s site offers a welcome 20% discount on the first purchase and only appears for first-time visitors.

This popup is straightforward. The noteworthy part about its design is that the coupon button allows visitors to copy the discount code to the clipboard and paste it at checkout instead of typing it manually.

13. MANC

MANC OFFICIAL uses this modal popup to prevent shopping cart abandonment. The promo will only appear if a customer adds a product to the cart and starts heading to the exit before completing the purchase.

The popup reminds of the 10% discount and offers two options for visitors: going straight to checkout or closing the popup to continue browsing the store.

How to create awesome popup designs like these

You've gotten your dose of popup design inspiration. Now let's finish things out with a look at how you can create your own popups and incorporate the principles of popup design from this post.

Getsitecontrol helps to build website forms you can use to grow your email list, promote discount offers, survey visitors, and a lot more.

Getsitecontrol offers a free plan, so you can add non-targeted popups to your website at no cost, using a simple, code-free interface.

Select a template

To get started, create an account and follow the relevant instructions to install Getsitecontrol on your website. Then log into your account, click the + Create widget button on the main page of the dashboard and select Premade widgets.

Premade widgets are the fastest way to create a popup because they are already set up for common marketing purposes — such as a welcome discount or an exit-intent offer — so you only need to customize the copy and image.

As an alternative to premade widgets, you can use one of the templates from the gallery.

Adjust the copy and design

Once you select a template, you can customize the text and form fields to nail your copy and craft the perfect CTA message:

Visit the Theme section to change the color theme and font to make your popup perfectly match your website's design.

If your template features an image, click on it to change it. Choose an image that better visualizes your offer from the gallery, or upload one from your computer.

Repeat the process for all pages on your popup.

Select targeting settings

When you are satisfied with the CTA and design of the popup, move on to the Targeting tab. From there, you can use targeting and trigger rules to control exactly where and when your popup will appear.

Here is a brief overview of the targeting settings:

• The first section determines the URLs where the popup will appear. The ‘*’ is a wildcard which means the popup appears on all pages of the website by default.
• The second section allows you to define the type of visitors you want to target: first-time visitors, returning visitors, visitors from certain countries, and so on.
• The third section contains a display trigger: exit-intent, time delay, scroll depth, or inactivity.
• The fourth section defines the conditions when the popup should stop appearing for the same visitor.
• The last section allows you to create a schedule for the popup to be displayed.

Feel free to change these settings however you feel is best for your purpose. You’ll find more information on the available targeting options in Getsitecontrol’s complete guide on targeting.

Create a follow-up email

Lastly, if you are using a popup to collect email addresses, you can set up an automated follow-up email your subscribers will receive when they sign up. In the email, you can thank your subscribers for joining your newsletter, deliver a promised incentive, or simply share useful information.

To avoid blank page paralysis, you can use one of the email templates available in the dashboard. Just go to the Follow-up tab and proceed to edit the email:

You can add images, GIFs, coupon boxes, buttons, and even a countdown timer to stylize your email and convey the right message. Before saving it, remember to fill out the subject, sender, and preheader fields on the right, and send the email to yourself first to make sure it looks great.

Save & close your popup and follow the prompts to activate it. That’s it, the popup is now running on your website.

Wrapping up

With Getsitecontrol, creating stylish and functional popups is a straightforward process that requires zero technical knowledge. The best part about it is that you never have to start from scratch, since you can find a suitable template for almost any purpose in the rich template gallery. At the same time, even when you select a template, you have enough editing tools to make your popup design match your website and your marketing goals.

Go ahead, register an account, and try it for yourself!