How does it work?
This code tracks a visitor's mouse movements and displays a customizable popup when their mouse behavior suggests they are about to exit your site.
Any Shopify store owner interested in trying some free exit pop code on their site.
Some people who come to our website area not interested in outsourcing their fulfillment. Our GA behavior shows that we have a decent number of bounces. We would still like to network with these people, so I started looking for a non-intrusive way to capture bounces who don't want to outsource but may still want advice or consulting.
I sized up a few Shopify apps from the App Store and found:
- The apps had only basic customization available.
- They had a very narrow focus on offering discounts.
- Their cost-to-benefit ratio did not seem very good.
With this in mind, I set out to create an extensible snippet for adding exit pops to any Shopify store. I quickly discovered the fundamentals behind exit pops were incredibly simple, so I created one for our website and then generalized it into the free code in this article.
If you haven't seen it already, go ahead and move your cursor to the top of your browser window. Unless you've already seen it, the exit pop will be shown to you. If this is the case, go ahead and click below to show it.
- Write your own HTML or use the Shopify HTML/CSS page editor to customize the contents of the popup.
- Use this code in any way you like: change it, distribute it, etc.
- Easily change any of the style elements of the popup itself.
- Limit the popup's intrusiveness: it can display once per visit, once per browser session, or once per visitor.
- Will not function on mobile. Most exit pops do not.
Check out the code below. Installation instructions follow in the next section.
Follow the following instructions or watch the video to learn how to install this snippet into your theme. If you want to test this offline, make sure that you install the code on an unpublished theme.
- Create a new snippet on your theme. Call it whatever you like.
- Paste the code shown above into the snippet and save it.
- Change the snippet's settings to your desired values. If you're not sure what will look good, you can always experiment offline.
- Create a new page (Admin/Online Store/Pages) and call it exit-pop. This name is mandatory in order for the script to work.
- Create the content that you'd like to have displayed in your popup within the page editor, using either the editor tools or coding it manually.
- Add an include tag to the first line of your theme's HTML <body> tag, usually in theme.liquid. Once this is done, the exit pop will be live!