What is an overlay?

An overlay is a type of website message that covers part of the base content of your website. Overlays are commonly known as popups, but there are actually several different formats they can take.

Overlays are meant to deliver an important message to website visitors. Often, they’re designed to collect emails or display discount offers, but they can also focus your visitors’ attention on surveys, product recommendations, and cart abandonment discounts.

Why use overlays?

Overlay messages can bring a variety of benefits to ecommerce stores. Here are the two main advantages that overlays have over other message types:

1. They capture attention

When ecommerce stores use overlays right, they help people focus on only the vital information (i.e. what they want them to see). Many websites present visitors with lots of CTAs, logos, images, and maybe even a chatbox, which means there are plenty of opportunities for someone to get distracted.

Overlay messages cut through all that noise and deliver just one message, all on its own. That makes it easier for a customer to pay attention to it, consider how much value it offers to them, and then respond to it.

This gives you an opportunity to remove secondary messages on your webpage by moving them to popups. And by featuring just one message on each page, you’ll make the customer experience much more seamless.

2. You get a second chance to convert

Another way to think about overlays is as a “backup” for your primary message. A user might not respond to your website’s main message, but they can still respond to the secondary message contained in an overlay.

For example, users who are early in the customer journey might not be ready to make a purchase, but they’ll likely be willing to sign up for your email newsletter.

Types of overlays

1. Standard popups

Standard popups appear on top of your webpage in the middle (not in a separate browser window). They usually have a small “X” in the top corner that closes the message.

Standard popups are great for delivering secondary messages and collecting names, phone numbers, and emails.

Overlay types: popups

2. Sidemessages

Sidemessages appear on the left or right side of the webpage. They’re more subtle than a popup because a visitor can keep browsing while the sidemessage is active. Sidemessages can be used for product recommendations, email list building, or simply informing your visitors about something. 

Overlay types: sidemessage

3. Sticky bars

Sticky bars are small banners across the top or the bottom of a webpage. They stay visible while the visitor scrolls down the page. This keeps the information they’re displaying at the top of the customer’s mind. They’re excellent at informing visitors about sales, promotions, and free shipping offers.

Overlay types: sticky bar

4. Fullscreen messages

Fullscreen messages cover the entire screen, making them similar to a mini landing page. You should only use fullscreen messages when you have a really great offer or absolutely essential information.

Overlay types: fullscreen

5. Gamification popups

Gamification popups have an interactive component that encourages visitors to play. Lucky wheels and scratch cards give shoppers a chance to win a discount, and people love the chance to have fun while shopping!

Overlay types: gamification