User Guide

Search limit to:






Popup #1 - #2

Popup section provides an effective way to capture user attention and convey important messages or promotions through customizable overlay windows.

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 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 Create customizable overlay windows for promotions, newsletters, and user engagement.
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 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 (#number of variant)".

3. Highlight Features

  • Flexible triggers & rules: Set detailed appearance rules, including delay time, scroll depth, exit intent, and reappearance interval to target users at the right moment.
  • Minimal popup mode: Keep your popup visible with the minimal sticky corner design, allowing users to reopen the full popup anytime.
  • Performance tracking: Integrate Google Analytics events to monitor popup interactions, conversions, and user engagement.

4. Common Use Cases

🤔 How to set up a basic Popup?

STEP 1: Add the section

Add Popup 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 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?

    STEP 1: Add the section

    Add Popup 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.

    In the Thank you page block settings panel:
    • 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 display rules?

      Here's how to set up the Popup's rules and triggers:

      STEP 1: Open the settings

      Click on the Popup section to open its settings panel. Scroll to Display rules settings group.

      STEP 2: Set up general display rules & triggers

      • 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.
      • Set Trigger rules:
        • Delay x second: Show the popup after a certain number of seconds on page load. Set the time Delay (in seconds) before the popup appears.
        • Scroll down: Show the popup when users scroll down a defined percentage of the page. At Scroll page down, choose how far a visitor must scroll (in %) before the popup triggers.
      • Define Reappear after - how many days before the popup reappears for the same visitor.
      • Toggle Show on mobile to enable the popup on mobile devices.

      STEP 4: Click "Save"

      🤔 How to set up the Popup's exit-intent rules & triggers?

      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

      • 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.

      • At Exit-intent Rules & Triggers > Trigger campaign, you can choose how often the popup appears for each visitor:
        • Always: The popup shows every time the exit intent is detected.
        • Once per session: The popup appears only once during a browsing session.
        • Once per X days: Set the popup to reappear after a specific number of days. Then enter X days.

      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 section to open its settings panel. Find General 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.
      • If you want to track popup interactions, enter the Google Analytics event name.

      STEP 3: Click "Save"

      🤔 How to set up the Popup's look?

      Here's how to set up the Popup's look:

      STEP 1: Open the settings

      Click on the Popup 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 section has 2 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us!

      📂 Popup #1

      Check out demo here.

      📂 Popup #2

      Check out demo here.

      6. Support Information

      Need help? Contact our support team at Omni Themes Support .