Progressive web app

Helps your site work well in the poor network connection or offline, and as a native app on customer’s devices. This increases speed, SEO, and sales.

Open Progressive web app settings.

From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit and click Customize.
In the left-hand toolbar, click Theme settings.
Click the Progressive web app.

Settings

Enable: turn on/off this feature.
Name and/or short name: you must provide at least the name or short name property. If both are provided, the short name is used on the user's home screen, launcher, or other places where space may be limited. The name is used when the app is installed.
Icon: when a user installs your PWA, you can define a set of icons for the browser to use on the home screen, app launcher, task switcher, splash screen, and so on. Your icon size must be at least 512x512 pixels(recommend PNG image).
Display: you can customize what browser UI is shown when your app is launched. For example, you can hide the address bar and browser chrome. Games can even be made to launch a full screen.
Property
Use
fullscreen
Opens the web application without any browser UI and takes up the entirety of the available display area.
standalone
minimal-ui
browser
A standard browser experience.
Background color: pick a color that is used on the splash screen when the application is first launched on mobile.
Theme color: sets the color of the toolbar, and may be reflected in the app's preview in task switchers. This setting will be also used for the meta-theme color specified in the document head even you turn off the PWA feature.

Please note: You should publish your theme to use this feature.

PreviousRecently viewed products NextSales notification

Last updated 4 years ago

Was this helpful?

Settings

Enable: turn on/off this feature.

Name and/or short name: you must provide at least the name or short name property. If both are provided, the short name is used on the user's home screen, launcher, or other places where space may be limited. The name is used when the app is installed.

Icon: when a user installs your PWA, you can define a set of icons for the browser to use on the home screen, app launcher, task switcher, splash screen, and so on. Your icon size must be at least 512x512 pixels(recommend PNG image).

Display: you can customize what browser UI is shown when your app is launched. For example, you can hide the address bar and browser chrome. Games can even be made to launch a full screen.

Property

Use

fullscreen

Opens the web application without any browser UI and takes up the entirety of the available display area.

standalone

Opens the web app to look and feel like a standalone native app. The app runs in its own window, separate from the browser, and hides standard browser UI elements like the URL bar.

minimal-ui

This mode is similar to standalone, but provides the user a minimal set of UI elements for controlling navigation (such as back and reload).

browser

A standard browser experience.

Background color: pick a color that is used on the splash screen when the application is first launched on mobile.

Theme color: sets the color of the toolbar, and may be reflected in the app's preview in task switchers. This setting will be also used for the meta-theme color specified in the document head even you turn off the PWA feature.

Please note: You should publish your theme to use this feature.