How to Add Popups to Your Shopify Store Without Using Any Paid Apps

You want a promo popup to appear on your homepage after a short delay. You know there are apps available, but you do not want to pay a monthly fee for something so simple.

You only need a basic popup and nothing complex.

So the question is, is there a simple way to add a popup without installing an app?

Yes, there is. You can add a small code snippet to your theme and create the popup yourself.

Let me walk you through it step by step.

Step 1: Open Your Theme Code

Go to your store and look at the bottom right. You will see a button called Customize Theme. Click on it and your theme editor will open.

In the top bar you will see three dots. Click on them and select Edit Code.

Now search for the theme.liquid file. Open it and scroll until you find the start of the body tag. You will paste the popup code right above that.

Step 2: Add the Popup Code

Paste the code below inside theme.liquid.

{% if template == 'index' %}

<style>
  #promoPopup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
  }

  #promoPopup .box {
    background: white;
    max-width: 350px;
    margin: 120px auto 0;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
  }

  #promoPopup .closeBtn {
    cursor: pointer;
    margin-top: 15px;
    padding: 8px 16px;
    background: black;
    color: white;
    border-radius: 4px;
    display: inline-block;
  }
</style>

<div id="promoPopup">
  <div class="box">
    <h2>Special Offer</h2>
    <p>Enjoy a limited time discount today.</p>
    <span class="closeBtn">Close</span>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    setTimeout(function() {
      var popup = document.getElementById("promoPopup");
      if (popup) popup.style.display = "block";
    }, 15000);

    document.addEventListener("click", function(e) {
      if (e.target.classList.contains("closeBtn")) {
        document.getElementById("promoPopup").style.display = "none";
      }
      if (e.target.id === "promoPopup") {
        document.getElementById("promoPopup").style.display = "none";
      }
    });
  });
</script>

{% endif %}

This code gives you a popup box that appears after fifteen seconds only on the homepage when someone lands on it.

How to change this code according to your needs

If you want to change the text

Edit the content inside the <div class="box">. Update the <h2> for the heading and the <p> for the message. Replace them with your promo or announcement.

If you want to change the timing

Inside the script, find the number 15000. If you want the popup to appear after twenty seconds, change it to 20000.

If you want ten seconds, change it to 10000. Any number you enter will control how long the popup waits before showing.

If you want to change the popup background or size

In the style block edit #promoPopup .box. You can adjust background, padding, max-width, or border-radius to change the look.

If you want to change the overlay behind the popup

In the style block edit #promoPopup. Update the background value if you want a lighter or darker overlay.

Once you finish adjusting the text, timing, and colors, save the file. Then open your store in a private window and check that the popup appears exactly the way you expect.