Ever wanted to show a popup on a product page — maybe for a size guide, limited-time offer, or custom note — without installing another app?

In this tutorial, I’ll show you how to render a custom popup in the Shopify Horizon theme using nothing but native metafields and a little bit of Liquid and CSS.

✨ What You’ll Build

A popup that automatically appears on a product page only when a specific metafield is filled in the Shopify Admin.

You’ll be able to:

• Show a custom message per product
• Control the popup content from the Admin
• Avoid third-party apps or extra scripts

✅ Step 1: Create the Metafield

We’ll store our popup message in a metafield.

1. Go to Shopify Admin → Settings → Custom Data → Products
2. Click “Add definition”
3. Fill out:
   • Name: Product Popup Message
   • Namespace and key: custom.popup
   • Type: Multi-line text
4. Save the definition

Then go to a product and fill in this field with the message you want to show in the popup.

🛠️ Step 2: Update the Product Page Template

Now, we’ll edit your product page to conditionally render a popup.

Open this file:

sections/main-product.liquid

Paste this snippet near the bottom of the section:

{% assign popupText = product.metafields.custom.popup.value %}

{% if popupText %}
  <div id="product-popup" class="popup hidden">
    <div class="popup-inner">
      <span class="popup-close" onclick="document.getElementById('product-popup').classList.add('hidden')">&times;</span>
      <p>{{ popupText }}</p>
    </div>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      setTimeout(function () {
        document.getElementById("product-popup").classList.remove("hidden");
      }, 1500); // Delay of 1.5 seconds
    });
  </script>
{% endif %}

This code checks if the product has a custom.popup metafield, and if it does, shows a popup after 1.5 seconds.

🎨 Step 3: Add the Popup CSS

Now we’ll style the popup to make it centered, mobile-friendly, and easy to dismiss.

Open:

assets/base.css

Add this CSS:

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.popup-inner {
  background-color: #fff;
  padding: 2rem;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  position: relative;
  text-align: center;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

.hidden {
  display: none;
}

This will give your popup a modern look that works on mobile and desktop.

🧪 Step 4: Test the Popup

1. Go to any product in your admin
2. Scroll to the Product Popup Message metafield
3. Add a message like:
   ⚠️ Only 3 left in stock! Order before midnight!
4. Save and view the product page
5. You should see the popup after 1.5 seconds 🎉

Conclusion

This is a clean, native way to let merchants or content editors control product popups without needing an app. You can reuse this pattern for:

• Delivery messages
• Ingredient info
• Safety warnings
• Custom upsells
• Embedded video content (YouTube iframes, etc.)

The possibilities are endless — and it keeps your store lightweight and easy to manage.