How To Create a Popup on Shopify

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.