Lightbox Popups

6 Lightbox Popup Examples (And How to Create Your Own)

Want to create a lightbox popup for your website? In this guide, we share six quality examples to inspire some design ideas as well as ready-to-use templates to get you started in double-quick time.

What can ecommerce brands learn from the purposeful design choices of Las Vegas casinos? It turns out a lot. 

If you’ve ever been to a Vegas casino, then you know that they consist of a giant maze with minimal signage, few to no windows, and zero clocks in sight. These design choices are intentional, as they are focused on removing any distractions and keeping gamblers in the casino spending more money. 

Leveraging a lightbox popup on your ecommerce website does a similar thing on a smaller scale. They:

  1. Minimize and gray out all of the distractions
  2. Draw your buyers’ attention to the one thing you want them to do

In this post, we’re going to share what a lightbox popup is, some best practices, along with six quality lightbox popup examples you can use for inspiration. We’ll then round off with some customizable templates you can use to get started quickly.

What is a lightbox popup?

A lightbox popup is a popup box or widget that overlays a portion of the screen (usually the middle), leaving everything else out of focus and/or grayed out. It’s a way to redirect people’s attention to a specific calls-to-action—like a discount, upsell/cross-sell, product launch, webinar, etc.

Lightbox popup best practices

When you throw up a lightbox popup that converts like gangbusters, it can feel like you hit the jackpot.

It might be tempting to start using them in every place all the time. But, that’s generally a bad idea since a poorly-executed popup is one of the biggest site UX turnovers for visitors.

Here are a handful of best practices that you can follow to ensure that your popups convert without alienating all of your potential customers:

  • Create a compelling offer. Your lightbox popup is doomed from the start if your offer isn’t relevant and specific to your target audience.
  • Make your CTA actionable and specific. This applies to everything in marketing, not just popups. The easier you make it for someone to take your desired action, the more likely they’ll do it.
  • Set up the right triggers. It is not just about the right offer. It is also about displaying it at the right time. So, you should think about displaying it not only on the right pages but also consider the right time and scroll depth.
  • Use popup design best practices. Your lightbox popup should stand out and grab visitors’ attention.
  • Make sure your popup works well on smartphones. It is 2022, and most people start to search on a smartphone. You may want to consider either disabling a lightbox popup on mobile devices or ensuring it is easy for someone to click or remove.
  • Meet your visitors where they are. Think about the context of the offer.  For example, if someone is reading a top-of-funnel blog post, it might be more effective to display a lightbox popup near the end of the article with a CTA to download an ebook on this topic as opposed to trying to sell them on your product or service right away.
  • Don’t go overboard. Popups work, but they shouldn’t work at the expense of site UX, especially on smartphones. It can damage your brand’s reputation and make you look desperate.

6 lightbox popup examples

It is often easier to create your own lightbox popups if you can see and get inspired by others.

Here are six excellent examples that you can learn from. Read on for a break down of each.

1. Tipsy Elves' spin-to-win lightbox popup

Tipsy Elves is an apparel company that caters primarily to Gen Z and Millennial shoppers. For their Google Ad campaigns, they use a gamified discount popup on their landing page to attract new customers:

Lightbox Popup Examples: Tipsy Elves
See full example

Everything about this popup concept is well-executed. For starters, it's inspired by game shows like “Wheel of Fortune” and “The Price of Right” that almost every US Millennial and older Gen Z kid watched when they were home sick from school.

Not to mention, the specific discount amount you can win is also significant.

A lot of ecommerce sites make their discounts too low. Everyone is going to click “X” if you are offering a 5% discount when the average order value is $50 or less. That’s a $2.50 discount.

However, if you offer up to a 20% discount, like what Tipsy Elves is doing, a 20% discount on a $50 item is $10 off—much more enticing!

2. AutoAnything's discount offer lightbox popup

Not all businesses need to gamify their discounts. AutoAnything is a good example of this. They use a lightbox popup to draw attention to their “hottest deals.”

Lightbox Popup Examples: AutoAnything
See full example

The company further incentivizes people to sign up for an email list by offering 15% off their first order. (Again, this is a meaningful discount amount!)

There's also a big, blue CTA button with the text, "claim my savings” that stands out and is benefit-oriented—much more enticing than a simple "subscribe" button.

They make this offer even more compelling by offering a guarantee in the form of,  “Find it at a lower price after you purchase. We’ll refund the difference.”

You can also tell that this company knows its numbers because they include an order minimum. By including the 15% off for orders over $99, this ensures that the math checks out.

SEE MORE: How to Craft Compelling (& Profitable) Offers That Your Website Visitors Can’t Resist

3. Edible Arrangements' Mother’s Day lightbox popup

On the surface, this Edible Arrangements lightbox popup looks like just another popup offering a 15% discount. 

However, we browsed this site the week before Mother’s Day in the US. And this specific popup is only showing up on their Mother’s Day campaign landing pages:

Lightbox Popup Examples: Edible Arrangements
See full example

The copy and design aren’t Mother’s Day specific. In fact, I suspect they recycle this popup for other key dates, events, and holidays.

But, it still works well given the context of where and when it is displayed on the website. 

4. Yeti's free shipping lightbox popup example

Discounts are the most popular lightbox popups. However, if overused (or used incorrectly) they can also cheapen your brand and subconsciously train your customers to only buy when they see a discount.

A free shipping lightbox popup, like what Yeti is using, can be an effective alternative option:

Lightbox Popup Examples: Yeti
See full example

For starters, Yeti’s free shipping popup is on-brand and well-designed. It’s an outdoorsy brand, and it is reflected in everything from the popup background to the copy being used.

The CTA is also simple. They aren’t trying to trick you or use passive-aggressive copy to coerce you to do something.

Instead, they are simply asking if you want free shipping, and then you just need to click yes or no.

The next step collects a zip code to verify that free shipping is available as well as an email address to capture leads:

Yeti lightbox popup step 2

5. Tradlands' product launch lightbox popup

Tradlands, a women’s fashion boutique, is using this lightbox popup to draw attention to its new product line:

Lightbox Popup Examples: Tradlands
See full example

It's a simple but effective product launch popup. No discounts, free shipping, or other monetary incentives are needed.  

The copy and design are minimalistic, yet effective. The headline reads, “Mini Capsule Launch.”

They also include a photo of a model wearing one of the brand's new looks.

Then, the CTA button is “Add to your Capsule,” which references back to the product launch.

PRO TIP:

With ConvertFlow, you can target product launch popups to people who have either already bought from you or are already on your list. This allows you to promote new product lines to only returning contacts, while capturing new visitors as leads and subscribers:

Targeting example

Learn more about targeting in ConvertFlow

6. Sprout Social's free trial lightbox popup example

This lightbox popup example from SproutSocial is interesting for a variety of reasons. For starters, it is from a SaaS company, not ecommerce.  

It also goes against some of the design principles when you think about lightbox popups. Most of these popups are front and center, whereas this example is on the left-hand side:

Lightbox Popup Examples: Sprout Social
See full example

It also takes up more screen real estate and is more text-heavy than many of the other examples we shared. 

Their offer is to start a free trial.  They use a longer subhead/description to convey the benefits of trying out their software. Then, they have a big, green CTA button with the text, “Start your free trial,” to further incentivize people to take action.

It's a great example of why you should use best practice principles as a guiding light, but also test your own ideas to see what works on your site and with your audience 💪

Lightbox popup templates

Ready to create your own lightbox popup? ConvertFlow makes this process simple.

In fact, you can choose from hundreds of pre-built popup templates or create your own design from scratch. You can also select from a range of trigger options (exit-intent, time-delay, scroll-point, etc.) and set up targeting conditions to control when and where it displays.

Here are some templates you can start using right now:

About the author

Jessica Malnik

Contributor, ConvertFlow
home icontwitter iconlinkedin icon

Jessica is a copywriter and content strategist with over 10 years' experience in SaaS marketing. Her work has appeared on industry-leading websites like Social Media Examiner, SEMRush, CMX, The Next Web, Databox, Help Scout, Convince & Convert, and more. When she's not writing something epic, you'll usually find her watching Master Chef or schooling people on 90s pop culture trivia.