Skip to main content

Progressive Web App (PWA)

How to access on Fynd Platform
  1. Platform Panel
  2. Sales Channel (select application)
  3. Appearance
  4. Themes

Introduction​

Progressive Web App (PWA) functionality allows you to deliver an app-like experience for your storefront. It enhances your customers' engagement by offering features such as offline access and better performance. Follow the steps below to enable and configure PWA for your storefront:

  1. Edit a theme, navigate to the Settings section, and choose Application (PWA).

QG1

Figure 1: Theme Settings

  1. In the Application (PWA) section, check the option to Enable Application Mode. Enter a name and description for your app.

QG1

Figure 2: Enable Application Mode

  1. Upload Application Icons. You need two types of icons for your PWA:
  • Solid Icon: This will be used as the primary app icon across all devices and platforms.

QG1

Figure 3: Solid Icon

  • Transparent Icon: This ensures the PWA icon looks seamlessly across various device-specific icon styles, especially on Android devices.

QG1

Figure 4: Transparent Icon

note

The icons should be PNG format with a max size of 15MB and an aspect ratio of 1:1.

  1. Upload Application Screenshots. Upload 2-6 screenshots of your storefront to provide a visual preview of how the PWA will appear on mobile devices.

QG1

Figure 5: Application Screenshots

  1. Create shortcuts in the Shortcuts section within the PWA settings. Give your shortcut a name (e.g., Product Listing Page) and upload the desired icon for it.

QG1

Figure 6: Create Shortcut

  1. After configuring the PWA, ensure you save the changes by clicking the Save button at the bottom left. Your storefront will be set up to work as a Progressive Web App, providing an enhanced experience for your customers.

QG1

Figure 7: Save Changes

Use PWA on Mobile:​

  1. Open your browser (e.g., Chrome) and visit the store's website.

QG2

Figure 8: Cash On Delivery Toggle

  1. In the top-right corner of your mobile browser, tap the three dots (menu icon), and select Add to Home Screen.

QG2

Figure 9: Add to Home Screen

  1. A pop-up will appear, showing the app name (e.g., "PWA Testing") and the icon. Tap Install to start the installation.

QG2

Figure 10: Install App

  1. After installation, the PWA icon will appear on your mobile device's home screen.

QG2

Figure 11: App on Home Screen

  1. Tap on the icon to open the app and enjoy the enhanced experience with faster performance and offline access. To use the created shortcut, simply long-press the installed app. Once installed, you can use the PWA just like a regular app, with access to store features.

QG2

Figure 12: Shortcut on Home Screen