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.
Audience
Any Shopify store owner interested in trying some free exit pop code on their site.
Motivation
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.
Example
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.
Features
- 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.
The code
Check out the code below. Installation instructions follow in the next section.
<!-- General customizations -->
{% assign when_to_pop = "once_per_visitor" %}
<!-- Available settings for the above variable:
"once_per_visitor" : Popup is only shown to each visitor once, ever.
"once_per_visit" : Popup is shown to each visitor once. After they close their browser
and revisit your page, they will see it again.
"every_time" : Popup is shown 100% of the time.
-->
{% assign popup_offset_from_left = "33" %}
{% assign popup_offset_from_top = "10" %}
<!-- Sets the horizontal and vertical position of the popup.
For those of you who are OCD about layout symmetry, this is an important setting! -->
<!-- Style customizations -->
{% assign popup_background_color = "rgba(240,240,240,1.0)" %}
<!-- The background color of the popup -->
{% assign popup_border_color = "rgba(250,250,250,0.3)" %}
<!-- The border color of the popup -->
{% assign exit_button_message = "Close this window" %}
<!-- The message displayed in the exit button -->
{% assign exit_button_color = "#d8232f" %}
<!-- The background color of the exit button -->
{% assign exit_button_text_color = "#fff" %}
<!-- The color of the message in the exit button -->
{% assign exit_button_hover_color = "#666" %}
<!-- The color of the exit button when the user hovers over it -->
<style type="text/css">
#exit_button {
background-color: {{ exit_button_color }};
color: {{ exit_button_text_color }};
}
#exit_button:hover {
background-color: {{ exit_button_hover_color }};
}
#exit_pop {
display:none;
position:fixed;
z-index:9;
margin-top:10%;
margin-left:33%;
border-radius:5px;
border: 4px groove {{ popup_border_color }};
background-color:{{ popup_background_color }};
padding:25px;
}
.text-center { text-align:center!important; }
</style>
<script type="text/javascript">
function closepop(){
$('#exit_pop').fadeOut("fast");
localStorage.setItem('popped_local','true');
sessionStorage.setItem('popped_session','true');
}
var addEvent = function(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
}
};
addEvent(document, "mouseout", function(event) {
event = event ? event : window.event;
var from = event.relatedTarget || event.toElement;
if ( (!from || from.nodeName == "HTML") && event.clientY <= 100 ) {
{% if when_to_pop == "once_per_visitor" %}
if (localStorage.getItem('popped_local') != 'true'){
$('#exit_pop').fadeIn("fast");
}
{% elsif when_to_pop == "once_per_visit" %}
if (sessionStorage.getItem('popped_session') != 'true'){
$('#exit_pop').fadeIn("fast");
}
{% elsif when_to_pop == "every_time" %}
$('#exit_pop').fadeIn("fast");
{% endif %}
}
});
</script>
<div class="text-center" id="exit_pop">
{{ pages["exit-pop"].content }}
<a onclick="closepop()"><div id="exit_button" style="padding:5px;">Close this window</div></a>
</div>
Installation
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!
