WhatsApp
Adding a custom popup to your Shopify store will improve customer engagement and allow you to collect essential information, such as email addresses for your newsletter. In this post, we'll guide you through the process of designing and implementing your own custom popup.
Step 1: Create a Snippet File
First, you need to create a new snippet where you will place the code for your popup.
- Log in to your Shopify admin panel.
- Navigate to Online Store > Themes.
- Click on Actions > Edit code.
- Under the Snippets directory, click Add a new snippet and name it my_popup.
Now, paste the following code into the my_popup.liquid file:
<!-- my_popup.liquid -->
<style>
/* Style for the overlay */
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
z-index: 9998; /* Place the overlay behind the popup */
transition: opacity 0.3s ease;
}
/* Style for the popup */
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
padding: 40px;
border: 1px solid #000000;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
z-index: 9999;
overflow: auto;
text-align: center;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.popup.show {
display: block;
opacity: 1;
}
.popup.hide {
opacity: 0;
}
.popup.showing {
transform: translate(-50%, -50%) scale(1.1);
}
.popup.hiding {
transform: translate(-50%, -50%) scale(0.9);
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
@media only screen and (max-width: 767px) {
.popup {
width: 90% !important;
}
}
</style>
<div class="overlay" id="overlay"></div>
<div
class="popup"
id="popup"
style="padding:{{ settings.padding_range }}px; border-radius:{{ settings.border_radius }}px; width:{{ settings.popup_width }}%"
>
<span class="close-btn" onclick="closePopup()">X</span>
<div>
{% if settings.liquid_data %}
{{ settings.liquid_data }}
{% else %}
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required><br>
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required><br>
<button class="button" onclick="submitForm()">Submit</button>
{% endif %}
</div>
</div>
<script>
function displayPopup() {
const getCookies = getCookie('cust_email');
if(getCookies) return;
var popup = document.getElementById("popup");
var overlay = document.getElementById("overlay");
popup.classList.remove("hide");
popup.classList.remove("hiding");
popup.classList.add("showing");
overlay.style.display = "block";
setTimeout(function() {
popup.classList.add("show");
popup.classList.remove("showing");
}, {{ settings.delay_time }}); // Set delay time
}
function showPopupAgain() {
closePopup()
showPopupAgainTimeout = setTimeout(function() {
// Clear Cookie flag so popup can show again
displayPopup(); // Show the popup again after 2 seconds
}, {{ settings.delay_time }} * 1000); // Show popup again after 2 seconds
}
function closePopup() {
var popup = document.getElementById("popup");
var overlay = document.getElementById("overlay");
popup.classList.add("hiding");
popup.classList.remove("show");
overlay.style.display = "none";
setTimeout(function() {
popup.classList.add("hide");
popup.classList.remove("hiding");
}, 300); // 300 milliseconds delay for smoother animation
}
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
console.log(`Cookie set: ${cname}=${cvalue}`);
}
function submitForm() {
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
if (name && email) {
setCookie("cust_email", email, {{settings.popup_validity }});
closePopup(); // Close the popup after submitting
} else {
alert("Please fill in all fields.");
}
}
function getCookie(name) {
// Split cookie string and get all individual name=value pairs in an array
let cookieArr = document.cookie.split(";");
for(let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split("=");
console.log(" let cookiePair = cookieArr[i].split('='');",cookiePair)
/* Removing whitespace at the beginning of the cookie name
and compare it with the given string */
if(name == cookiePair[0].trim()) {
return cookiePair[1];
}
}
// Return null if not found
return null;
}
window.onload = function() {
setTimeout(displayPopup, {{ settings.popup_show_time}} * 1000); // Show popup after 3 seconds
};
document.querySelector('.close-btn').addEventListener('click', function() {
closePopup();
showPopupAgain();
});
</script>
Step 2: Add Settings to schema.settings.json
The next step is to create customized options for your popup. Open your schema.settings.json file and paste the code below:
{
"name": "Custom Popup",
"settings": [
{
"type": "paragraph",
"content": "You can customize this popup"
},
{
"type":"checkbox",
"id":"enable-popup",
"label": "Enable Popup",
"default": false
},
{
"type": "number",
"id": "popup_validity",
"label": "Popup Validity(in days)",
"default": 1,
"info": "Please Enter only positive number"
},
{
"type": "number",
"id": "delay_time",
"label": "Delay time (in second)",
"default": 5,
"info": "Please Enter only positive number"
}
]
}
Step 3: Include the Popup in theme.liquid
To display the popup on your website, you must include it in your theme. Open your theme.liquid file and insert the following code where you want the popup to appear:
{% if settings['enable-popup'] %}
{% render 'my_popup' %}
{% endif %}
Step 4: Customize the Popup Settings
- Click three dots to Open customization
- Click theme settings icon
- And click “Custom Popup” to open popup settings
- Finally enable the popup and customize other settings
Explanation of Settings
- Enable Popup: Check this box to activate the popup on your site.
- Popup Validity: (If included) Determines how long the user's email will be saved in cookies before expiring.
Adding a custom popup to your Shopify store is an excellent method to engage customers and collect email addresses. By following these simple steps, you can develop a popup that not only looks excellent but also functions well. Begin deploying your unique popup today and watch your engagement increase!
