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!
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.
Nowadays people are spending a lot more time using mobile devices to access the internet and consuming twice the data they consume on desktop websites. That goes for online shopping standards as well. Using an eCommerce website to bring sales is challenging when you have flaky internet connectivity. And, asking users to install a mobile app is again a conversion killer. PWA (Progressive Web App) fits in between the native mobile app and the website browser and is more likely designed to boost the mobile conversions for eCommerce stores.
Progressive Web App is the new must-have format for the mobile branding of your business. PWA mobile apps have overcome the most alarming problem of distribution. Do you ever go to your browser for Google Maps navigation? Probably not! Research says that most of the users, around 87% choose to browse on native apps. That makes it mandatory to have the app installed on the user’s device.
PWA mobile app gets derived directly from the mobile browser of the website and no need to visit any third-party app store or medium to install the app. Actually, whenever any user opens a PWA active website on a mobile browser, a prompt message asks to “Add App To Home Screen”.
App developers and service workers (Script files) in combination create PWAs for offering a dynamic, smooth user experience while accessing the content through a website/web-app.
Introduction to Progressive Web App
The Progressive Web Applications, also known as PWA are enhanced versions of web apps, developed with javascript. PWAs have extra capabilities like the user can access them offline and also receive push notifications based on the marketing standards.
PWA improves your website’s performance, security, accessibility, and SEO features. It enhances your reliability and workflow. They allow you to work offline and on flaky networks. Progressive web apps are fast and engaging. The PWA’s have seamless navigation and are packed with smooth animations, jank-free scrolling which makes it faster.
Major Advantages Of Progressive Web App
In order to create efficient web applications, progressive web applications (PWAs) are more of a technique that includes a mix of technologies. With an enhanced user interface, individuals can spend more time on websites and see more advertising. They prefer to buy more, and more likely to return regularly with warning notifications.
#1. Reliable Performance
A typical website forces users to wait while it is busy making trips to the server, doing nothing. Each request from the network to fetch an asset or piece of data passes through a service worker, who first checks if the answer to a specific request is already in the cache. As users immediately get real content, even on a bad link, they trust the app more and see it as more reliable.
#2. Fast Loading
This UI isn’t flaky. Scrolling is seamless and the app reacts to user interaction easily. Your Progressive Web App will naturally be faster than the native apps, being lightweight & having a fast loading mechanism. This provides the app users with an exceptional user experience that keeps the services at par.
#3. More Engaging
It looks and feels like a native application. Over the user’s home screen, a PWA can earn a location. By offering a full-screen work environment, it provides a native app-like experience. To keep users active, it makes use of push notifications.
#4. Offline Usage
The pattern of “offline first or “cache first” is the most common technique for serving the user with content. If a resource is cached and offline accessibility can be checked before you download the content. Download it if it’s not already in the cache and save it for future use.
#5. Push Notifications
Push notifications effectively increase the conversion rate of your eCommerce store. PWAs allow the owners of the store to configure and submit unlimited push notifications. They have in-built functionality to automate & schedule them. Using catchy titles & graphics in your notifications can do wonders.
Why you should have a Progressive Web Application?
While a PWA is not a must-have functionality but it is a way to improve your relationship with current and potential customers while also overcoming the difficult challenge of visitors driving away from the website.
Many people become oblivious to the prompts to enter an email list and sometimes do not take the next step to open and read the emails, but you can build real brand loyalty if you can get a customer to use your Progressive Web App.
Google is supporting the PWAs since 2015 and now iOS also allowing them on their web browser. Google scores the Progressive Web Applications better while crawling and other practices. Various Google Chrome extensions are created to support the PWAs.
PWA can be a good idea if you are starting up your new website. It makes sense to distribute your web app to users, in the beginning, to get their feedback before creating your responsive mobile app.
The Progressive Web App cannot be replaced with responsive mobile applications but in a way when you are planning to launch your mobile app, it is a good option to start with.
KnowBand developed PWA for various eCommerce Platforms:
The Progressive Web App Builder extension is available for almost all major eCommerce platforms. The store admin just needs to choose the right plugin and install it to follow the simple guideline for the configuration.
The below-mentioned features are the most prominent ones and are all put together and our Knowband experts developed the Progressive Web Application. The app is lightweight and faster loading and enhanced performance. The PWA Mobile app supports multi-lingual and various currencies that allow you to expand your business globally.
1. Change the Look and feel of the PWA- The store owner can change the colors, add a brand logo and various designs to make it look good. Even the complete home screen design can be edited and changed via a DIY editor. The changes will be reflected in the actual app anytime.
2. Featured Product Listing- Designed in a way that the user can add different product/category-based elements. The store admin can showcase the best sellers, featured products, recently purchased, etc. on the home screen.
3. Easy Installation- The users do not need to visit any third-party app store. Instead, the PWA Mobile App can be added on the phone directly by opening the website on a mobile browser.
4. Reliable and Engaging- The eCommerce PWA Mobile App works flawlessly under no/slow internet connectivity. Even in offline mode, the cached data & previously loaded pages make the content available to app users.
5. E-mail and Social Login- The store owner can allow users to sign up by adding an email address or with their social media accounts.
6. All Payment and Shipping Method Support- Customer often bounces back due to limited shipping and payment methods but with PWA, this is not a challenge anymore. All website payment and shipping methods will be actively functioning on PWA Mobile App.
7. Offline Mode- Even without an internet connection or on a sluggish network, your PWA App will work properly. Users will not have to rely on the internet at all times to shop for app items.
8. One-Page Checkout, Unlimited Push Notifications, Live Synchronization, and Order Tracking like features are the additional advantages of PWA.
9. Cross-selling– It allows you to showcase related products to improve sales on PWA. It also allows the store manager to select the CMS pages from the website and will be optimized automatically.
We have developed the PWAs for many clients and some of the success stories for 2020 are discussed in our previous article.
Conclusion:
Turn the online eCommerce website into the PWA Smartphone App and give mobile visitors a seamless web shopping app. The highly engaging PWAs can be launched from the home screen as you can add an icon for it and they even send push notifications. This is a great example of technology development and has a lot of scope in future advancement.
Progressive Web Apps are still in their infancy, as described, but it’s an exciting time to experiment with the methodologies behind them and see how well they can relate to your web applications.
Please feel free to comment on-thread if you have input on places that you would like to see covered.
Nowadays almost every online business is transitioning its mobile website to a Progressive Web App for all the good reasons. For online shopping, the usage of mobile devices has already surpassed desktops & laptops. Globally, on an average 52% of netizens used their smartphones to shop for something online, based on a report by Statista. To cater to such audiences, Progressive Web Apps are a great medium.
Building & launching Progressive Web Apps is comparatively more convenient than doing the same with Native Mobile Apps. This is also because PWAs are compatible with every kind of mobile device. KnowBand offers a readymade tool to transform your regular eCommerce store into featured PWA shopping apps with:
KnowBand, a leading eCommerce solution provider, has developed & launched a bunch of eCommerce PWA Mobile Apps for its clients & in this writeup, we are briefing on some of the top PrestaShop PWAs that have been developed by KnowBand in 2020. Here are those web apps:
1. Bony Liquors:
Bony Liquor is an online store based in Spain selling beverages, drinks, cigarettes & complimentary snacks to its customers. With the help of experts at KnowBand, they launched their PrestaShop Progressive Web App on their mobile website. Their PWA has many of the latest UI elements that keep the user experience at par. It also has social login options via Facebook & Google accounts. App users can easily shop for the products they need & pay via various payment modes.
The best thing about PWA is that mobile website visitors can install their web app from their mobile website itself. The installed PWA then looks & appears to work just like every other app on users’ mobile devices.
LibreairieZbookstore is an online PrestaShop store where customers can buy books & comics from a wide range of collections available at their store. KnowBand’s PWA module helped them launch their PrestaShop PWA that their store admin can customize anytime as per their needs. The PWAs built using KnowBand’s modules are white-label apps that allow the store owners to modify their apps by themselves without the need for coding.
This eCommerce store is a multi-lingual & multi-currency store that sells fabrics & its cutouts to its customers. Their Progressive Web App built by KnowBand also supports all of the languages & currencies of their website. All of their coupons & vouchers on their website are also supported on their PrestaShop PWA.
WowFresh is an online store built on PrestaShop that sells groceries, snacks & beverages. The store is mainly in the language Spanish. Its mobile site visitors can download its PWA from the ‘Add To Homescreen’ popup /tab on the mobile website.
Kittags is a UK based eCommerce website that sells regular & customizable tags that can be attached to backpacks, strolley bags, luggage, etc. Its website is built on PrestaShop & the store admins at Kittags used the PrestaShop PWA Builder module, developed by KnowBand, on the backend of their website to automatically build & launch their Progressive Web App.
The PrestaShop PWA Mobile App Maker module is an automated plugin that can be used on a PrestaShop website just like any other regular module. Upon installing the PrestaShop PWA module, the store admins get a full-fledged PWA on their mobile website (frontend) & its configuration dashboard on the website backend. They can hence customize their web app using the DIY tools provided on the backend dashboard.
Once the PWA mobile app is made live on the website, mobile website visitors can simply install the Progressive Web App on their mobile device by clicking on the ‘Add To HomeScreen’ button displayed on that mobile website.
The PrestaShop PWA Mobile App module is laced with a number of frontend & backend features. Some of those features include-
#1. Multi-Lingual & Multi-Currency App:
The web apps built using this PrestaShop PWA Maker module by default support multiple international currencies & languages including the RTL scripts like Arabic.
#2. Offline Mode Accessibility:
App users can seamlessly use your PWA even when they are unable to connect to the internet. This allows offline browsing of the pages & even the category pages that users had already visited before.
#3. Unlimited Push Notifications:
The PrestaShop PWA module by KnowBand keeps no limitations on the Push Notifications. Store admins can send an unlimited number of notifications to their app users. These notifications can be created from the backend of this module (installed on the website).
#4. DIY Home-Page Layout Editor:
This DIY tool gives immense control to the store owners & admins when it comes to changing the home-page layout. Multiple components like sliders, banners & grids for product display & banner images are provided. Even the countdown-timer banner tool & recently accessed products slider is included in the list of components. Just drag & drop them to rearrange & configure each of the components without a hassle.
#5. Live-Synchronization:
This module keeps your PWA as well as your PrestaShop website in real-time synchronization with each other. It exempts you from having to manage your PWA manually.
#6. Social Login & Sharing:
App users can login into the app using their Facebook or Google accounts. Also, on every product page, quick sharing links are provided for multiple social media platforms.
#7. All Payment & Shipment Methods Support:
All of the Payment & Shipment methods active on your PrestaShop website will by default be active on your eCommerce PrestaShop PWA.
#8. One-Page Checkout:
To make the checkout experience convenient for the app users, a single page checkout screen is provided on which the app users can even select a pre-saved address. They can easily update the quantity of the product & add or remove coupon codes etc without having to navigate to any other page.
#9. Order Tracking:
This PrestaShop PWA Creator module even offers an order tracking feature to the app users. They can track their active orders from within the web app.
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.
