← Back to Projects Shopify Custom Code

Dynamic Exit Intent Popup

Built a custom Shopify exit intent popup that shows promotional messaging when a visitor is about to leave the website.

Shopify Liquid JavaScript HTML CSS
Platform Shopify
Technology Liquid / JavaScript / HTML / CSS
Project Type Exit Intent Popup
01 — THE CHALLENGE

Showing a Message Before Visitors Leave

Some visitors leave the website without completing their purchase. I needed a simple way to show a promotional message before they left the page.

01

The Challenge

The website needed an exit intent message that could appear when a visitor was about to leave. The message also needed to be flexible so the promotional content could be changed when needed.

02

The Solution

I built a custom popup using HTML, CSS, JavaScript, and Shopify Liquid. JavaScript detects the visitor's exit movement and opens the popup with the promotional message.

02 — TECHNICAL IMPLEMENTATION

How It Was Built

The popup was created directly in the Shopify theme so the content and behavior could be controlled with custom code.

  • Created the popup structure using HTML.
  • Added custom CSS for the popup design and responsive layout.
  • Used JavaScript to detect exit intent.
  • Added dynamic promotional content using Shopify Liquid.
  • Added close and interaction controls for the popup.

Tools & Technologies

Shopify Liquid JavaScript HTML CSS
03 — HOW IT WORKS

Popup Flow

The popup only appears when the exit condition is detected.

Visitor Browses Normal page activity
→
Exit Intent Cursor moves to leave
→
JavaScript Detects the action
→
Popup Opens Promotional message
04 — CODE

Exit Intent JavaScript

The JavaScript listens for the visitor's mouse movement and opens the popup when the cursor moves toward the top of the page.

JavaScript 
const popup = document.getElementById("exitPopup");
const closePopup = document.getElementById("closePopup");

let popupShown = false;

document.addEventListener("mouseleave", function(event) {

  if (event.clientY <= 0 && !popupShown) {

    popupShown = true;

    popup.classList.add("show");

  }

});


closePopup.addEventListener("click", function() {

  popup.classList.remove("show");

});

This is a simplified version of the exit intent logic used in the project. The popup content and styling can be changed depending on the campaign.

05 — OUTCOME

More Control Over Exit Messaging

The custom popup gave the website a simple way to show a promotional message when a visitor was about to leave.

Because the popup was built with Shopify Liquid and custom JavaScript, the content and behavior could be changed without rebuilding the whole section.

06 — KEY TAKEAWAYS

What This Project Demonstrates

Shopify

Working directly with a Shopify theme to add custom functionality.

JavaScript

Using JavaScript to detect user actions and control popup behavior.

Liquid

Using Shopify Liquid to display dynamic campaign content.

UX

Creating a simple message to engage visitors before they leave the website.

More Shopify Projects

Explore more of my Shopify development, CRO, Klaviyo, and custom-code projects.

← Back to Projects