Popup section with exit-intent, delay, scroll, or click triggers, and cookie options.
Popup
The Popup section displays a modal window triggered by different events: page exit (exit-intent), delay, scroll, or click on an element. Designed to be non-intrusive, it follows UX best practices with an elegant design and smart cookie management.
Trigger Modes
| Mode | Description | Ideal for |
|---|---|---|
| Exit Intent | Detects mouse movement toward the browser close button | Retention, last-chance offer |
| Delay | Displays after X seconds on the page | Newsletter, announcements |
| Scroll | Displays after X% scroll | Contextual content, engagement |
| Manual | Triggered by a click on a button/link | Targeted offers, custom CTA |
ℹ️The Exit Intent mode only works on desktop (mouse movement detection). On mobile, it is automatically replaced by the Delay mode as a fallback.
Main Settings
Trigger
| Setting | Description | Options |
|---|---|---|
| Mode | Trigger type | Exit Intent / Delay / Scroll / Manual |
| Delay | Seconds before display (Delay mode) | 1-60s |
| Scroll % | Scroll percentage (Scroll mode) | 10-90% |
| CSS selector | Trigger element (Manual mode) | Text (e.g., .popup-trigger) |
Cookie & Frequency
| Setting | Description | Options |
|---|---|---|
| Cookie duration | Time before re-display | 1 day / 7 days / 30 days / Session |
| Cookie on close | Do not show again if closed by user | On / Off |
| Cookie on conversion | Do not show again after submission | On / Off |
| Disable on mobile | Do not display on mobile | On / Off |
Appearance
| Setting | Description | Options |
|---|---|---|
| Position | Modal position | Center / Bottom-left / Bottom-right |
| Size | Popup size | Small / Medium / Large |
| Image | Image in the popup | Image picker |
| Image position | Image side | Left / Right / Top |
| Overlay | Dark background behind the popup | On / Off |
| Animation | Entry animation | Fade / Slide-up / Scale / None |
| Close button | X button style | Icon / Text / Both |
Form (optional)
| Setting | Description | Options |
|---|---|---|
| Enable form | Include an email form | On / Off |
| Phone field | Add phone field | On / Off |
| Success message | Text after submission | Text |
Available Blocks
| Block | Description |
|---|---|
| Heading | Popup title |
| Subheading | Subtitle |
| Text | Message body |
| Button | CTA button |
| Timer | Urgency countdown |
| Image | Additional image |
| Custom Liquid | Custom code |
Use Cases
Newsletter Popup (exit-intent)
- Exit Intent mode
- Product image on the left
- Heading: "-10% on your first order"
- Email form enabled
- Cookie: 7 days
- Cookie on conversion enabled
- Medium size, Scale animation
Promotional Announcement (delay)
- Delay mode, 5 seconds
- No form
- Heading + Text + Button "View offers"
- Urgency timer
- Cookie: 1 day
- Disabled on mobile
- Center position
Cookie Consent / Legal Notice
- Delay mode, 1 second
- Bottom-left position
- Small size
- No overlay
- Text + Button "Accept"
- Cookie: 30 days
- Slide-up animation
Contextual Offer (scroll)
- Scroll mode, 50%
- The visitor has shown interest (scrolled)
- Heading: "Special offer for you"
- Button to the sale collection
- Cookie: 7 days
- Small size, Bottom-right position
💡The Exit Intent mode is the most effective for conversion as it intercepts the visitor when they are about to leave. Combined with an attractive offer (-10%, free shipping), it can recover 5-15% of visitors about to leave.
⚠️Respect the user experience: do not display a popup immediately on page load. A minimum delay of 5-10 seconds (or exit-intent) is recommended. Google penalizes intrusive popups on mobile, hence the mobile disable option.
ℹ️The cookie system is smart: if the visitor has already submitted the form (cookie on conversion), the popup will not reappear, even if the cookie duration has not expired. This prevents annoying customers who are already subscribed.