This article will cover how you can create a free popup on your Shopify website. You can add a Mailchimp form or any other html email marketing code script / custom html to a popup that can be triggered with a click.

Technical Level: Medium

You’ll need to know some code or at least an understanding of Shopify’s backend files to make this project successful (though, no worries, I’ll make this as detailed as possible).

On left sidebar of Shopify’s backend, click on Online Store and navigate to Pages, then click on that green button Add Page.

The content that we’ll be placing in this page will be the content for the popup. The handle of the page will determine what will be placed in the HTML code in the following steps.

So, in this example, we’ll name the page Custom Popup, once you publish the page Shopify will automatically create the handle:

custom-popup

We’ll come back to the handle in a bit.

This may get technical but don’t fret. Here we go.

Go to your Shopify theme code editor. This can be found under Online Store > Theme. It’s advisable that we now create a staging site (if this is a live site you’re working on, do it; if not, don’t worry about it). You can do this by copying the live theme: click on Actions button (in Live Theme section) and then click on Duplicate. That’s it. You’ll find the copy of theme below, scroll down to the Theme Library section (it will be the first one).

Now, we go to the duplicated theme files. Click on Actions > Edit Code.

In this example, we’ll be placing the code in the footer section because the popup will be used on all pages. But, you can place the code in whatever page you want, you’ll just have to find the page you want to place it in within the files. The Liquid page that I’m using is called “footer-classic.liquid”, it is found in the area called Sections.

Find the </footer> tag. Place the code below right before the </footer> tag. Remember that handle in Step One. Read the code below and see where my handle “custom-popup” is located.

<!-- popup -->
<div class="popup-overlay">
<div class="popup">
<!-- Put your page handle between the 'page.' and '.content' -->
{{ pages.custom-popup.content }}
<span class="popup-close"></span>
</div>
</div>
<!--  end popup -->

It’ll look this:

We’ll now be adding Javascript code to a .js file that we’re going to create.

Go to Asset folder section. Click on Add a new asset. Click on Create a blank file. Name it popup and select .js on the dropdown menu.

Now place the code below into the popup.js file.

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

Save it.

We’ll need to find the main css file for your theme. In this case, we’ll be adding it to the style.css file. The tricky part (if you’re a novice) is finding your css file, best bet, contact theme developer or search the theme forum for an answer to which is your main css file.

Paste this code at the very bottom of the css file.

.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;
}

Save it. And that’s it.

You should now have a popup that works both on desktop and mobile.

If you run into a snag, please comment below.

Check out the live example of the popup on the Shopify site I built for a client.