Popup

Don't know where to start with your Popup section? Just follow the steps in this guide to bring it up:

STEP 1: Add the Popup section to the Overlay Group.

STEP 2: Edit the Heading block with your main message.

STEP 3: Click on the Text block and enter the supporting details (Enter a working code into Coupon code to show a copiable discount code).

STEP 4: Click on the Button block and add a link to your desired page

STEP 5: Back to the Popup section setting panel, find the Popup triggers setting group and set your go-to Trigger intent type.

STEP 6: Still in the Popup section setting panel, scroll up to the Image setting and assign an image. (To change the image position on desktop, use the Content position setting.)

STEP 7: Click “Save” when done.

STEP 1: Add the Popup section.

STEP 2: In the Heading block, enter a compelling headline about newsletter benefits

STEP 3: Click “Add block” under the Popup section, and add the Email form block for subscription collection.

STEP 4: (Optional) Add Social Icons block to encourage social media following.

STEP 5: Back to the Popup section setting panel, find the Popup triggers setting group and set your go-to Trigger intent type.

STEP 6: Still in the section setting panel, find the Display rules setting group, and turn on "Show for guests only" to avoid showing to existing customers.

STEP 7: Click “Save” when done.

STEP 1: Add the Popup section.

STEP 2: Add the textual content:

• In the Heading block, enter the sale announcement (e.g., "Flash Sale - 50% Off!")
• In the Text block, enter the description, if needed, and enter a Coupon code (make sure the code works in your admin).

STEP 3: Click “Add block” under the Popup section, and add the Countdown timer block.

STEP 4: Set up the countdown timer block:

• Choose the Countdown timer to be Standard timer.
• Choose the correct Time zone.
• Set the exact Start date (enter a future time if you want to schedule your popup for later; otherwise, it will go live now).
• Set the exact End date (must be a future date)

👉 For details about how to schedule the pop-up, read the use case below.

STEP 5: Add a Button block linking to the sale collection

STEP 6: Back to the Popup section setting panel, find the Popup triggers setting group and set your go-to Trigger intent type.

STEP 7: Click “Save” when done.

Want to show a countdown timer that always looks urgent, no matter when visitors land on your store? An evergreen countdown timer is your best choice.

STEP 1: Add the Popup section.

STEP 2: Add the textual content:

• In the Heading block, enter the sale announcement (e.g., "Flash Sale - 50% Off!")
• In the Text block, enter the description, if needed, and enter a Coupon code (make sure the code works in your admin).
• In the Button block, enter the label and link.

STEP 3: Click “Add block” under the Popup section, and add the Countdown timer block.

STEP 4: Select Evergreen timer as the Countdown type - and make sure to set the right Time zone.

STEP 5: Set Duration (per loop) with the Unit (e.g., 2 days) to set the amount of time until the countdown restarts.

STEP 6: Configure Start date for when the timer should begin (requires "Enable schedule” in Popup section settings)

👉 For details about how to schedule the pop-up, read the use case below.

STEP 7: Set the End date to automatically hide the pop-up when your actual promotion ends

STEP 8: Back to the Popup section setting panel, find the Popup triggers setting group and set your go-to Trigger intent type.

STEP 9: Click “Save” when done.

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.

STEP 1: In the Popup setting panel, scroll down and find the Minimal popup setting group.

STEP 2: Toggle on "Enable on desktop" and/or "Enable on mobile" for minimal style

STEP 3: Set Title and Subtitle for each minimal popup preview

STEP 4: (Optional) Set the Default style on desktop and Default style on mobile to be Full style or Minimal style.

STEP 5: Set up the minimal popup’s position (bottom left/right) in Theme Settings > Design > Popup > Minimal popup position.

STEP 6: Click “Save” when done.

You are in preparation state for a big sales day and don’t want your pop-up to show up now, let’s schedule it:

STEP 1: In the Popup setting panel, scroll down and find the Display rules setting group.

STEP 2: Toggle on "Enable schedule”.

STEP 3: Click “Add block” under the Popup section, and add the Countdown timer block.

STEP 4: Select the right Time zone and set up the Start date to be a future date.

STEP 5: Click “Save” when done.

STEP 1: Access the Popup Trigger Settings

• Under the Overlay setting group > click on the Popup section.
• You will see the Popup triggers setting section inside the section setting panel.

STEP 2: Set up the Trigger Intent

Find the Trigger intent setting and select how the popup should be triggered from the dropdown menu.

• Delay – The popup appears after a set number of seconds.
• Scroll – The popup appears when users scroll down a certain percentage of the page.
• Exit – 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).
• Copy to Clipboard – The popup appears when a user copies specific elements on the site, such as a discount code or other selected text.

STEP 2.1: Set the Delay (For Delay Trigger)

If you choose Delay in step 2, adjust the Delay slider to set how many seconds the popup waits before appearing.

STEP 2.2: Set the Scroll Height (For Scroll Trigger)

If you choose Scroll in step 2, use the Scroll height slider to define how far down the page (as a percentage of screen height) users must scroll before the popup appears.

STEP 3: Click “Save” to apply the changes.

✍️ To display pop-ups on All Pages:

Adding the Popup section to the Overlay group will show the popup on any page on the site (all pages except the Checkout page):

✍️ To display pop-ups on Specific Pages:

Navigate to that specific page template using the dropdown menu on the top bar. Then add the Popup Section to the Template group of that page: