Add an install popup to Shopify — setup guide

Key takeaways

• Access to edit your Online Store theme.
• Use your own popup ID in the script.
• Verify the published address, not an editor preview.
• Treat install guidance and full PWA capabilities as separate checks.

Before you start

• Access to edit your Online Store theme.
• A published HTTPS site.
• An InstantPWA popup configured for that site address.

Step-by-step for Shopify

1. Step 1
   Copy your popup’s code

   Create your popup, save its published website address and copy the install code. Replace the example ID with your own.

   <script src="https://instantpwa.com/api/public/embed.js" data-widget-id="YOUR_WIDGET_ID" defer></script>

2. Step 2
   Install and verify: step 1

   Open Online Store → Themes in Shopify.

3. Step 3
   Install and verify: step 2

   Open the theme menu → Edit code, then layout/theme.liquid.

4. Step 4
   Install and verify: step 3

   Paste the snippet just before </body> and save.

5. Step 5
   Install and verify: step 4

   Open your published storefront, not checkout, and run the install check.

6. Step 6
   Check what the home-screen icon actually does

   Test Safari on iPhone and Chrome on Android. Open the installed shortcut and confirm the destination. A positive script check is not proof of offline caching or push permission.

Common Shopify gotchas

• Shopify CDN assets cannot register as a service worker on your storefront origin. Uploading sw.js to Files is not a complete PWA setup.
• An app-proxy route has its own path and scope; do not assume it provides a root-scoped worker.
• Use the storefront theme, not checkout customizations. Checkout is outside this installation workflow.

FAQ