![\"home-screen\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Category-Of-Home-screen.png\")
<\/a><\/p>\nBefore purchasing the extension, view demo app functioning by opening PrestaShop PWA Demo App URL on your browser.<\/p>\n
Demo Store URL:<\/strong> https:\/\/psm.knowband.com\/pwa\/admin1<\/a> –> 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.<\/p>\n –> 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.<\/p>\n 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.<\/p>\n The PrestaShop Multi-vendor Marketplace<\/a> 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 eCommerce PWA application.<\/p>\n Note:<\/strong> 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.<\/p>\n 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\u2019s discuss each one of them in detail:<\/p>\n 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\u2019s devices.<\/p>\n a) Enable Plugin:<\/strong>\u00a0Enable the PrestaShop PWA module to make the app work on mobile devices. e) Splash Screen Background Color:<\/strong> Choose the right color option for the background of Progressive Web App(PWA) splash screen. 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.<\/p>\n The various details under these settings will be obtained when you\u2019ll set the Firebase account. Here is step by step process to do so:<\/p>\n Step 1:<\/strong>\u00a0Login Google Firebase<\/p>\n Step 5: <\/strong>Find Firebase Keys Step 7:<\/strong> Get other firebase related details and paste the same in PWA for Prestashop module admin panel.<\/p>\n Step 8:<\/strong> Get firebase server key from cloud messaging tab in Settings:<\/p>\n Step 9:<\/strong> Add your domain in authentication>>sign-in.<\/p>\n Enable\/Disable automated Push Notification sent to the app users for successful order creation from PrestaShop PWA app Builder.<\/p>\n 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 \u201cOrder Details\u201d tab of PWA app<\/p>\n 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.<\/p>\n 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\u00a0Progressive Web App users.<\/p>\n What\u2019s 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.<\/p>\n 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.<\/p>\n Top\u00a0categories\u00a0are\u00a0displayed in the form of small squares on the home screen of Progressive Web\u00a0App(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.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n The\u00a0PrestaShop 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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 Builder.<\/p>\n 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.<\/p>\n Note:<\/strong> The store admin can add up to 20 elements while designing layout in the backend panel.<\/p>\n Facebook App can be created by following below-mentioned steps:-<\/p>\n Step 1:<\/strong>\u00a0Go to given\u00a0URL: https:\/\/developers.facebook.com\/apps\/<\/p>\n Step 2:<\/strong>\u00a0Click on the \u201cAdd a New App\u201d button.<\/p>\n Step 3&4:<\/strong>\u00a0Enter your App name and email id, then click on \u201cCreate App ID\u201d button.<\/p>\n Step 5&6:<\/strong>\u00a0After clicking on Create App ID you will have to\u00a0go through a security check as shown:<\/p>\n Step 7:<\/strong>\u00a0Click on \u201cSetting\u201d tab.<\/p>\n Step 8-13:<\/strong>\u00a0Two option will be available in the\u00a0dropdown, Basic and Advanced, click on \u201cBasic\u201d. And then enter your \u201cApp Domain\u201d,\u00a0\u201cContact Email\u201d, \u201dPrivacy\u00a0URL\u201d, \u201dTerms and Conditions\u00a0URL\u201d, \u201dAdd Logo\u201d, \u201dSelect Category\u201d and click on \u201cSave Changes\u201d button. Step 14:<\/strong>\u00a0Now click on \u201c+Add Platform\u201d.<\/p>\n Step 16:<\/strong>\u00a0Now Enter your site URL.<\/p>\n Step 20:<\/strong>\u00a0Now click on save.<\/p>\n Step 23&24:<\/strong>\u00a0Click on \u201cApp review\u201d. And\u00a0mark \u201cMake \u2018your app name\u2019 Public\u201d to Yes.<\/p>\n Application Type:<\/strong> Web Application. 1. Dynamic Layout:<\/strong><\/p>\n Using various designing elements, the store admin can create dynamic layout as per the need.<\/p>\n 2. Store Logo:<\/strong><\/p>\n Add store logo on the header of the\u00a0Progressive Web\u00a0App(PWA).<\/p>\n 3. Shopping Cart:<\/strong><\/p>\n The shopping cart icon on the top-right corner of the home screen allows users to switch on cart screen.<\/p>\n 4. Navigation Menu:<\/strong> The\u00a0Progressive web app\u00a0come 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:<\/p>\n 1. My Account:<\/strong> 2. Categories<\/strong> 3. CMS Pages:<\/strong> 4. Language(s)<\/strong> 5. Currency(s)<\/strong> 6. Login\/Logout<\/strong> 1. Multiple Views:<\/strong> 2. Sorting:<\/strong> 3. Filter:<\/strong> The product screen of your\u00a0Progressive 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 \u201cIn Stock\u201d or \u201cOut Of Stock\u201d based on 1. Product Info & Care<\/strong> 2. Short Description<\/strong> 3. Product Options:<\/strong> 5. Add To Cart:<\/strong> 6. Product Social Sharing:<\/strong> The Progressive Web App(PWA)\u00a0 1. Login<\/strong> 2. Sign Up<\/strong> 3. Login with Facebook<\/strong> 4. Login with Google+<\/strong> The Shopping Cart screen of your Prestashop Progressive web application will display all products added into the shopping cart. The app users can view Product name, 1. Apply Voucher<\/strong> 2. Total Product Price<\/strong> 3. Update Product Quantity<\/strong> 4. Remove Product<\/strong> 5. Continue Shopping<\/strong> 6. Continue To Checkout<\/strong>
\nPWA App URL:<\/strong>\u00a0https:\/\/psm.knowband.com\/pwa\/pwa-app\/<\/a><\/p>\n1.2 Major Features of PrestaShop Progressive Web App (PWA):<\/h3>\n
\n
[IMP] Notes For iOS:<\/h3>\n
[NEW UPDATE] PrestaShop PWA supports RTL Language Scripts<\/h2>\n
Compatible With PrestaShop Multi-vendor Marketplace<\/h2>\n
2.0 Admin Panel Screens<\/h2>\n
2.1 General Settings<\/h3>\n
<\/a><\/p>\n
\nb) Redirect on Cart Page when Add To Cart:\u00a0<\/strong>This functionality allows admin to control \u201cAdd To Cart\u201d button redirection. The users can be redirected to the shopping cart or kept on the product screen on tapping \u201cAdd To Cart\u201d.
\nc) Display Short Description:<\/strong>\u00a0Enable to display short product description on the product screen of Progressive Web App(PWA).
\nd) Enable Logo:<\/strong> Add logo of your store on the header of Progressive Web App (PWA) and showcase your brand to users.<\/p>\n<\/a><\/p>\n
\nf) Name For PWA App:<\/strong> Choose the name of your PWA for Prestashop as per your choice.
\ng) Select Layout:<\/strong>\u00a0Choose 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.
\nh) Disabled Shipping Methods:<\/strong>\u00a0Disable shipping methods from working in\u00a0Progressive Web App(PWA)\u00a0whichever you don\u2019t feel right. On the website, they will work usually fine.
\ni) Enabled CMS Pages:<\/strong>\u00a0Choose desired CMS pages to be displayed on the PrestaShop PWA app.
\nj) Enable Request Log Reporting:<\/strong>\u00a0Enable option to share log file on the progressive web apps in order to get details of any sort of abnormal behavior from app.
\nk) Enable URL encoding of Image links:<\/strong>\u00a0Enable this functionality to support Non-ASCII characters on the Progressive Web App(PWA).<\/p>\n2.2 Push Notifications Settings<\/h3>\n
<\/a><\/p>\n<\/a><\/p>\n2.21 How To Set Up Firebase Account?<\/h4>\n
<\/a>
\nStep 2:<\/strong> Create New Project
\nAs you click on\u00a0Add Project, following dialog box will pop up:<\/p>\n<\/a>
\nIt will take a few seconds to create the project. Once the project is ready, click\u00a0continue.<\/p>\n<\/a>
\nStep 3:<\/strong> Manage Project Settings
\nOnce the project is created, click on\u00a0Project settings.<\/p>\n<\/a>
\nStep 4:<\/strong> Go to Authentication options:
\n<\/a><\/p>\n
\nIn the project settings, click on Cloud messaging settings. From here, you can directly get the server key.<\/p>\n<\/a>
\nStep 6:<\/strong> Add your Web-App to Firebase<\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\nA) Successful Order Push Notification:<\/h4>\n
<\/a><\/p>\nB) Order Status Update Push Notification:<\/h4>\n
<\/a><\/p>\nC) Abandoned Cart Push Notification:<\/h4>\n
<\/a><\/p>\n2.2 Push Notifications History<\/h2>\n
<\/a><\/p>\nA) Send Notification:<\/h3>\n
<\/a>
\n2.3 Home Page Layout<\/h2>\n<\/a>
\nIn order to configure the home page layouts of PWA app, following elements are available in the back-end:<\/p>\nA) Top\u00a0Categories:<\/h3>\n
<\/a><\/p>\nB) Square\u00a0Banner:<\/h3>\n
<\/a>
\nC) Horizontal\u00a0Sliding\u00a0Banner:<\/h3>\n<\/a><\/p>\nD) Grid\u00a0Banners:<\/h3>\n
<\/a>
\nE) Countdown\u00a0Timer Banner:<\/h3>\n<\/a>
\nF) Square\u00a0Products:<\/h3>\n<\/a>
\nG) Horizontal Sliding Products:<\/h3>\n<\/a>
\nH) Grid Products:<\/h3>\n<\/a>
\nI) Recently Accessed Products:<\/h3>\n2.4 How to get Facebook App details?<\/h2>\n
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n
\nApp Domains:
\nyourdomain.com is\u00a0correct
\nyourdomain.com\/store is\u00a0incorrect
\nwww.domain.com is\u00a0incorrect<\/p>\n<\/a><\/p>\n<\/a>
\nStep 15:\u00a0<\/strong>And select Website as Platform.<\/p>\n<\/a><\/p>\n<\/a>
\nStep 17&18:<\/strong>\u00a0Click on \u201cProducts+\u201d and select Facebook login.<\/p>\n<\/a>
\nStep 19:<\/strong>\u00a0Select web as the platform for the app.<\/p>\n<\/a><\/p>\n<\/a>
\nStep 21&22:\u00a0<\/strong>Click on Settings and add a Valid OAuth Redirect URIs.
\nValid OAuth Redirect URIs:
\nhttps:\/\/example.com\/pwa-app\/login<\/p>\n<\/a><\/p>\n<\/a>
\nFinal Step:<\/strong>\u00a0Copy the App ID and App Secret and paste it into the fields provided in the module.<\/p>\n<\/a><\/p>\n2.5 How to get Google App details?<\/h2>\n
\n
\n(https:\/\/console.developers.google.com\/project) or click on link given top right of the respective tab in module configuration page.<\/li>\n<\/a><\/p>\n\n
\nAuthorized JavaScript Origins:<\/strong> Your store domain name (https:\/\/www.yourstore.com).
\nAuthorized redirect URI or URI of Loginizer redirect page:<\/strong>
\nhttps:\/\/example.com\/pwa-app\/login<\/p>\n<\/a><\/p>\n\n
3.0 Front End PWA App Screens:<\/h2>\n
3.1 Home Screen
<\/a><\/h3>\n
\nBrowse the categories in the apps with left navigation menu on the home screen.<\/p>\n3.2 Accordion Menu (Navigation Bar)<\/h3>\n
<\/a><\/p>\n
\nMy 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.<\/p>\n
\nCategories displayed in left navigation menu of\u00a0Progressive Web\u00a0app(PWA) are the same as of your website.<\/p>\n
\nVarious CMS pages like About Us, Contact Us, Terms & Conditions, etc. Can be accessed from here.<\/p>\n
\nThe language option allows PWA app users to view the web-app in their desired language. All available languages are displayed under this option only.<\/p>\n
\nAll available currencies on your website are displayed here on PrestaShop PWA app\u00a0Creator\u00a0Module.<\/p>\n
\nUsers can easily sign-in\/sign-out from PrestaShop Progressive Web App via this option.<\/p>\n3.3 Category Screen:
<\/a><\/h3>\n
\nThe categories on Progressive Web App(PWA) for PrestaShop can be viewed in both list and grid view.<\/p>\n
\nThis option allows the online shoppers to choose the sort order in order to narrow down the search and get desired product with ease.<\/p>\n
\nOption to filter products simplifies product search. Users can filter all products under categories using various attributes like size, color, price etc.<\/p>\n3.4 Product Screen:<\/h3>\n
<\/a>inventory status. It contains the following other options:<\/p>\n
\nThe complete product information as available in the inventory will be displayed here.<\/p>\n
\nUsers get to read the short description of your product to quickly make up their mind about purchase.<\/p>\n
\nAll the options related to the product like size, color, etc. are displayed here.<\/p>\n
\nThis button allows users to add product into cart. The users can further process the cart for purchase.<\/p>\n
\nSharing option for the product allows users to share product on multiple social channels.<\/p>\n3.5 Login Screen<\/h3>\n
<\/a>\u00a0offers various one-tap login options & make sign-in\/registration process more seamless:<\/p>\n
\nThe app users can easily authenticate & login into PWA apps using their previous email login credentials.<\/p>\n
\nAll 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.<\/p>\n
\nThe users can log in into PWA app using their Facebook Account Credentials.<\/p>\n
\nThe users can login into Prestashop Progressive Web\u00a0application (PWA) using their Google Account Credentials.<\/p>\n3.6 Shopping Cart Screen:<\/h3>\n
<\/a>quantity, total price & shipping cost. This screen has the following options:<\/p>\n
\nThis option allows the users to use website coupons and grab discount offers.<\/p>\n
\nThe 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.<\/p>\n
\nThe PWA app users can even update the product quantity with the \u201cUpdate Quantity\u201d option.<\/p>\n
\nThe app users can simply remove the product from the cart by simply tapping \u201cRemove\u201d option.<\/p>\n
\nUsers can leave the cart to browse more products on your progressive web app for Prestashop.<\/p>\n
\nThe PWA app users can proceed further to the checkout & payment screens just by tapping the \u201cContinue To Checkout\u201d option.<\/p>\n3.7 Checkout Screen<\/h3>\n