In today’s fast-paced digital world, having a strong online presence isn’t just an option—it’s a necessity. For eCommerce businesses, the ability to provide a seamless and efficient shopping experience across all devices is crucial for success. Especially, if you’re running a PrestaShop store, you might already be aware of the importance of mobile optimization. However, taking it a step further with a PrestaShop PWA Mobile App can significantly boost your sales and customer engagement. In this article, we’ll explore how a Progressive Web App for PrestaShop can transform your online store and help you stay ahead of the competition.
What is a Progressive Web App (PWA)?
A Progressive Web App (PWA) is a software application accessed via the web and developed using standard web technologies like HTML, CSS, and JavaScript. PWAs are crafted to function seamlessly on any platform with a browser that adheres to web standards.
Therefore, unlike traditional mobile apps, PWAs don’t require users to download anything from an app store. Instead, they can be accessed directly through a web browser, offering a similar experience to a native mobile app.
Moreover, for eCommerce businesses, PWAs combine the best of web and mobile apps, providing a fast, reliable, and engaging user experience. With features like offline access, push notifications, and home screen shortcuts, PWAs enhance user interaction, making it easier for customers to browse, shop, and stay connected with your brand.
Why Choose PrestaShop PWA Mobile App?
If you’re using PrestaShop as your eCommerce platform, integrating a PWA can be a game-changer. The PrestaShop PWA Mobile App by Knowband brings all the benefits of a PWA to your PrestaShop store, ensuring that your customers have a smooth and enjoyable shopping experience regardless of the device they’re using.
Key Benefits of a PrestaShop Progressive Web App!
Enhanced User Experience: PWAs load faster than traditional mobile apps, providing a seamless browsing experience. Thu, this is crucial for retaining customers, as slow-loading websites can lead to high bounce rates.
Offline Accessibility: One of the standout features of a PrestaShop eCommerce PWA App is its ability to work offline or in areas with poor internet connectivity. Furthermore, it ensures that your customers can continue browsing your products even when they’re offline, leading to higher conversion rates.
Increased Engagement with Push Notifications:PWAs allow you to send push notifications directly to your customers’ devices. This is an effective way to keep your audience informed about new products, promotions, and updates, encouraging repeat visits to your store.
No Need for App Store Downloads: With Knowband’s PrestaShop PWA Mobile App, there’s no need for customers to visit an app store to download your app. This reduces friction and makes it easier for customers to access your store.
Cost-Effective Solution:Developing and maintaining a native mobile app can be costly and time-consuming. A PrestaShop PWA App Builder allows you to create a powerful mobile app experience at a fraction of the cost, without sacrificing quality or performance.
How to Create a PrestaShop PWA Mobile App?
Building a PrestaShop PWA Mobile App doesn’t have to be complicated. With the help of Knowband’s PrestaShop PWA App Maker, you can easily transform your existing PrestaShop store into a progressive web application. Furthermore, these tools are designed to be user-friendly, even for those without extensive technical knowledge.
Customize Your PWA: You can start customizing your PWA to match your brand’s aesthetics. This includes choosing color schemes, fonts, and layouts that resonate with your target audience.
Integrate Key Features:Make sure your PrestaShop Progressive Web Application includes essential features like offline access, fast loading times, and push notifications. These features will enhance the user experience and encourage customers to engage with your store.
Test and Launch:Before launching your PWA, test it thoroughly to ensure that it works smoothly across all devices. Once you’re satisfied with its performance, you can launch your PWA for PrestaShop and start reaping the benefits.
Knowband’s PrestaShop PWA Mobile App
Transform your PrestaShop store into a Progressive Web App (PWA) with Knowband’s PWA Mobile App. Boost engagement with fast loading and a native app-like experience.
A Progressive Web App for PrestaShop offers a powerful way to enhance your store’s mobile experience, increase customer engagement, and ultimately boost your sales. Thus, by leveraging the capabilities of a PrestaShop PWA Mobile App, you can provide your customers with a fast, reliable, and engaging shopping experience that keeps them coming back.
Whether you’re a seasoned eCommerce veteran or just starting out, integrating a PrestaShop PWA Mobile App into your strategy is a smart move. It’s a cost-effective, high-impact solution that can help you achieve your business goals and set your store apart from the competition. So why wait? Start building your PrestaShop Progressive Web Application today and watch your sales soar!
Progressive web apps are one of the most advanced technologies that allow users to have an app-like experience without installing the apps from the stores. On top of that the PWAs are light in size and compatibility and load much faster than the native Android and iOS App. For the same reason, it becomes crucial for the Prestashop vendors to keep up with the latest techno trends and take the next step by launching PWA apps for Prestashop.
At Knowband, we are committed to helping Prestashop store owners excel in this dynamic environment. We’re excited to announce the release of the Prestashop PWA Addon v2.0.1, packed with innovative features designed to enhance your store’s functionality and user engagement.
Why Choose a PrestaShop Progressive Web App?
The PWA offers a seamless, app-like experience directly from their browsers. Thus, with the PrestaShop PWA Mobile App by Knowband, you can combine the best of web and mobile app functionalities and provide your customers with fast, reliable, and engaging experiences.
Here’s a look at the significant enhancements in our latest version of the PrestaShop Progressive Web App.
Major Enhancements in PrestaShop PWA Addon v2.0.1:
Notification Feature for the Customers:
One of the standout features in version 2.0.1 is the introduction of the push notifications tab. This feature allows your customers to explore the order notifications and keep updated about new updates directly in the notification tab available on the home screen.
Furthermore, with a top-notch feature like push notifications, you can engage with your customers in real-time, sending personalized updates directly to their devices.
Whether it’s a new product launch, a flash sale, or an order update, notifications ensure that your customers stay informed and engaged.
Automated Banner Sliders:
Knowband’s PWA app comes with an in-built home page layout editor that allows the store admin to tailor the home page layout as per their business needs with simple drag-and-drop layout components.
Therefore, visual appeal is crucial in capturing customer attention, and our new automated banner sliders do just that. The newly implemented automated banner sliders make it easier than ever to showcase your latest products, promotions, and announcements in a dynamic, eye-catching manner. The automated feature ensures your homepage remains fresh and up-to-date with minimal effort, enhancing the overall user experience.
Login/Sign-Up Pop-Up for Non-Logged-In Customers:
Ease of access is paramount in retaining visitors and converting them into loyal customers. The new login/sign-up pop-up feature simplifies the process for non-logged-in customers, providing a seamless way to access their accounts or create new ones. This enhancement not only improves user experience but also helps in building a robust customer database for targeted marketing campaigns.
Enhanced Review Page:
The enhanced review page in Prestashop Progressive web apps by Knowband makes it easier for customers to leave feedback and for potential buyers to read reviews. Furthermore, the enhanced layout is more intuitive and visually appealing, encouraging more customer interactions and helping to build credibility for your products.
List/Grid View Option on Product Listing Pages:
Flexibility in how products are viewed can significantly impact user satisfaction. Furthermore, with the new list/grid view option, customers can choose their preferred way of browsing your catalog. This customization enhances the shopping experience by allowing users to navigate products in a manner that suits their preferences, making it easier to find what they’re looking for.
Why Upgrade to PrestaShop PWA Addon v2.0.1?
Upgrading to the latest version of Knowband’s PrestaShop PWA App Builder offers numerous benefits. The enhancements in v2.0.1 are designed to make your store more interactive, user-friendly, and efficient.
Improved User Engagement:
With push notifications and enhanced visual elements, you can keep your customers engaged and informed, leading to higher retention rates.
Better User Experience:
Features like the login/sign-up pop-up and list/grid view options streamline the shopping process, making it more enjoyable for users.
Increased Conversions:
An improved review page and automated banner sliders can help in showcasing your products more effectively, driving more sales.
Easy Customization:
The PrestaShop PWA App Creator allows for easy customization, enabling you to tailor the app to your specific business needs without extensive coding knowledge.
PrestaShop PWA Mobile App
Explore Knowband’s Prestashop PWA Mobile App solution for enhancing your e-commerce store’s mobile experience and performance.
The PrestaShop PWA Addon v2.0.1 is a game-changer for online stores, bringing a host of new features that enhance user engagement, improve functionality, and drive conversions. Thus, upgrading to the latest version can provide your customers with a superior shopping experience, ensuring your store stays ahead in the competitive e-commerce landscape.
Experience the future of e-commerce with the PrestaShop Progressive Web Application and see the difference it can make for your business. Upgrade to version 2.0.1 today and start reaping the benefits of these exciting new enhancements.
In the dynamic world of eCommerce, technology continuously evolves, pushing businesses to adapt and innovate to stay ahead. At Knowband, we understand the importance of staying current with the latest technology trends to ensure our clients receive the best tools for success. That’s why we’ve made a significant move for our PrestaShop PWA Addon: transitioning from Angular to React. This shift is designed to enhance the performance of your PrestaShop eCommerce sites, ensuring they are faster, more responsive, and better suited to your business needs.
Furthermore, we promise a more stable and enhanced user experience for your customers in the upcoming React PWA for Prestashop.
Why React?
React’s popularity and efficiency as a frontend library come from its virtual DOM (Document Object Model), which allows for superior performance and faster user interface rendering compared to Angular. On top of that, this transition means that any actions customers take on your PrestaShop site, whether browsing products or completing purchases, will now be smoother and more efficient.
Improved Performance and User Experience:
One of the main advantages of using React for Knowband’s PWA Addon is the significant improvement in loading times and app responsiveness. The reason behind the same is that React allows for a more seamless interaction on mobile devices, replicating a native app’s feel more effectively than ever before. Thus, for any eCommerce business, the speed and fluidity with which users can navigate your site can dramatically affect sales and customer satisfaction.
Streamlined Development Process:
At Knowband, we offer Progressive web app solutions for Prestashop, WooCommerce, Magento 2, and Opencart eCommerce platforms. Furthermore, the amazing fact is that the vendors do not require any kind of technical knowledge to create their Android and iOS web apps using our PWA addon.
Furthermore, the store admin can create the PWA apps within no time just by installing the PWA addon on the store and adding Firebase configurations.
Upcoming Features in the Next Module Build:
Looking ahead, Knowband is excited to introduce new features in the upcoming build of our React-based PrestaShop PWA Addon, which will bring even more capabilities to your online store:
Automated Banner Sliders:
The admin now has the ability to add automated banner sliders on the home page of the PWA app. Therefore, the following feature will help in engaging your customers with high-quality, dynamic banners that are easy to manage and automate. This feature enhances the visual appeal of your site and can be used to highlight promotions, new arrivals, or popular items.
List/Grid View on Product Listing Pages:
You can provide your PWA App users with the flexibility to view products in a format that suits their preferences. A toggle between list and grid views on product listing pages will make it easier for customers to browse products, compare them, and make purchasing decisions based on their personal shopping habits.
Notification Feature:
Keeping your customers informed and engaged with real-time notifications about new products, special offers, and order statuses will be easier with the to be introduced notification feature in the PWA App. Furthermore, this feature ensures that your customers feel connected and valued, which can help increase customer loyalty and repeat business.
Conclusion!
By transitioning from Angular to React, Knowband’s PrestaShop PWA Mobile App Builder Addon is set to offer even more robust features and improved performance. Moreover, these enhancements are designed to help your eCommerce site not just keep up with the market trends but to stay ahead of them, offering your customers a faster, more engaging online shopping experience. Stay tuned for our upcoming module build, which promises to take your eCommerce site to new heights.
At Knowband, we’re committed to providing our clients with cutting-edge solutions that drive success and innovation in the eCommerce space. Explore the benefits of the new React-based PWA Addon and get ready to take your PrestaShop store to the next level.
We’ve always been looking for an alternative to Google Play and Apple Store publications. PWA (Progressive Web Apps) appear to be the best option for the same. This trend is becoming increasingly popular with the ease of breathing. To be sure, many qualified professionals and computer gurus are predicting PWA as the future. Well, if you have a Prestashop store, you can easily invest in the Prestashop PWA Mobile App Builder by Knowband.
The Prestashop PWA Mobile App helps to replicate the specific native-like relationship with program apps. The main advantage is that the shop owner does not have to deal with App Store or Play Store publications. Instead, the Prestashop Progressive Web App may be provided by simply opening the website URL on a mobile application. When customers open the store URL on mobile, they have the option of adding the eCommerce PWA to their home screen.
If you own a Prestashop store, this article will explain the benefits of having a Prestashop PWA Mobile App. Are you ready to know more about them? You can go forth and check them out yourself for a better understanding.
The Essential Advantages of the Prestashop Pwa Mobile App Builder
Increased Conversion Rate and Earnings
The Prestashop PWA Mobile App Maker may help eCommerce firms enhance mobile conversions. Further, providing a chipped away at cycle to provide the app directly from the mobile website directs consumers to the Progressive Web App. The applications, with their layered navigation and single-page checkout, have the potential to be a big pay focus point for eCommerce organizations.
Less Development Effort and Expense
With native shopping apps, eCommerce retailers must incur significant expenses and effort to create and distribute Android and iOS apps. The publication cycle on Google Play and the Apple App Store is fascinating. However, it occasionally turns into a problem for business owners who don’t understand the subtleties. In the current situation, Prestashop PWA Mobile App Creator comes to the rescue. The Prestashop PWA mobile app is easily resolved by accessing the shop URL on a mobile application and adding the logo to the cell phone’s Home Screen. Your mobile form will be converted into a PWA app while the desktop transition remains active.
The Prestashop PWA Mobile App Builder is an excellent alternative for eCommerce companies since it works flawlessly with both Android and iOS. You may use the Prestashop eCommerce PWA App to target the entire world or certain regions. The more users that visit the website, the more Progressive Web App foundations there will be. Further, the apps will be put in the app cabinet with other apps. The functionality will be completely native, and users will just need to launch the app to search for items and other store data.
The Endorsed Business Decision
If you believe that a model will help you grasp the eCommerce PWA, you should consider Twitter, Alibaba, and many others. These are a few of the various firms that are using the Progressive Web App trend to enhance conversions and pay. PWA Mobile Apps may be used by both small and large Prestashop eCommerce businesses to immediately increase sales from mobile customers.
Works Quickly in Any Situation – Even While Offline
eCommerce PWAs are exceptionally light and seldom crash or stop on mobile devices. The development of the Prestashop eCommerce PWA App is sophisticated, ensuring that the items load and run faster when compared to native apps. Faster loading and seamless operation can improve mobile consumers’ purchasing experience at all times. Another important feature is that PWA for Prestashop may run in offline mode – with a weak or non-existent web connection.
Simplified Administration Panel Monitoring in Prestashop Pwa Mobile App
The eCommerce Progressive Web App creates a simple admin panel (backend) for managing and customizing the live Progressive Web App. There is no compelling reason to contact customer support or figure out how to code. The shop administrator only needs to make the necessary changes. Moreover, the live eCommerce PWA will be automatically updated. The landing page design option enables the store administrator to modify the appearance and feel of the live Knowband Progressive Web App for Prestashop at any time without changing the code.
Push Notifications Are an Excellent Way to Advertise
For a long time, push notifications have been an important part of marketing for any eCommerce site. We would have all received push alerts on our mobile phones for installed native shopping apps. This is also possible in your PWA apps thanks to the Progressive Web App for Prestashop. The shop owner will be able to plan and deliver bespoke and predefined push alerts to mobile devices.
Amount Stepper On the Product page
The amount stepper is another expansion that lets clients of the Prestashop PWA Mobile App Builder raise or lowers the number of individual products before submitting them to their container. The +/ – button on the item screen of the Prestashop addon is everything necessary for purchasers.
Add to Cart Button the Home Page and Category Page Eases the Work
The clients can easily add products to the cart from the Homepage and Category pages. Utilizing the module, the clients don’t need to reconsider adding the products because the home screen and class pages currently have the Add to Cart button accessible.
Related Products Accessibility Helps in Cross Selling
With the similarity to the Prestashop Automatic Related Products addon, the Prestashop Progressive Web App permits the administrator to upsell things. Besides, he can show related products on the site for the clients to pick and shop more. Subsequently, more expected sales and incomes.
If you want to stay ahead in the eCommerce market, use Prestashop PWA Mobile App Builder to help you get there. Given the large number of PWA, now is an excellent time to convert your Prestashop store into a mobile application. Provide a perplexing purchasing experience with enhanced features such as quick speed, offline operating, push alerts, SEO, and much more.
Giving users access to an optimised PrestaShop PWA app would improve their mobile purchasing experience. With the help of this PrestaShop PWA App module, you can turn your online store into a user-friendly web application that can be maintained from the backend. These apps offer a number of extra capabilities not found in native apps, including offline mode and platform independence, making them a hassle-free and seamless purchasing option for customers. You can even get in touch with the support team for all your queries at support@knowband.com.
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 eCommerce PWA app i.e. would enhance the mobile shopping experience to the users. This PrestaShop PWA App Builder 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.
–> 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 eCommerce 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 for Prestashop 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 for Prestashop 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 Builder.
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 Builder.
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 Creator Module.
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 Prestashop Progressive Web application (PWA) using their Google Account Credentials.
3.6 Shopping Cart Screen:
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, 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 for Prestashop.
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 for Prestashop 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 Prestashop Progressive Web Application (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 Maker 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.
