Shopify

How To Create a Popup on Shopify

Looking to create a popup for your Shopify store? Look no further and follow this guide!

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.


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

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 bluish.io -->
{{ '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);

Lastly, go to your main css file, in this case we are using the Debut Theme, so the main css file is theme.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.

Not a problem! post a comment below and we can definitely help you with whatever issues you might be having.

This is an advanced tutorial that Shopify does not support. For themes that have been customized with custom coding and/or apps, we cannot guarantee outcomes.

If you’re not sure how to proceed with the following guide or want to make any changes, we recommend posting in our comment section.

The above guide was completed on an unedited version of the Debut theme, downloaded on 3rd of August, 2021.
Posted by
Bluish Team

A group of Shopify developers, SEO experts, and Social Media marketers who have been in ecommerce game for over 4 years. Our Team has worked on 100's of Shopify ecommcerce stores, understanding each store owners SEO, product, and marketing needs.

Leave a Reply

Your email address will not be published. Required fields are marked *