Written by Noah Britton on 03/13/2020

Lightbox in web design

In this article, we are going to explore the different ways in which to use a Lightbox on your website to capture your user’s attention.

Did you just see a popup window showing a downloadable guide?

That’s a lightbox and you can hit refresh on your browser to see it again.

A Lightbox is a type of popup used to emphasize a piece of content including coupons, PDF downloads, new products, surveys, and important announcements. This window appears on the top of your website (as a popup), that blocks and dims the background while disallowing users from interacting with the content in the background while the popup is on the screen. This focuses the attention of the users towards the content of the pop-up.

A Lightbox is superior to normal popups in that the user can click anywhere outside of the popup to close it. This leads to less user frustration and most people are familiar with the style.

While some users find any sort of popups annoying, and many of the web browsers have the ability to block these pop-ups, they can still be effective. If you are going to use any type of popup a Lightbox is your best option.

tee shirt free lightbox

(via https://www.printful.com/blog/40-website-popup-ideas-to-steal-for-your-online-store/)

Are Lightboxes effective?

Sumo, a company that focuses on popup software, has collected more than 23 million emails in the last two years using a lightbox.

After taking more than 1 Billion pop-ups into consideration, we have concluded that the top 10% of the highest performing pop-ups had an average conversion rate of 9.28%. By conversion rate, what we mean is that someone saw a pop-up and then took some action on it. Only three people out of 100 get a pop-up that has an 11% conversion rate. 3.1% is the average conversion rate of all the pop-ups.

See Related: How To Hire A Web Development Company

pie chart of top performing pop ups

(via https://sumo.com/stories/pop-up-statistics)

Using this conversion rate if you have 150 people visiting your website every day, you would have 418 signups per month. If you have this type of turnout from your popups that would put you in the top spot of making the pop-ups but the average of all the pop-ups 3.1 and that is what the majority of the pop-ups have as a conversion rate which doesn’t seem to be much but just remember that more the traffic is on your page, the less conversion rate of the pop-ups will be.

When should I use a Lightbox?

The content of a Lightbox needs to either be of value to the customer otherwise they will probably be annoyed. Think about what is in it for them.

Using a lightbox popup for a newsletter signup, unless coupled with a discount or valuable piece of information isn’t going to cut it anymore.


winter sale 40% off shop now lightbox

(via https://naldzgraphics.net/pop-up-designs/)

If you have a sitewide coupon you’d like to offer on a limited basis a lightbox is a solid option. We’ve all browsed a website and see the get 20% off in exchange for email? We’ve certainly been guilty of it. 

 Depending on the flexibility of your system you can only apply a lightbox to new users, or someone that has been on your website for 30 seconds, or after a user has visited 4 different product pages.

Product Announcement:

new product lightbox showcasing new collection

(via https://naldzgraphics.net/pop-up-designs/)

If you are launching a new product that you are positive your visitors want to see, you can use a lightbox. This is a great way to promote your new product and you can combine the popup with the announcement of a limited time sale.

Informational Guide:

Creating an informational guide or downloadable infographics a great method to position your company as an authority in your field and expert in a subject. Using a lightbox to showcase this guide can be effective especially when the page the user is on is connected to the guide. For example, we write a guide on The 5 Steps To A Winning Website Project. Hit refresh on your browser and you’ll see it again.

Cookie Policy:

cookie policy lightbox

(Via https://pk.godaddy.com/help/add-cookie-and-tracking-alert-to-my-website-27806)

Most of the websites that you open prompt you to accept cookies. Your online activity on the website is tracked by cookies in order to save your preferences and history of interacting with that website. For example, when you fill out your name and email these can be stored in cookies to use that information at a later date.

A lightbox can be used to have users opt-in to your cookie policy which I’m sure you’ve seen many times before.

Recover Lost User:

why are you leaving pop up

(via https://getsitecontrol.com/p/kql71p6z)

If you are about to lose your visitor on your website and a lightbox can be a last-ditch effort. As soon as you try to leave the website, a new popup can appear to prompt people to stay on the website. You can also have a small survey to find out why they are leaving.

save 25 percent lightbox coupon

(via https://getsitecontrol.com/blog/exit-popups/)

Also, during placing order on your website, some of your visitors will change their minds and attempt to leave, many times to research lower prices. You can use a popup to entice users to purchase your product with a discount or to show similar items of a lower budget. This is also called an Abandon Cart Lightbox.

Activity Reminder:

reminder lightbox

(via https://getsitecontrol.com/p/mqkk3dq1)

Sometimes your users will visit your website but not take further action. They’ll scroll for a little while but then go somewhere else or get distracted. You can remind people of the website and by putting a lightbox warning the user of inactivity that will get the consumers’ attention. These are often found on banking or other transactional websites. Some pop-ups offer some kind of offer or tell the user about the existing offer to get the attention of the user.



A Lightbox is a type of popup used to draw attention to coupons, PDF downloads, sitewide sales, and important announcements.

This blog post when you refresh it will show you an example of a lightbox in action.

Remember, use popups sparingly and only when you are adding something valuable to the user.

Thrive Design is a customer-centric web design company from Seattle. Contact us today to find out how we can elevate your business online! Find us on Clutch, UpCity, LinkedIn, Facebook, Twitter, Instagram, and Pinterest.



Noah Britton

Noah Britton is the founder of Thrive with 18 years of experience in the web industry and 10 years with WordPress.