Reading list Switch to dark mode

    Progressive Application for Shopify

    Updated 2 February 2023

    Note: PWAfy is not available for new users.

    What is PWA?

    PWA (Progressive Web Application) is a midway of web pages and applications.

    These are the web applications that load like regular web pages/websites but provide us with benefits like easy to load, no installation hassle, working offline, and push notification feature.

    What else do we want without actually installing the apps in our devices and bulking our phones with heavy GBs of applications but still experiencing an app-like interface!

    This app comes with two different plans, i.e., Monthly & Yearly.

    Searching for a Shopify
    Headless solution ?
    Find out More
    • Executive Plan (monthly): $9
    • Premium Plan (yearly): $99

    ∼Plans related details are discussed ahead in this blog.

    PWA FEATURES

    Highlighting some of the features of PWA here:

    • No need to install. Simply just add on your home screen.
    • Very light on memory.
    • Less data-hungry.
    • Works well on flaky networks.
    • Loaded pages can be viewed even if you don’t have access to your internet i.e., works offline.
    • Push notification is one appreciated feature of PWA.
    • A hassle-free way to turn your store into an app.
    • Makes your website lightning fast.
    • Configure app name & icon on android/iOS.
    • Completely responsive on almost all platforms.
    • Admin can upload and change the application icon.
    • He can set the splash background color of the Progressive Web Application.
    • The Admin can add a store app link on the frontend.

    How to install this application?

    Go to Landing Page, enter the shop URL where you want this app to be installed and click on the ‘install’ menu.

    Landing page for PWA Shopify by Webkul

    WORKFLOW

    Once you install the app, you can find it in the app section of your Shopify store backend.

    progressive application for shopify by webkul

    Once you double click on the app’s name you will be introduced with the ‘Home Page’.

    HOME

    This is the Home Page:

    Homepage of PWA for Shopify by Webkul

    Under this, we have four sections: Home (the one we are currently at), Configuration, Push Notification, and Configure Frontend. Below that we have some of the PWA features displayed.

    On the Home page, we have a menu of FAQ which will redirect you to a page where you will get all FAQs related to this application.

    Moving ahead, you will see an option of feature configuration. Clicking on the ‘Configure App’ menu will redirect you to the Configuration section (will be discussed ahead in this manual). Next, you have a brief definition of PWA with ‘View App Feature’ and ‘Take a tour’ menu. Go ahead and explore these options.

    feature configuration PWA for Shopify by Webkul

    Lastly, on the Home page we have these two menus:

    support PWA for Shopify by Webkul

    Click on the ‘Schedule Booking’ menu if you want to get one to one live support from our best executives and if you have any queries, you can create a ticket by clicking on the ‘Create Ticket’ menu and your request will be resolved as soon as possible.

    This is all for the Home page, moving ahead to the Configuration section.

    CONFIGURATION

    Configuration section will be displayed like this:

    configuration PWA for Shopify by Webkul

    Firstly, you will have to manage General Configuration settings where you basically need to enter a name for your app (which will be displayed below the web app launcher icon when your users will install it in their devices), the Tagline (this will be the welcome line which will be displayed on the screen for once when you are done installing the web app on your device) and you also need to upload the Launcher icon (which will represent your web app).

    Next, in general configuration, you need to check the box which says ‘Show App Features to customers while App Installation’ if you want your customers to see your apps feature while installing it with a brief description. Upload a ‘splash screen’, which could be any picture that you want to display on the background of your app while installation (refer to the image below). ‘Save & Publish’ to save all the changes made.

    configuration PWA for Shopify by Webkul

    Under the ‘General Configuration’ setting, you have the ‘Push Notification Configuration’.

    Here you need to enter your Firebase Sender ID, Server Key, Application Public Server Key, Application Private Server Key (know how to get these keys). Then you need to upload a ‘Push Notification Icon’, which will be shown on the very first welcome notification just after you install the web app.

    push notification PWA for Shopify by Webkul

    Lastly under ‘Push Notification Configuration’, you need to enter ‘Push Notification Title’ and ‘Push Notification Description’ which will be displayed on the welcome notification sent to your customers once they install your web app. After this, click on ‘Save’.

    push notification PWA for Shopify by Webkul

    How to get your Firebase ID and keys?

    Firstly login to your Firebase account using your credentials. This will be the page where you will land on:

    firebase console PWA for Shopify by Webkul

    Here, click on ‘Add Project’, this action will give you this pop up:

    firebase PWA for Shopify by Webkul

    Enter the project name, check the ‘I accept’ message and then click on ‘Create Project’. After a few blinks, your project will be created and then after clicking ‘continue’, you will land on this Home page:

    firebase PWA for Shopify by Webkul

    Click on the ‘setting’ menu below the Home icon (as shown in the image above) and then go to ‘Project Settings’.

    This is what you will get:

    firebase PWA for Shopify by Webkul

    From ‘Settings’, go to ‘Cloud Messaging’, here you will get your Sender ID as well as Server Key. Now, scroll down to the bottom of this page, you will get this ‘Web Push certificates’ section:

    firebase PWA for Shopify by Webkul

    Click on ‘Generate Key Pair’, it will give you this page:

    firebase PWA for Shopify by Webkul

    Here, you will have your ‘Application public server key’. For ‘Application private server key’, click on the three dots as shown in the image above. It will give you an option to ‘Show Private Key’ (refer image below).

    firebase PWA for Shopify by Webkul

    Clicking on the ‘Show private key’ will give you a pop up with ‘Application private server key’.

    firebase PWA for Shopify by Webkul

    Copy all these keys and paste it in the ‘Push Notification Configuration’.

    PUSH NOTIFICATION

    This will be the page that you will get once you click on the ‘Push Notification’ menu.

    push notification PWA for Shopify by Webkul

    On the top right of the page, you have the ‘Add Push Notification’ menu.

    Below that, you have a table with Title, Description, Push Notification Icon, Schedule Date, Push Notification, Status, and Action.

    • Title: This is the heading of the notification that will be sent to your customers like if you are having a sale on your store, you can put up a title like ‘sale’.
    • Description: This is the details about your notification like what is the sale about or offers your giving.
    • Push Notification Icon: This icon will be shown with the notification depicting the reason for the notification or can be your store logo.
    • Schedule Date: This is the duration for which you want your customers to be notified about this particular notification.
    • Push Notification: This is a button for manual notifications. You can press it any time you want to send your customers that particular notification.
    • Status: If the status is active, notifications will be sent to your customers as per the duration defined. If it is inactive, notifications will not be sent to your customers. Though, you may send manual notifications even if the status is inactive.
    • Action: This allows us to perform three actions on the notification, i.e., Delete, Edit and Inactive.

    How to add Push Notification?

    Click on the ‘Add Push Notification’ menu on the top right and this action will display a pop up on your screen like this:

    push notification PWA for Shopify by Webkul

    Enter FROM and TO date, Title, Description, Push Notification icon and click on ‘add notification’.

    When you click on the ‘edit’ menu in the ‘more actions’ option, a similar pop up will appear, make the desired changes and click on ‘add notification’ to save the changes made.

    This is all about ‘Push Notification’. Let’s move on to the last section ‘Configure Frontend’.

    CONFIGURE FRONTEND

    This page will be displayed when you go to the ‘Configure Frontend’:

    AwesomeScreenshot-shubham-store1-shubham-pwa-Shopify-2019-07-11-19-07-66

    Here you have an option to auto inject the code or you may even copy the code and paste it in your theme.liquid file, manually.

    You can find the ‘theme.liquid’ file from your store’s backend section. Go to Online Store > themes > Actions > edit code > search for theme.liquid file and paste the provided code.

    My Plan

    PWAfy comes with two different plans, i.e., monthly & yearly:

    pwa demo shop PWAfy Shopify

    The My Plan section of the app will display your current plan details.

    You can click on the ‘View All Plans’ button to change your PWAfy plan.

    If you are using the executive plan then you can change your current plan before 7-days of the plan expiry date or in the trial period only.

    pwa demo shop PWAfy Shopify (1)

    FRONTEND DISPLAY

    PWA for Android Devices:

    • Splash Screen: When your customers will visit your store using your store URL on their Android device, they will get the splash screen.
    • Users can add the app to your homescreen either clicking on the ‘Add PWA to Homescreen’ text at the bottom of the page (refer image 1) or clicking on the ‘Add to homescreen’ header message (refer image 2).
    • After that, a dialog box will open, click on ‘Add’. Refer to image 3.
    • The app will be added to the home screen (encircled app icon in image 4).
    • Once you open the app, you will see this display having the shop logo and tagline (refer to image 5).
    • The last image (6) shows the push notifications!

    PWA for iOS Devices:

    • When your customers will visit your store using your store URL on their iOS device, they will get the splash screen (refer to image 1).
    • After clicking on the button shown in image 1, they need to click on the Add to Home Screen button as shown in image 2.
    • Click on the Add button (shown in image 3) to add the app on the home screen (refer image 4 of the app added to homescreen).

    Note: PWAfy doesn’t support push notifications on iOS for now.

    PWA DEMO

    Frontend Demo Link: https://pwa-demo-shop.myshopify.com/

    Need help with the PWA?

    Furthermore, if you need any kind of support/consultancy then please raise a ticket at https://webkul.uvdesk.com/ or drop an email at [email protected].

    Thank you for reading this blog!

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content