1.0 Introduction
The rapid growth in the mCommerce industry has led to the urgency of having an eCommerce mobile app. But, creating mobile apps involves a lot of coding & other technicalities. Why not turn your online website into a web-app instead?
Offering an optimized PrestaShop PWA app i.e. would enhance the mobile shopping experience to the users. This PrestaShop PWA App module is designed & built to transform your store into a web-application which can be managed from a friendly backend panel. These apps come up with various extended features than native apps like offline mode & platform independency which makes them a hassle-free & seamless shopping solution for users.
1.1 View Demo App:
Before purchasing the extension, view demo app functioning by opening PrestaShop PWA Demo App URL on your browser.
Demo Store URL: https://psm.knowband.com/pwa/admin1
PWA App URL: https://psm.knowband.com/pwa/pwa-app/
1.2 Major Features of PrestaShop Progressive Web App (PWA):
- Customizable Home Screen Interface (DIY Editor)
- Unlimited Push Notifications (Manual & Automated Notifications)
- Zopim and WhatsApp Chat Support
- All Payment & Shipping Method Support
- Real-time Synchronization
- Automatic Inventory Update
- Lightweight App with Faster Loading
- Multi-lingual and RTL Support
- Email & Social Login Options (Google & Facebook)
- Intuitive Interface with Layered Navigation
- No Dependency on Google Play or Apple App store
- Complete White Label Solution
- Offline Mode Accessibility
- Simplified One Page Checkout
- CMS Pages (Information Pages) Control
- Showcase Related Products
- Display User Reviews
- Inbuilt Wishlist Functionality
- Coupons/Vouchers Support
- Multicurrency Support
[IMP] Notes For iOS:
–> iOS devices do not offer any inbuilt “Add To Home Screen” prompt, so users need to manually add the PWA Mobile App to the home screen of iPhone or iPad.
–> iOS does not support web push notifications, hence the push notifications can be sent only to the Android device from the admin panel of PrestaShop PWA Mobile App Builder.
[NEW UPDATE] PrestaShop PWA supports RTL Language Scripts
The PrestaShop PWA Mobile App Creator now supports all worldwide languages including RTL (Right To Left) ones like Arabic, Hebrew, Persian, etc. The store admin can bring all languages of their store on the Progressive Web App and can even add any RTL languages as per the requirement. On the other hand, the mobile shoppers won’t face any issue in accessing the PrestaShop PWA Mobile App in their preferred language.
Compatible With PrestaShop Multi-vendor Marketplace
The PrestaShop Multi-vendor Marketplace module is fully compatible with PrestaShop PWA Mobile App. The Progressive Web App displays the seller section with all marketplace sellers on the same application. The seller details remain in real-time sync with the marketplace web and will be updated automatically on the PrestaShop PWA application.
Note: The multivendor PWA mobile app for PrestaShop is only customer-centric. This means there won’t be any seller dashboard or management from the app-end. The store admin can manage the sellers from PrestaShop Marketplace module and the same will be updated on the app instantly.
2.0 Admin Panel Screens
The PrestaShop PWA Mobile App can be fully configured using these handy admin tabs and settings. All you need to do is to make some necessary clicks and button toggles to make the changes in the Progressive Web App. Let’s discuss each one of them in detail:
2.1 General Settings
As the name suggests, these general configuration settings are for all sorts of regular change in Progressive Web Applications(PWA). The options under this tab make the app function on online shopper’s devices.
a) Enable Plugin: Enable the PrestaShop PWA module to make the app work on mobile devices.
b) Redirect on Cart Page when Add To Cart: This functionality allows admin to control “Add To Cart” button redirection. The users can be redirected to the shopping cart or kept on the product screen on tapping “Add To Cart”.
c) Display Short Description: Enable to display short product description on the product screen of Progressive Web App(PWA).
d) Enable Logo: Add logo of your store on the header of Progressive Web App (PWA) and showcase your brand to users.
e) Splash Screen Background Color: Choose the right color option for the background of Progressive Web App(PWA) splash screen.
f) Name For PWA App: Choose the name of your PWA app as per your choice.
g) Select Layout: Choose the desired Home Page Layout for your PrestaShop app. You can create multiple home screen layouts in the backend as per various festivals & themes & use them as per your store requirement.
h) Disabled Shipping Methods: Disable shipping methods from working in Progressive Web App(PWA) whichever you don’t feel right. On the website, they will work usually fine.
i) Enabled CMS Pages: Choose desired CMS pages to be displayed on the PrestaShop PWA app.
j) Enable Request Log Reporting: Enable option to share log file on the progressive web apps in order to get details of any sort of abnormal behavior from app.
k) Enable URL encoding of Image links: Enable this functionality to support Non-ASCII characters on the Progressive Web App(PWA).
2.2 Push Notifications Settings
Push notifications are the handy tool to market and promote your store products, deals and sale offers. The settings under this tab allow users to configure and send unlimited push notifications on PrestaShop PWA app.
The various details under these settings will be obtained when you’ll set the Firebase account. Here is step by step process to do so:
2.21 How To Set Up Firebase Account?
Step 1: Login Google Firebase
Step 2: Create New Project
As you click on Add Project, following dialog box will pop up:
It will take a few seconds to create the project. Once the project is ready, click continue.
Step 3: Manage Project Settings
Once the project is created, click on Project settings.
Step 4: Go to Authentication options:
Step 5: Find Firebase Keys
In the project settings, click on Cloud messaging settings. From here, you can directly get the server key.
Step 6: Add your Web-App to Firebase
Step 7: Get other firebase related details and paste the same in PWA module admin panel.
Step 8: Get firebase server key from cloud messaging tab in Settings:
Step 9: Add your domain in authentication>>sign-in.
A) Successful Order Push Notification:
Enable/Disable automated Push Notification sent to the app users for successful order creation from PrestaShop PWA app.
B) Order Status Update Push Notification:
Enable/Disable automated Push Notification sent to the app users for any update regarding their previous order delivery status. The users get to view this status under “Order Details” tab of PWA app
C) Abandoned Cart Push Notification:
Enable/Disable automated push notification sent to the users who have abandoned cart without successful purchase. This push notification will be sent to users automatically after entered time interval.
2.2 Push Notifications History
Here the store admin can view complete history of push notifications sent to Progressive Web App(PWA). Along with that, the store admin can even personalize the manual notification and send the same to Progressive Web App users.
A) Send Notification:
What’s better to design and send push notifications as per the need? This option allows store owners to configure and send a custom notification manually to PrestaShop PWA app users.
2.3 Home Page Layout
The PrestaShop PWA module allows the store admin to bypass the restrictions of having fixed home screen UI and design the one suiting their business need. This tab allows the store admin to craft and save multiple layouts and use them as per the running occasions and festivals.
In order to configure the home page layouts of PWA app, following elements are available in the back-end:
A) Top Categories:
Top categories are displayed in the form of small squares on the home screen of Progressive Web App(PWA). Their images and redirection links can be configured from here. These categories can be used for highlighting top brands on the app home screen. The PrestaShop PWA module allows maximum 8 categories in which minimum 4 are mandatory.
B) Square Banner:
Square Banner listing on the Progressive Web App(PWA) home screen offers a square-shaped banner block in which the store admin can use desired image. The relevant redirection link can be used for these banners.
C) Horizontal Sliding Banner:
These are the rectangle-shaped banner block available in horizontal sliding on the home screen of PrestaShop PWA app. For this also, image and redirection link is fully configurable.
D) Grid Banners:
These are square-shaped banners listed on the home screen of Progressive Web App(PWA) in the form of grid view. The store admin can add as many banners as required and set their redirection link.
E) Countdown Timer Banner:
The PrestaShop PWA module allows the store admin to configure and add a timer based banner on the home screen of web-app. The store admin can add banner image & landing screen along with timer till the banner is to be displayed on the progressive web app home screen. Once the timer is over, the banner will be removed automatically.
F) Square Products:
As of banners, the PrestaShop PWA mobile apps allows showcasing products in square block listing. The admin get to choose the products for this element.
G) Horizontal Sliding Products:
You can add the products in the form of horizontal sliding. The chosen products could be of the store admin choice like New Arrivals, Best Sellers, custom products etc.
H) Grid Products:
Products can also be added on the home screen in the form of grid view block listings. The store admin can choose desired products and quantity to be displayed on the home screen of PrestaShop PWA app.
I) Recently Accessed Products:
The PrestaShop Mobile PWA module allows store owner to add a recent tab element on home screen of web application. It will display all products which are browsed by users recently.
Note: The store admin can add up to 20 elements while designing layout in the backend panel.
2.4 How to get Facebook App details?
Facebook App can be created by following below-mentioned steps:-
Step 1: Go to given URL: https://developers.facebook.com/apps/
Step 2: Click on the “Add a New App” button.
Step 3&4: Enter your App name and email id, then click on “Create App ID” button.
Step 5&6: After clicking on Create App ID you will have to go through a security check as shown:
Step 7: Click on “Setting” tab.
Step 8-13: Two option will be available in the dropdown, Basic and Advanced, click on “Basic”. And then enter your “App Domain”, “Contact Email”, ”Privacy URL”, ”Terms and Conditions URL”, ”Add Logo”, ”Select Category” and click on “Save Changes” button.
App Domains:
yourdomain.com is correct
yourdomain.com/store is incorrect
www.domain.com is incorrect
Step 14: Now click on “+Add Platform”.
Step 15: And select Website as Platform.
Step 16: Now Enter your site URL.
Step 17&18: Click on “Products+” and select Facebook login.
Step 19: Select web as the platform for the app.
Step 20: Now click on save.
Step 21&22: Click on Settings and add a Valid OAuth Redirect URIs.
Valid OAuth Redirect URIs:
https://example.com/pwa-app/login
Step 23&24: Click on “App review”. And mark “Make ‘your app name’ Public” to Yes.
Final Step: Copy the App ID and App Secret and paste it into the fields provided in the module.
2.5 How to get Google App details?
- Go to Google Developers Console
(https://console.developers.google.com/project) or click on link given top right of the respective tab in module configuration page. - Now click on Create Project on the left of the page.
- Enter a name for your project and proceed to the next step.
- Now click on APIs and auth-> Credentials from the left menu as shown below.
- Click Create New Client ID button from the right panel of the screen.
- You may have to fill the form for Consent Screen before proceeding. To do so, that you have to click on Consent Screen in the left menu as shown in the image above.
- Fill the pop-up form with below details:
Application Type: Web Application.
Authorized JavaScript Origins: Your store domain name (https://www.yourstore.com).
Authorized redirect URI or URI of Loginizer redirect page:
https://example.com/pwa-app/login
- Now click Create Client ID button to get your Client ID and Client Secret Key.
- Now you can use the client secret and client ID to let your customers login to your store using their Google account.
3.0 Front End PWA App Screens:
3.1 Home Screen
1. Dynamic Layout:
Using various designing elements, the store admin can create dynamic layout as per the need.
2. Store Logo:
Add store logo on the header of the Progressive Web App(PWA).
3. Shopping Cart:
The shopping cart icon on the top-right corner of the home screen allows users to switch on cart screen.
4. Navigation Menu:
Browse the categories in the apps with left navigation menu on the home screen.
3.2 Accordion Menu (Navigation Bar)
The Progressive web app come up with proper categorization of products as available on the website. Mobile shoppers can easily browse products from multiple categories. All CMS pages are also available in Accordion Menu. It provides the following options:
1. My Account:
My Account option contains all the user personal, shipping, order information. The PWA app shoppers get to view all the stored data related to them & can update the same as well.
2. Categories
Categories displayed in left navigation menu of Progressive Web app(PWA) are the same as of your website.
3. CMS Pages:
Various CMS pages like About Us, Contact Us, Terms & Conditions, etc. Can be accessed from here.
4. Language(s)
The language option allows PWA app users to view the web-app in their desired language. All available languages are displayed under this option only.
5. Currency(s)
All available currencies on your website are displayed here on PrestaShop PWA app.
6. Login/Logout
Users can easily sign-in/sign-out from PrestaShop Progressive Web App via this option.
3.3 Category Screen:
1. Multiple Views:
The categories on Progressive Web App(PWA) for PrestaShop can be viewed in both list and grid view.
2. Sorting:
This option allows the online shoppers to choose the sort order in order to narrow down the search and get desired product with ease.
3. Filter:
Option to filter products simplifies product search. Users can filter all products under categories using various attributes like size, color, price etc.
3.4 Product Screen:
The product screen of your Progressive Web App(PWA) is simple & intriguing. Multiple images of the same product are displayed along with name & price. The product availability is also displayed as “In Stock” or “Out Of Stock” based on 
inventory status. It contains the following other options:
1. Product Info & Care
The complete product information as available in the inventory will be displayed here.
2. Short Description
Users get to read the short description of your product to quickly make up their mind about purchase.
3. Product Options:
All the options related to the product like size, color, etc. are displayed here.
5. Add To Cart:
This button allows users to add product into cart. The users can further process the cart for purchase.
6. Product Social Sharing:
Sharing option for the product allows users to share product on multiple social channels.
3.5 Login Screen
The Progressive Web App(PWA) 
offers various one-tap login options & make sign-in/registration process more seamless:
1. Login
The app users can easily authenticate & login into PWA apps using their previous email login credentials.
2. Sign Up
All the new app users can sign-up & create their account on the store from the PrestaShop PWA App. The sign-up form asks for only necessary details to create account.
3. Login with Facebook
The users can log in into PWA app using their Facebook Account Credentials.
4. Login with Google+
The users can login into Progressive Web app(PWA) using their Google Account Credentials.
3.6 Shopping Cart Screen:
The Shopping Cart screen of your Progressive web app will display all products added into the shopping cart. The app users can view Product name, 
quantity, total price & shipping cost. This screen has the following options:
1. Apply Voucher
This option allows the users to use website coupons and grab discount offers.
2. Total Product Price
The users get to view the complete cost of their shopping bag before proceeding further. It is automatically updated according to any update with product quantity or new addition.
3. Update Product Quantity
The PWA app users can even update the product quantity with the “Update Quantity” option.
4. Remove Product
The app users can simply remove the product from the cart by simply tapping “Remove” option.
5. Continue Shopping
Users can leave the cart to browse more products on your progressive web app.
6. Continue To Checkout
The PWA app users can proceed further to the checkout & payment screens just by tapping the “Continue To Checkout” option.
3.7 Checkout Screen
The progressive web apps with PrestaShop Progressive Web App(PWA) module have a simplified 
single-screen checkout with only relevant information. The users can view complete checkout details like shipping details, billing details, order summary, order comment, payment summary.
1. Shipping & Billing Details
This screen provides details of the shipping & billing addresses saved by the user. The user can also edit/save the new shipping address if needed.
2. Order Summary
The progressive web app users get to view product details before making payment.
3. Shipping Methods
All available shipping methods are displayed here. Users can choose the one suiting their need.
4. Order Comment
Users can also add any comment related to their order which will be visible to store admin on the order web-page in the backend.
6. Payment Summary
This section displays the complete breakdown payment details involved with purchase.
7. Proceed To Payment
The Progressive Web App(PWA) app users will be re-directed to the Payment screen after tapping the “Proceed To Payment” button.
3.8 Payment Screen:
The payment screen of PrestaShop PWA App has all web-view payments available on the store. Online shoppers can find similar payment experience on both website and progressive web apps.
3.9 My Account Screen
My account screen of the PrestaShop Progressive Web App (PWA) allows users to view their complete details saved on the app including a list of previous orders.
3.10 Order Detail Screen
Order details screen of PrestaShop Progressive Web App provides complete details of specific order from PWA app. Users can easily view shipping address, product summary, shipping and payment method, and total cost summary etc. There is even an option to keep a track of order status and its delivery.
