Integrations

How to add a popup to Shopify

Shopify's app store is full of popup apps, and each one adds its own script, its own subscription and often its own delay to your storefront. If you already have a lead pipeline (Klaviyo, a spreadsheet, a webhook), you may only need the popup itself. PopupForge gives you that as a single script tag you paste into your theme once.

The tag goes into theme.liquid, the layout file every storefront page renders through, so the popup is available on the home page, collections, products, blog and cart. Checkout is the exception: Shopify does not run theme scripts there, and this guide explains what that means for you.

The script tag

<script src="https://getpopupforge.com/lead-modal.js?appId=YOUR_APP_ID&configId=YOUR_CONFIG_ID" async defer></script>

Replace YOUR_APP_ID and YOUR_CONFIG_ID with the values from the install panel of your published popup. The tag is the same on every platform; only where you paste it changes.

Step by step

  1. 01

    Build and publish the popup in PopupForge

    Create a free account, generate or design the popup in the visual editor, set the trigger and frequency, then publish it. The install panel shows your script tag with the appId and configId already filled in. Copy that exact tag; the placeholder version on this page will not load a popup.

  2. 02

    Duplicate your live theme before editing

    In Shopify admin go to Online Store > Themes. On your current theme, open the three-dot menu and choose Duplicate. Editing the copy first lets you preview the change without touching what customers see, and gives you a rollback if anything goes wrong.

  3. 03

    Open the code editor and find theme.liquid

    On the duplicated theme, open the three-dot menu and choose Edit code. In the left file tree expand Layout and click theme.liquid. This file wraps every storefront page, which is why it is the right place for a site-wide script.

  4. 04

    Paste the tag before the closing body tag

    Scroll to the bottom of theme.liquid, find </body>, and paste the PopupForge script tag on the line above it. Click Save. Shopify's Theme Check flags script tags that lack async or defer as parser-blocking; the PopupForge tag has both, so it passes.

  5. 05

    Alternative: a Custom Liquid section on specific templates

    If you only want the popup on, say, the product template, open Online Store > Themes > Customize, pick the template, click Add section > Custom Liquid in themes that include it (Dawn and other Online Store 2.0 themes), paste the tag, and save. Note that PopupForge's URL targeting can do the same job from one site-wide tag, which is easier to maintain.

  6. 06

    Preview, then publish the theme

    Click Preview on the duplicated theme and walk through a product page and the cart to confirm the popup fires and closes cleanly. When you are satisfied, use the three-dot menu > Publish to make the edited copy the live theme.

  7. 07

    Test the popup and check the lead arrives

    Open the live site in a private browsing window so a previous session does not suppress the popup, trigger it the way you configured (wait for the delay, scroll, or move the pointer out through the top of the window), submit a test lead, then confirm it shows in the PopupForge lead list.

Shopify notes and gotchas

  • Checkout does not run theme.liquid, so no theme script (PopupForge included) can render on checkout pages. Shopify is also retiring app-created script tags on the Order status page (August 28, 2025 for Plus stores, August 26, 2026 for all other stores, per the Shopify developer docs). Treat the popup as a storefront tool and use URL targeting to keep it off /checkouts and /cart if you prefer.
  • Changing themes removes the tag, because it lives inside the theme's files. Add it to the new theme before publishing it.
  • The Shopify Starter plan only offers the Spotlight theme with limited customization. If Edit code or Custom Liquid is missing on your theme, you need a plan that includes the full online store. Check Shopify's plan comparison if you are unsure.
  • Password-protected development stores still render theme.liquid, so you can test the popup before launch. Discount popups pair well with a Shopify discount code you create under Discounts.

Verify the install

Confirm the popup shows and the lead arrives

  1. 1.Open the storefront in a private window and view the page source; search for lead-modal.js to confirm the tag is in the published theme.
  2. 2.Trigger the popup on a product page and on a collection page, then submit a test email.
  3. 3.Confirm the lead in the PopupForge lead list and that the analytics counted the view and submission.

Official Shopify documentation

Platform menus and plan rules change. If a step here no longer matches what you see, the official page above is the source of truth.

FAQ

Frequently asked questions

Can the popup show on the Shopify checkout page?

No. Shopify does not run theme scripts on checkout, and it is retiring app-created script tags on the Order status page (August 28, 2025 for Plus stores, August 26, 2026 for all other stores). Use the popup on the storefront, where visitors decide whether to buy, and keep checkout uninterrupted.

Will the popup slow my store?

The tag is async and defer, so it does not block rendering, and it loads one small loader that then opens an iframe. It is one script instead of the several many popup apps inject. Measure with Lighthouse before and after if speed is a concern.

Where do the collected emails go?

Into the PopupForge lead list, where you can export CSV or receive them by email. Paid plans add Slack alerts and signed HTTPS webhooks, which Zapier or Make can receive and forward to Shopify Email, Klaviyo or a spreadsheet.

Do I need to re-add the tag after a theme update?

Shopify theme updates usually arrive as a new theme version you publish, not an in-place edit, so yes: paste the tag into the new version before publishing it. Keep the tag somewhere handy.

Get your script tag

Generate a popup for your site, then paste one tag into Shopify.

The free generator shows three brand-matched directions from your URL, no account needed. Creating an account gives you the visual editor, triggers, URL targeting and the install panel with your real appId and configId.

Read next

Other platforms