How to Add Email Popup to Shopify Without an App

2026-09-06 · email marketing

How to Add Email Popup to Shopify Without an App

Email popups are one of the highest-converting tools for recovering abandoned carts and building a subscriber list. While the Shopify App Store is full of popup builders, most charge monthly fees or force you to sacrifice store speed for features you don't need. Fortunately, you can add a fully functional email popup to Shopify without an app, using either your theme's built-in options or a small piece of custom code.

This guide walks you through both methods, including exactly where to click in your Shopify admin and what code to paste. No coding experience? Start with Method 1. Want full control over design and behavior? Go straight to Method 2.

Why Skip the App? The Cost and Hassle of Email Popup Apps

The typical email popup app charges a monthly subscription (often $10–$30/month) after a free trial. That's $120–$360 per year for something you can build in 15 minutes. Beyond the cost, apps add JavaScript and CSS files to your storefront, which can slow down your page load time—a direct hit to your conversion rate and SEO.

App-related issues also include:

• Data privacy conflicts: Some apps send visitor data to third-party servers.
• Theme conflicts: Apps sometimes break your theme's layout after a Shopify update.
• Popup fatigue: Many apps show intrusive popups on every page, which annoys customers.

A custom popup uses zero external scripts, loads instantly, and gives you complete control over when it appears and what it looks like. The only thing you lose is drag-and-drop visual editing.

Before You Start: What You Need for a Custom Popup

Before you write any code, gather these basics:

1. A Shopify theme with a theme.liquid file (all standard Shopify themes have this). You'll access it via Online Store → Themes → Edit code.
2. A free image hosting URL if you want a background image. You can upload an image to your Shopify store's file manager (Settings → Files → Upload) and copy the URL.
3. A clear call-to-action (CTA). Decide on one goal: "Get 10% off" or "Download the free guide." Don't ask for two things.
4. Your email marketing platform's form action URL. If you use Klaviyo, Mailchimp, or Omnisend, you'll need the "form action" or "form endpoint" URL from your account. For Klaviyo, go to Forms → Create Form → Embedded Form and copy the action URL from the HTML code.

Important: Without a proper email service provider (ESP), your popup won't actually collect emails. Shopify doesn't store email subscribers natively. Use a free tier of Mailchimp or Klaviyo (check current pricing for free limits) to handle the backend.

Method 1: Using Your Theme's Built-in Popup Feature

Many modern Shopify themes (like Dawn, Debut, and many paid themes) include a built-in popup section that you just enable. This is the fastest method—no code required.

Here's how to find it:

1. Go to Online Store → Themes → Customize.
2. In the theme editor, look for the "Section" list on the left sidebar. Scroll to the bottom and click "Add section".
3. Search for the word "Popup" or "Newsletter". Common names include: - "Newsletter popup" - "Email popup" - "Promo popup"
4. If you see it, click Add. Then configure: - Heading (e.g., "Get 10% Off Your First Order") - Subtext (e.g., "Join our list for exclusive deals.") - Button text (e.g., "Claim My Discount") - Show on pages: Choose "Home page only" or "All pages." - Delay: Set to "5 seconds" or "On exit intent" if available.
5. Save your changes.

Why this works: Dawn and similar themes use Shopify's native sections, so there's no extra code. The popup connects to your theme's newsletter form, which you'll need to connect to your ESP using the theme's built-in "Newsletter" setting (usually found under Theme settings → Social media or Newsletter).

If you don't see a popup section, your theme doesn't have one built-in. Move to Method 2.

Method 2: Adding a Free Popup with a Simple Code Snippet

This method works on any theme. You'll add a small HTML/CSS/JavaScript block to your theme's footer. It's about 30 lines of code and takes five minutes.

Step 1: Create the popup HTML

Go to Online Store → Themes → Edit code. In the right sidebar, find Layout → theme.liquid. Just before the closing </body> tag, paste the following:

<!-- Custom Email Popup -->
<div id="custom-popup" style="display:none;">
  <div class="popup-overlay" onclick="closePopup()"></div>
  <div class="popup-box">
    <button class="popup-close" onclick="closePopup()">×</button>
    <h3>Get 10% Off Your First Order</h3>
    <p>Subscribe to receive exclusive offers and new product alerts.</p>
    <form id="popup-form" action="YOUR_FORM_ACTION_URL" method="post">
      <input type="email" name="email" placeholder="Your email address" required>
      <button type="submit">Claim My Discount</button>
    </form>
  </div>
</div>

Replace YOUR_FORM_ACTION_URL with the action URL from your ESP (see "Before You Start" above).

Step 2: Add the styling

Still in theme.liquid, add the CSS inside <style> tags in the <head> section, or paste it into your theme's base.css file. Here's the minimal CSS:

#custom-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; }
.popup-overlay { background: rgba(0,0,0,0.6); width: 100%; height: 100%; }
.popup-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; padding: 30px; max-width: 400px; width: 90%; text-align: center; border-radius: 8px; }
.popup-close { position: absolute; top: 10px; right: 15px; font-size: 24px; background: none; border: none; cursor: pointer; }
.popup-box input[type="email"] { width: 100%; padding: 12px; margin: 15px 0; border: 1px solid #ccc; border-radius: 4px; }
.popup-box button { background: #333; color: #fff; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; width: 100%; }

Step 3: Add the JavaScript

Paste this just before the closing </body> tag, after the HTML:

<script>
  // Show popup after 5 seconds
  setTimeout(function() {
    document.getElementById('custom-popup').style.display = 'block';
  }, 5000);

  function closePopup() {
    document.getElementById('custom-popup').style.display = 'none';
  }

  // Close popup when clicking outside or pressing Escape
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closePopup();
  });
</script>

Step 4: Save and test.

That's it. The popup will appear 5 seconds after a visitor loads the page.

Customizing Your Popup: Design, Timing, and Content Tips

The code above is a baseline. Here's how to make it convert better without extra apps:

Timing rules (change the JavaScript):

Design tips:

• Match your brand colors: Replace the #333 button background with your brand's primary color.
• Use a background image: Change the .popup-box CSS to include background-image: url('YOUR_IMAGE_URL'); and adjust text color accordingly.
• Keep it under 150 words: The popup should be scannable in under 3 seconds.
• Add a privacy note: Under the button, add small text like "No spam. Unsubscribe anytime." This reduces form abandonment.

Content rules that work:

• Offer a specific incentive (discount code, free shipping) rather than "join our newsletter."
• Use a first-person or direct tone: "I'll send you a 10% code right now."
• Avoid negative phrasing like "Don't miss out" — use positive framing like "Get the insider price."

Testing and Publishing Your Popup on Shopify

Before you go live, run these checks:

1. Desktop test: Load your store in an incognito window. Wait the full delay time. Click the close button, then reload the page—the popup should show again (unless you added a cookie).
2. Mobile test: On a phone, the popup box must be smaller than the screen width. Check that the close button is tappable and not hidden behind the form.
3. Form submission test: Enter a test email address. Check your ESP dashboard to confirm the subscriber appears. If nothing arrives, your form action URL is wrong—double-check it.
4. Speed test: Use Google PageSpeed Insights. Your popup adds no external requests, so your score should be unchanged.
5. Check for overlap: Ensure the popup doesn't cover your announcement bar or sticky header on smaller screens.

Once all tests pass, you're live. No "publish" button needed—saving theme.liquid updates your store immediately.

Bonus: Free Tools and Resources to Enhance Your Popup

You don't need paid apps to improve your popup. Use these free resources:

• Exit-intent detection: Copy a free open-source exit-intent script from sites like CodePen or GitHub (search "exit intent vanilla javascript"). It triggers the popup when the mouse moves toward the browser's top edge.
• Cookie management: Use a simple JavaScript cookie library (like js-cookie, free on CDN) to show the popup only once every 30 days.
• Countdown timer: Add a free CSS-only countdown timer from CSS-Tricks to create urgency (e.g., "Offer expires in 10:00").
• A/B testing (manual): Create two popup versions with different headlines. Run one for a week, then swap. Track signups via your ESP's reporting.
• Google Analytics: Set up a click event on your popup form button to measure conversion rate. Use Google Tag Manager (free) to track the button click without editing code again.

Remember: the best popup is invisible when it's not relevant. Always pair your popup with a clear value proposition, and test different delays (5 seconds vs. 30 seconds) to find what your audience tolerates.

Conclusion

Adding an email popup to Shopify without an app is not only possible—it's often the better choice for speed, cost, and control. Whether you enable your theme's native popup section or paste a 30-line code snippet, you'll save money and keep your store lean. Start with Method 1; if your theme lacks the feature, Method 2 takes less than 15 minutes and gives you a popup that looks professional and converts.

FAQ

Will a custom popup break when Shopify updates my theme? No, as long as you edit theme.liquid directly. Theme updates may overwrite your changes, so keep a backup of your code in a text file. If you use a child theme (if available), updates won't touch your edits.

Can I use this popup to collect emails without Mailchimp or Klaviyo? No. Shopify doesn't store subscriber emails natively. You must connect the popup form to an email marketing platform. Use the free tier of Mailchimp or Klaviyo (check current pricing for limits) to handle storage and campaigns.

My popup shows but the form doesn't submit. What's wrong? The most common issue is a missing or incorrect form action URL. Go to your ESP's form embed code and copy the exact URL inside the action="" attribute. Also, ensure your form has a name="email" input, as most ESPs expect that field name.