What Is an Overlay (Modal)? When a Box Blocks the Page

What Happens When a Modal Opens

A modal has two layers. The box on top holds the content, like a size picker or a signup form. Under it, the backdrop is a see-through dark layer that covers the rest of the page.

While the box is open, the page behind it stops responding and often stops scrolling. A well-built modal closes with an X button or the Esc key, and often with a tap on the dark area. On a keyboard, focus (where the next key press goes) should move into the box, then go back to where it was once the box closes.

Modals in Shopify Themes and Apps

Many Shopify themes use modals. Quick add is a common one. Tap it on a collection page and a box opens with sizes and an Add to cart button. Search and image zoom often do too. Apps add more, like signup forms, discount offers and age checks.

Example: A shopper on her phone opens a collection of 48 hoodies. Five seconds later, a 10%-off signup modal fills the screen, with a tiny X in the top corner. She has to close it before she sees a single hoodie.

At hoodie 20 she taps Quick add, picks Medium and taps Add to cart. The box closes and she's still at hoodie 20. The quick add box saved her a trip to the product page and back. The signup one? It just stood between her and the products.

Invited vs. Uninvited Modals

Modals work best when the shopper asks for one, say by tapping a photo. They keep their spot in a long list. But when one shows up uninvited and blocks the page, it can hurt. On a phone, one that fills the whole screen is an interstitial popup. Every box a shopper has to close adds a little buying friction.

Exit popups are often modals nobody asked for. Read why exit-intent popup overlays are outdated and what to try instead. Our app, Growth Suite, shows its offer details, discounted price and timer on the product page itself. That's called on-page integration.

Not Every Overlay Is a Modal

People use "overlay," "modal" and "pop-up" as if they're one thing. Easy check: can you still use the page behind it? If not, it's modal. A chat bubble or a small corner box floats on top, but the page still works. Loosely, that's a non-modal overlay.

A pop-up window is named for how it appears, while "modal" describes what it does to the page. So a pop-up can be modal or not. A cart drawer that dims the page acts like a modal too.