How to Create Lightbox Popups That Work

a lightbox popup on ecommerce website made.com

Lightbox popups rose to fame a few years back with a case study published on Aweber.
One of their customers increased their subscriptions by a whooping 1,375% using lightboxes.

But lightbox popups are not just good for capturing email addresses. Webmasters use them to embed videos, images or simply to share messages in a highly visible way.

Let’s review how they can be useful for you.

What is a lightbox popup? How does it work?

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 popup example

A lightbox popup promoting a Black Friday offer on Turntable Lab.

It was named after the Lightbox JavaScript library.

Lightbox popup examples

To give you a better idea of what a lightbox popup looks like, here are a few examples:

 

Email lightbox

This first example comes from Talulah, a Shopify store, where it’s used to build their email list. The background lights are dimmed almost to the maximum which makes the popup highly visible in contrast.

An email lightbox popup on Talulah's website

Image lightbox

Lightbox popups can be used to display a simple image. That’s what JewelStreet does. Triggered on exit, this popup contains an image aimed at convincing visitors to keep shopping on the website.

Image popup example

 

Video lightbox

This example comes from Exito, a Columbian ecommerce leader. They 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 popup on landing (it appeared right away when users arrived on the website).

A video lightbox popup on Exito.com

 

Mobile lightbox

Did you think lightbox popups didn’t exist on mobile? If so, this example will change your mind. This mobile lightbox example comes from Tom Ford.

A mobile lightbox popup on Tom Ford

 

When should you use lightbox popups?

As a marketer Lightbox popups enable you to grab your visitor’s attention and focus on your message. They leave your visitors only 2 options: take action within the popup or close it. As such they are very powerful: your message can’t be ignored. But with great power comes great responsibility. Too many lightbox popups can hurt your visitor’s experience.

To make sure lightbox popups are the appropriate format for your popup, you can ask yourself the following questions:

  • Is my message worth interrupting my visitor’s navigation?
  • Is the benefit for my user big enough to justify that interruption?
  • As a visitor, what are the chances I would find that popup intrusive?

Here are some examples of situations where lightbox popups are appropriate:

  • To share an important announcement (shipping delay, limited support, terms and conditions update)
  • To onboard a new user
  • To promote a big discount
  • To share a message on exit
  • To confirm an important action (for example that the user is above the legal age required to visit your website)

Last but not least: lightbox popups should be used carefully on mobile devices. Google penalizes websites which use popups that make content less accessible. Lightbox popups are explicitly listed among the popup formats which should be avoided on mobile devices.
If you want to display a lightbox popup on mobile, make sure it’s displayed after the first page.

How to prepare the design?

Content

As lightbox popups interrupt your users during their navigation, it’s particularly important to keep your content short and relevant.

Choose your words carefully. Avoid long sentences and use power words to make your message more impactful.

MyRuMe's lightbox popup

This is how MyRume shared shipping deadlines during Christmas.

 

Overlay color and opacity

The ‘classic’ lightbox popups darken the website background. But with advanced popup editors, you can choose the color of the overlay and its opacity.
Regarding the color, we recommend choosing either the classic grey or black. But you can also choose a color which matches your website’s visual identity.

Regarding the opacity, UX for the Masses summed it up perfectly:

“Too dark and users will no longer be able to see which page they’re on. Too light and users might think that the page is still active and might not even notice the overlay in the first place.”

Closing options

Closing options are a tricky question: you’ll have to choose between a closing X (highly visible) or a dismiss link. If your closing option is too visible, your visitors risk clicking on them immediately without reading your message. If it’s too difficult to find, your users might be frustrated.

Recently we reviewed optin campaigns totalling 204,775,612 cumulated displays to find out what was the impact of having a simple closing link vs. a closing X. It turns out that the campaigns without a closing [X] outperform those with by +129% on average!

That said, if you want to make sure you are not hurting your website UX, you can monitor the impact on the bounce and/or exit rates using Google Analytics (WisePops comes with a Google Analytics integration which makes that process quick and easy).

What is the recommended targeting?

Use “exit” trigger for the best results
Displaying your lightbox on exit has a major advantage: it catches the users when their session is over. They have nothing left to do on your website. Everything displayed at that moment is just icing on the cake.
Exit popups also perform best. During our internal review, we noticed that they outperform landing popups by +5% (that might not sound like much, but for a website collecting 6,000 emails/month, that’s an extra 300 emails/month and 3,600/year).

Limit displays
To avoid annoying your users, cap your displays and exclude existing subscribers.

How to create a lightbox popup

Lightbox can be coded with a combination of HTML and CSS. You’ll also find Jquery scripts which allow you to display basic HTML lightbox popups.
If you’re not a dev or if you simply want more flexibility and targeting options, WisePops can be a good alternative.

Why WisePops:

  • Display popups on any kind of website whether it’s a WordPress blog, an e-commerce website, a custom website etc.
  • Easily design all kinds of popups (there are more to popups than lightbox popups).
  • Rely on our 30+ targeting options to reach the perfect audience for your campaigns
  • Monitor the impact on your conversion rate and revenue