SwissUpLabs Logo

Newsletter Popup


General Settings

To create popup with newsletter form, create a new Lightbox banner with following values:

Field Value
Enabled Yes
Type Lightbox
Url Any dummy text (We will not use it)
Css Class no-border permanent-close-hide
Mode HTML Content

Additionally, you can add some animation to the lightbox popup. Top do that, use one of the following css classes:

  • slide-up
  • slide-down
  • slide-left
  • slide-right
  • zoom-in
  • zoom-out

You can read more about CSS classes at the separate page.

HTML Content:

<div class="easybanner-layout-book">
    <img src="{{media url='wysiwyg/samsung.png'}}" alt="" />
    <div class="content center">
        <h2 class="easybanner-title"><strong>Don't miss out!</strong></h2>
            Sign up for our newsletter to get the latest news about our company,
            your favorite products, and great deals.
        <div class="easybanner-newsletter">
            {{block class="Magento\Newsletter\Block\Subscribe" name="easybanner.newsletter-subscribe" template="Magento_Newsletter::subscribe.phtml"}}


Now, let’s make the banner appear on exit-intent event only.

Exit-intent condition is supported since version 1.5.0.

Switch to Conditions tab and add the following conditions:

Condition Value Comment
Exit intent time (seconds) greater than 0 Show popup as soon as client’s cursor moves out of the page.
Display Count per Customer (Per Day) less than 1 Optional.

Save the banner and check your store frontend.

p.s. Since mobile devices doesn’t have a cursor, we can’t detect when client wants to leave the site using the same checks. That’s why we will show exit-intent banner when mobile customer scrolls up the page to reveal browser toolbar.

Next up

Edit this Page