Popup exit-intent appears when a visitor is about to leave the site, attempting to retain them. Their primary goal is to prevent site abandonment by presenting last-minute offers, discounts, or valuable content.
Note:
This section features two main popup types: Standard Popups (Only) and Exit-Intent Popups. You can set up any type of popup using Popup exit-intent section.
- Standard Popups: These appear based on predefined rules, such as time spent on the page, scroll depth, or clicks, to capture attention during browsing. They serve various purposes, including promoting deals, collecting email addresses, and displaying announcements, all aimed at engaging users within their active session.
- Exit-Intent Popups: These appear when a visitor is about to leave the site, attempting to retain them. Their primary goal is to prevent site abandonment by presenting last-minute offers, discounts, or valuable content.
1. Section Components
| Section | Popup Exit-intent |
Display a customizable overlay window when a visitor is about to leave the site. |
|---|---|---|
| Available blocks | Heading | Add a heading and subheading to the popup. |
| Text | Add supporting text content to the popup. | |
| Email form | Add an email form to collect subscribers and build an email list. | |
| Thank you page | Display thank you message with a coupon code after form submission. |
2. Location & Setup
To add & set up the Popup Exit-intent section:
- Open the Shopify Theme Editor (Online Store > Themes > Customize).
- Decide where you want to place the new section. You can place it at Footer or Overlay to make the section display on all pages.
- Click "Add Section".
- Select "OT: Popup Exit-intent (#number of variant)".
3. Highlight Features
- Flexible display rules: Control when, where, and how often the popup appears - show only to guests, add delay, or set reappear intervals.
- Minimal popup mode: Offer a subtle version of your popup that stays pinned in the corner.
- Customizable content blocks: Mix and match various blocks to create a popup that fits your preferences.
4. Common Use Cases
🤔 How to set up a basic Popup Exit-intent?
STEP 1: Add the section
Add Popup Exit-intent section to your desired position.
STEP 2: Add & customize Heading block
Edit the Heading block with your main message.
STEP 3: Add & customize Text block
Click on the Text block and enter the supporting details.
STEP 4: Add an image to the Popup
Open the Popup Exit-intent section setting panel, find the Image setting and assign an image. (To change the image position on desktop and mobile, use the Desktop/Mobile content position setting.)
STEP 5: Click "Save".
🤔 How to set up a newsletter Popup Exit-intent?
STEP 1: Add the section
Add Popup Exit-intent section to your desired position.
STEP 2: Add & customize Heading block
In the Heading block, enter a compelling headline about newsletter benefits
STEP 3: Add & customize Text block
Click on the Text block and enter the supporting details.
STEP 4: Add an Email form block
Add the Email form block for subscription collection. Choose Subscribe button style.
STEP 5: Add a Thank you page block
The Thank you page block is only shown when the popup has contained an email form and the form is successfully submitted.
- Enter a short thank you message at Heading.
- Enter a short promotional Text. (Include coupon_code in the text to show coupon code within the text box.)
- Paste your Coupon code.
- Enable to Show continue shopping button. Enter the text shown on the button and paste button navigation link.
STEP 6: Click "Save".
🤔 How to set up the Popup's exit-intent display rules?
Exit-intent rules and triggers determine how the popup appears when the user is about to leave the page. (The exit intention will be detected when the mouse is moving toward the browser’s navigation bar). Here's how to set up:
STEP 1: Open the settings
Click on the Popup section to open its settings panel. Scroll to Display rules settings group.
STEP 2: Enable popup display when customers leave
- (Default) Toggle Enable Exit Intent PopUp to activate the feature.
The popup will appear when desktop visitors move their cursor toward the top of the screen—usually to close the tab or window.
- Enable Show for guests only to show only for non-logged-in visitors. This is useful for collecting new leads or offering first-time visitor promotions.
- Toggle Show on mobile to enable the popup on mobile devices.
- Set the time Delay (in seconds) before the popup appears.
- Define Reappear after - how many days before the popup reappears for the same visitor.
STEP 3: Click "Save"
🤔 How to set up the Minimal popup?
Don't worry about users closing the pop-up! Our minimal design keeps it sticky in the corner, so it's always there if they want to re-open the full view without taking up much space.
Here's how to set up:
STEP 1: Open the settings
Click on the Popup Exit-intent section to open its settings panel. Find Minimal Popup settings group.
STEP 2: Set up the minimal popup
- Toggle on "Enable on desktop" and/or "Enable on mobile" for minimal style.
- Set Title and Subtitle for each minimal popup preview
- Set the Default style on desktop and Default style on mobile to be Full style or Minimal style.
- Choose Minimal popup position.
STEP 3: Click "Save"
🤔 How to set up the Popup Exit-intent's look?
Here's how to set up the Popup Exit-intent's look:
STEP 1: Open the settings
Click on the Popup Exit-intent section to open its settings panel.
STEP 2: Choose popup position
Choose where popup displays at Popup position.
STEP 3: Choose content position & alignment
Choose content position and alignment on desktop and mobile devices.
STEP 4: Choose section border and customize button
- Choose section border at Edges.
- Select Button style and animation when hovered.
STEP 5: Choose color for section elements
At Colors settings group, choose color for heading, subheading, background, button...
STEP 5: Click "Save"
5. Layout Recommendations
The Popup Exit-intent section has 3 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us!
📂 Popup Exit-intent #1
Check out demo here.
📂 Popup Exit-intent #2
Check out demo here.
📂 Popup Exit-intent #3
Check out demo here.
6. Support Information
Need help? Contact our support team at Omni Themes Support .
