Setup guide · Shopify
Turn a Shopify storefront into an installable PWA (2026)
Add PWA install to any Shopify theme — Liquid manifest link, service worker via the asset pipeline, install popup.
Key takeaways
- Use Shopify Files or the theme /assets folder for manifest and sw.js.
- The service worker must be served from the root — Shopify supports app-proxy routes for this.
- Install popups on product pages convert 3–5× better than global.
Before you start
- Shopify Online Store 2.0 theme
- HTTPS (default on Shopify)
- Store owner or developer access
manifest.webmanifest
{
"name": "Your product",
"short_name": "Product",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#111827",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}Step-by-step for Shopify
- Step 1Upload manifest and sw.js as Files
Content → Files, then reference the CDN URL from theme.liquid.
- Step 2Link the manifest
Inside <head> in theme.liquid, output the manifest URL.
<link rel="manifest" href="{{ 'manifest.webmanifest' | file_url }}" /> - Step 3Add the install popup
Paste the InstantPWA snippet before </head> in theme.liquid.
Minimal sw.js
// public/sw.js
self.addEventListener('install', (e) => self.skipWaiting());
self.addEventListener('activate', (e) => self.clients.claim());
self.addEventListener('fetch', () => {});Common Shopify gotchas
- Shopify serves storefront assets from cdn.shopify.com — some browsers refuse to install unless the service worker is on the same origin as the page. Use an app-proxy route to serve sw.js from your myshopify domain root.
- Checkout runs on shopify-checkout.com and cannot be part of the PWA scope.
FAQ
Do I need a native app if my Shopify site is a PWA?
No. Once your Shopify site meets the three PWA criteria (HTTPS, a manifest, a service worker), Chromium browsers offer to install it and iOS Safari 16.4+ supports the full standalone experience — including web push.
Will a service worker slow my Shopify site down?
Not measurably on first load. The worker installs asynchronously after the page becomes interactive. On repeat visits it typically improves LCP and TTFB because assets are served from cache.
Can I still deploy my Shopify site to Vercel, Netlify or Cloudflare?
Yes. Any static or edge host works — the manifest and service worker are plain files served from the origin. No build-time integration is required.
Skip the setup — drop in one line
InstantPWA handles the install prompt across iOS, Android and desktop. Free forever for one popup.
Get started free