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.

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 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);

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.

Written by

Jotter are a group of freelancing Shopify & Shopify Plus Experts. Dedicated to offering design, development, marketing and seo services to grow your Shopify business.

Comments:

  • Anh

    Hello, how would I go about if I wanted to add a pop up for email sign up right when you enter the site?

Post a comment:

Comment

Type at least 1 character to search

Subscribe:

No Bull, No Fluff. Don't get sold on fake hope! Learn how to grow your business long term. Subscribe now for FREE tips on the latest strategies, techniques and best practices.

Contact Us:

Sydney, NSW, 2000
Australia
john@jotting.com

Bluish.io has rebranded to Jotting.com :) x