With Instant, you can create overlays and pop-ups without the need for any additional applications. Perfect for discount popups, size charts, galleries, and more.
Overview
Overlays and pop-ups allow you to display content on top of your page, triggered by user actions or page events. Build fully customized modal experiences that match your brand.
Common Use Cases
Use Case | Description |
Discount popups | Capture email addresses with special offers |
Size charts | Help customers find the right fit |
Image galleries | Display enlarged product images |
Announcements | Share important information |
Quick view | Show product details without leaving the page |
Inserting an Overlay or Pop-up
Step 1: Access the Insert Panel
Navigate to Insert panel → Interactive. Here you'll find the basic pop-up and overlay elements.
Step 2: Customize Your Overlay
Your overlay or pop-up will be visible within the Layers panel. Select this layer to trigger the overlay, allowing you to fully customize its appearance and content.
Triggering an Overlay or Pop-up
There are three methods available for triggering an overlay or pop-up.
Method 1: Trigger Through a Click Action
Add an overlay trigger to elements such as buttons, text, or images.
Select your button element (or other clickable element)
Navigate to the Actions panel
Click Add action
Select Trigger Overlay
Choose the overlay you wish to trigger
Method 2: On Page Load or Scroll
Overlays and pop-ups can also be triggered automatically when a page loads or when the user scrolls.
Select the overlay or pop-up layer
In the right sidebar, locate Overlay settings
Configure the trigger:
On load — Triggers when the page loads
On scroll — Triggers when the user scrolls to a certain point
Repeat Setting
The Repeat toggle defines whether the pop-up will be shown again after the user closes it.
Setting | Behavior |
Repeat On | Pop-up shows every time the trigger conditions are met |
Repeat Off | Pop-up only shows once per session |
Enabling or Disabling Page Scroll
Control whether users can scroll the page while the overlay or pop-up is active.
How to Block Page Scroll
Select your overlay or pop-up layer
In the right sidebar, locate the Page setting
Set to Blocked to disable scrolling when the overlay is active
Setting | Behavior |
Blocked | Page scroll disabled while overlay is open |
Default | Page scroll remains enabled |
Quick Reference
Task | Action |
Insert overlay | Insert panel → Interactive → Overlay or Pop-up |
Edit overlay | Select overlay layer in Layers panel |
Add click trigger | Select element → Actions → Add action → Trigger Overlay |
Set load/scroll trigger | Select overlay → Overlay settings |
Configure repeat | Overlay settings → Repeat toggle |
Block page scroll | Select overlay → Page → Blocked |
Trigger Methods Comparison
Trigger | Best For |
Click action | Size charts, galleries, quick view |
Page load | Welcome messages, discount offers |
Scroll | Exit intent, engagement prompts |