Storefront PWA

Makes your store installable as an app on desktop, Android and iOS.

Two things to do by hand

Neither can be done from here — both live in the theme, which this app does not have permission to edit.

  1. Turn on the Storefront PWA app embed in Theme editor › App embeds. Nothing below has any effect until that is on.
  2. Then open /apps/pwa/check on your storefront to confirm the manifest, the icons and the install path on a real page.

Status

Two switches control this app, and they do different jobs. The theme app embed decides whether the tags are on the page at all — that is a theme change, made in the theme editor. The switch below leaves the theme alone and makes the manifest non-installable, which is the one to reach for if something looks wrong on a live store.

App identity

What the installed app is called, and how it describes itself in install dialogs.

Shown in the install dialog and the app window title.
Under the home screen icon. Android truncates past about 12 characters.
Shown in the richer install dialogs on desktop.
A BCP 47 tag, e.g. en, ur, ar-AE.
What kind of app this is. Up to five; anything beyond that is dropped. Only some app catalogues read them, so this is low-stakes.

App icon

One square PNG, at least 512×512. Every size the manifest needs is generated from it, including the Android maskable pair. Until you upload one, a placeholder with your initial is used so the store is still installable.

Desktop & iOS
Android squircle
Android circle

Appearance

How the installed window looks before your storefront has painted.

Tints the title bar and the Android status bar. Also the install button colour.
The splash screen while the store loads, and the padding around the Android home screen icon. Match your storefront background, not your brand colour.
Standalone is what makes it feel like an app.

Launch behaviour

Where the app opens, and which pages count as part of it.

Opened on launch. Keeping a query parameter here lets you see app traffic separately in analytics.
Pages outside this open in a browser tab instead of the app window. / is almost always right.

Shortcuts

Up to four. Long-press the icon on Android, right-click it on desktop. Leave a row blank to skip it.

Install prompt

A card inviting customers to install. Where the browser allows it, the card opens the native install dialog; everywhere else it shows that browser's own directions. You can also add data-pwa-install to any element in your theme to trigger it.

Seconds after the page loads. 0 shows it immediately.
Days. 0 means show again on the next page view.

iOS

Safari ignores most of the manifest and uses its own tags, so these are separate settings rather than duplicates.

Install dialog screenshots

Optional. With a screenshot present, Chrome shows a larger install dialog with a preview instead of a plain one-line prompt.

Wide (desktop)

Landscape, e.g. 1280×800.

Narrow (mobile)

Portrait, e.g. 750×1334.

Offline browsing

Off, and on a stock Shopify storefront it cannot be made to work. A service worker may only control the pages below the folder it is served from, and widening that needs a Service-Worker-Allowed header that Shopify strips when it proxies /apps/pwa/. So the worker can only ever control /apps/pwa/, never your product pages. Installing does not depend on this — desktop and mobile install fine without it. Turn it on only to re-test whether Shopify's behaviour has changed; the storefront check will tell you which case you are in.

Loading…