The Overlay and Pop-up elements display content above the rest of the page — good for newsletter signups, announcements, age gates, or promotional offers. An overlay covers the viewport with a backdrop and centers its content like a modal; a pop-up sits in a fixed corner. Both are inserted from the Insert panel and configured in the design panel.
Add an overlay or pop-up
Open the Insert panel from the left sidebar.
If the panel is showing templates, click Switch to elements.
Open the Advanced category and expand Interactive.
Choose Overlay for a centered modal or Pop-up for a corner card.
These presets sit at the layout root and can't be nested inside other containers. After inserting, check the Layouts & layers panel to confirm the element sits at the top level of your layout.
Configure when it appears
Select the overlay or pop-up container and open its Trigger settings. Under Open, choose:
Page load — shows after the page loads. Set a Delay in milliseconds if you want visitors to browse briefly first.
On scroll — shows after the visitor scrolls past an Offset in pixels from the top.
The Repeat option controls whether it shows again on return visits:
Yes — it can appear again when someone refreshes or revisits.
No — once dismissed, it stays hidden.
Overlay vs pop-up behavior
The Page setting controls how the element affects the page underneath:
Blocked — prevents interaction with the page behind the element until it's closed. This is the overlay default, which suits a modal.
Scroll — leaves the rest of the page usable. This is the pop-up default, so shoppers can keep scrolling.
Both presets include a close button by default. Style it in the Layouts & layers panel under the element's children.
Open an overlay from another element
You aren't limited to automatic triggers — any button or link can open an overlay when clicked:
Insert and configure your overlay, and give it a recognizable name in the layer tree.
Select the button or link that should open it.
On the Interactions tab, add an action and choose Toggle overlay.
Pick the overlay you want to target.
This works well for "Size guide" or "Shipping info" buttons that should open a modal only when clicked, not on page load.
Best practices
Don't stack multiple auto-triggered overlays on one page — one timed pop-up is enough.
Test on mobile: modals should fit the viewport without forcing horizontal scroll.
Keep pop-up content concise; corner cards have less room than full overlays.
Rename your overlay in Layouts & layers (for example, "Newsletter popup") so it's easy to find when wiring up interactions.