What is a Lightbox Popup? See How to Make One That Converts

Here to learn about lightbox popups? Great.

Many think that lightbox popups are just good for capturing email addresses, but they could be much more useful. Websites use them to show messages like notifications, sale promotions, signup forms, discounts, or announcements.

In this post, you’ll learn:

• What a lightbox popup is

• Difference between lightbox popups and popups

• How to create a lightbox popup

• Lightbox popup examples

What is a lightbox popup?

A lightbox popup is a popup that appears on top of the page’s content while the rest of the website is inactivated and dimmed out. As such, they make sure the user focuses on the popup rather than the rest of the screen.

Lightbox popups and popups: what’s the difference?

Lightbox popups got their name mainly because of the way they are enabled.

Here’s what I mean:

A “lightbox” is a UX effect that happens when you click to enlarge an image on a web page: the background is dimmed and the image comes into focus. This effect is useful if you, for example, want to see an image in more detail while browsing a gallery. In simple words, that small box “lights up” while the background gets darker.

Anna Kaley, a UX Specialist with Nielsen Norman Group, classifies lightbox popups like this👇 Note “nonlightbox” popups—those are traditional popups whose background does not change.

So—

Lightbox popups on websites are popups whose background is blurred. Simple as that.

This background effect, indeed, can look really cool, so many websites use lightbox popups. If you want to have one, too, check out the next section.

How to create a lightbox popup

I’ll be using Wisepops, our own popup app, for this tutorial (here’s how businesses use Wisepops to give you an idea of a campaign you can have).

Get a free account to begin.

Once inside Wisepops, click Create Campaign > Campaign Assistant > Grow your audience.

Next—

Customize your lightbox popup: add your text, image, and colors.

Next—

We need to dim the background.

To do that, Design > Style and click Overlay button to choose how dimmed you want the background to be. Make sure the Use Overlay toggle is on to view this button.

To see how your lightbox popup looks like, add your website in Display Rules > Pages and use the Preview button.

If you’d like more tutorials, please see:

• How to make a discount popup

• How to make a welcome popup

• How to add a popup to a Shopify store

Lightbox popup examples

1. Email lightbox popup (Talulah)

This first lightbox popup example comes from Talulah, a successful Shopify store, where this pop-up form is used to build their email list. The background lights are dimmed almost to the maximum which makes the popup highly visible in contrast.

2. Image lightbox popup (JewelStreet)

Lightbox popups can be used to display a single image. Triggered as an exit-intent popup, this lightbox popup example contains an image aimed at convincing visitors to keep shopping.

3. Newsletter lightbox popup (Not Pot)

You don’t have to dim the dim or blur of your popup completely to achieve the lightbox effect. In this example, we can still see the website, and that’s deliberate: this creative popup is a perfect extension of the website.

4. Video lightbox popup (Exito)

Exito wanted to display a video for Día de la Madre (Mothers’ Day) on their website. To make sure no visitor missed their campaign, they triggered their lightbox popup on landing (it appeared right away when users landed on the website).

5. Mobile lightbox popup (Tom Ford)

Did you think lightbox popups didn’t exist on mobile? If so, this example will change your mind. This mobile lightbox popup example is optimized for viewing on small screens and asks visitors to sign up for a newsletter.

6. Upsell Lightbox popup (GORP)

With this kind of lightbox popup, you can employ a very effective sales technique: upselling. It’s a great way to persuade shoppers to add more to their order. Below, you can see how GORP Clean Energy Bars uses an upsell lightbox popup to entice customers to add more to their order so they’ll get free shipping.

7. Email newsletter lightbox popup (Koffee Kult)

This example of a lightbox popup comes from a coffee shop. It’s a great one because of two reasons. One: its super clear and benefit-focused headline (“Want 15% off?”) and two: the stunning product image.

8. Lightbox popup with a mystery discount (Olive Your Heart)

Lightbox popups don’t have to be light—this one, for example, looks gorgeous! And it’s an interesting one, too: the website offers visitors a time-limited deal.