Click here to view our example store
Before we get into this guide, unlike other guides, you will need to understand a bit of coding in order to implement this popup on your Shopify store. This can be implemented anywhere on your Shopify site, and you will need to understand where you want to put it, in order to display the popup on your store.
This popup can be used to show any sort of information you want your customer to read. Let’s get into it.
Create a New Page
In order to display the the content within the popup, we will retrieve the content from the page you create. The handle of the page will be used within the HTML code. In the example below, we created a page called Popup Content and the page handle is popup-content. Save the handle information for the next part of the tutorial

Add The HTML Code
Now, this is where you need to understand a bit of coding and your theme layout. The popup works on clickable text, so you will need to find where you want to place it. An examples is having a disclaimer on your product page, relating to shipping, delays, or any such information you want your customers to click on and read.
Go to your Shopify theme code editor, find where you want the clickable text to be, paste the below code. Remember to change the text where specified and also change the handle where specified.
<div class="popup-btn">
<!-- Change the text below to what you need it to be -->
<span>ADD WHAT YOU WANT THE CLICKABLE TEXT TO BE</span>
</div>
<div class="popup-overlay">
<div class="popup">
<!-- Put your page handle between the 'page.' and '.content' -->
{{ pages.put-your-page-handle-here.content }}
<span class="popup-close"></span>
</div>
<!-- Coded by jotting.com -->
{{ 'popup.js' | asset_url | script_tag }}
</div>
Add The Javascript Code
Scroll down to the Asset folder and create a .js file and name it popup. Within the newly created popup.js, input the below code.
document.querySelector(".popup-btn").addEventListener('click', function (e) {
e.stopPropagation();
document.querySelector(".popup").style.display = 'block';
}, false);
document.querySelector(".popup-btn").addEventListener('click', function () {
document.querySelector(".popup-overlay").style.display = 'block';
}, false);
document.querySelector(".popup-close").addEventListener('click', function () {
document.querySelector(".popup").style.display = 'none';
document.querySelector(".popup-overlay").style.display = 'none';
}, false);
document.querySelector("body").addEventListener('click', function () {
document.querySelector(".popup").style.display = 'none';
document.querySelector(".popup-overlay").style.display = 'none';
}, false);
document.querySelector(".popup").addEventListener('click', function (e) {
e.stopPropagation();
}, false);
Add Code in Theme.css
Lastly, go to your main css file, in this case we are using the Dawn theme, so the main css file is base.css, at the end of the file paste the below code.
.popup {
background-color: #fff;
border-radius: 8px;
padding: 50px 30px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 3px;
position: absolute;
z-index: 25;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 450px !important;
display: none;
width: 95%;
}
@media only screen and (max-width: 767px) {
.popup {
padding: 35px 15px;
}
}
.popup-close:after {
width: 30px;
content: '╳';
position: fixed;
right: 10px;
top: 10px;
font-size: 20px;
line-height: 30px;
cursor: pointer;
}
.popup-btn {
cursor: pointer;
}
.popup-overlay {
position: fixed;
height: 100%;
width: 100% !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
display: none;
z-index: 100;
}
And you’re done! The final step is to add content to the page you created in the first step, for the content to display in your popup.

One Reply to How To Create a Popup on Shopify
Hello, how would I go about if I wanted to add a pop up for email sign up right when you enter the site?
How to Create a Product Image Slider on Dawn Theme
How To Create A Sticky Add To Cart On Shopify
How to Create a Featured Product Slider on Shopfiy
How To Make Dawn Theme Header Transparent
How to Create Collection Color Swatches on Dawn Theme
How to Use Automation to Grow Your Shopify Store
SMS Marketing: Why It’s Better Than Email Marketing for Shopify Stores
How To Make Dawn Theme Header Transparent