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.

tZTHMVUZB0FcLx6 gqBX1 aBtqoBcVQw  GpnxDLrSUE5I NEFcGxHWNQHZ5IsG1JxxJN9E ELGXdgHH0nikyLrv g 1Ht6sJ1jH4iI5qPlYkjOvMRVaRWWuaB REVqtNiSPH7jExalCGxixFMhde IZ zqe1jtOOeLHaz6HXVtOkQ7vq2R 9iRO5xtcRw - Overlay

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. 

PkOtWDDE56oOggev61nIr0Rs9 G0 Tsi1P gDSpIYnaMm79uaHn MT3l45SI3GuIPXBwS5GyFGGc59xVH5HRlUavBwEPzTaBrNBpMILWxBb0Z5az25XMF92AK49EF004WOoO7GzSJlPYeuq36K2D8Mh8JloQXBDIoMUCd9se mN s 60Z3hq5tWSuDOJQA - Overlay

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.

CBmQrGyA3RrnR2rOu4jZCwuYQKffl121WFkCrigfAMTyjS1LvOboOh 5FbMtZF1 I2GJw2mhTVgHfmqnhDcIFMt0Ju4ZXxMVNOziqY1YkQ  VIK92jD13yAL1n1  JzGhnANBuB7UUwaDzUWiRU3QXZ9pVmBX7WpNcO1NqqGlY0OVjHQVyfBZfC3 WvWNA - Overlay

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.

NY TOQ 6kCnMn tLbOcCfc1Y BGh9jNyJ19yq8Yz3dZRkXU8DyR9mPVNocCitHRYgPxOKF1Yo3hTnpyWI6BFTNj7Wpcr8Myb3Lz4FT b9nuLTHkdUSQgJM q5juXf01wYLf1zTLG4H1UkutBXwDKRhoEd1M9vKB6CXcRdRuhf3BTXh9lBeCARN 6ym7rqQ - Overlay

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!

owKNGVldMCPX 1iFEcBInojQOpywYkhRAMX ypMkc 5M0kZbVJ eJNw4O bjBtgeiXMuR g6k3MYrmiYXBp5zIFHK6M4rG8rMpJNhaiE 6hVbZrwwfjKjgaTvtromEeoMorMudAyM2YAadSFaA lbIt8q9v1xusPzEGlwr0dYdoNAgsXZv c1F81P VIBA - Overlay