With the growth of the eCommerce industry & mobile apps, online businesses are coming up with major shifts. The latest technology changes are able to provide a pleasant shopping experience to the customers and also helps in increasing sales and revenue. The Progressive Web App is one such technology that is known for responsiveness, fast loading, rapid installation, and other various exciting features. Moreover, the eCommerce PWA Mobile App Builder allows the store admin to easily transform the eCommerce store into Progressive Web App.
The Knowband PWA Mobile App Maker for eCommerce is a ready-made plugin for launching a featured shopping app. The extension gives a native app-like experience in the PWA Mobile App without any sort of technical knowledge. The store admin can handle all changes & configurations from the backend of the module. The changes will be reflected on the live eCommerce PWA Mobile App automatically. It is a very lightweight app and can seamlessly and smoothly run on any device.
[NEW UPDATE] RTL Feature In KnowBand PWA Mobile Apps:
The language plays an important role in grabbing the user’s attention & improve the shopping experience. But, many eCommerce mobile apps can not target a vast mobile audience because of the language barrier. To target the market regionally and globally, the store admin just needs to add their native language on the website and Progressive Web App. With PWA Mobile App Maker, it becomes very handy to launch the Progressive Web App for the eCommerce store.
The store admin can add multiple languages on the PWA Mobile App including RTL languages such as Arabic, Hebrew, Persian, etc. The Progressive Web App supports all the languages available on the eCommerce website. This makes it easy to target the audience from different regions and expand the business reach. Now, the store admin can include more languages on the app other than the website. Here are some of the screens showcasing how the RTL screens will look like:
What is PWA Mobile App Builder & how does it work?
The Progressive Web App Creator offers a great customer experience to the users and it is a ready-made software plugin that allows the store admin to perform all the customizations. All the changes are performed with a few mouse tweaks in the admin panel without any coding knowledge.
Once the eCommerce website has been integrated with the Progressive Web App Builder, all the eCommerce website data/inventory will be automatically fetched on the mobile app. The user can easily install the Progressive Web App just by accessing the store URL on the mobile browser. Knowband offers PWA Mobile App for all major platforms like PrestaShop, Magento 2, WooCommerce, OpenCart. Check more details from the below links:
Other Key Features of the Progressive Web App Creator:
These are some points that you should consider in your Progressive Web App before going for it. These features help the eCommerce business to get a boost in conversion-
1. Easy Branding With Customization Option:
The branding option in the eCommerce PWA Mobile App consists of an app logo, brand name, icon, image, splash screen, background color, etc. This allows the store admin to establish the brand identity in the mind of the customers using the PWA Mobile App. Poor branding strategies can lead to lower traffic and reduce the conversion rate. The whole look of the home screen layout, color, font, etc. can be easily changed from the module admin panel. The right set of banners, images, text can lead to improved app interface and conversions.
2. Tablet & Mobile Compatible:
The eCommerce Progressive Web App is not platform or device-dependent and it is very much lightweight. The eCommerce app can smoothly run on Android/iOS and mobile/tablet and easily get adapted with all multi-screen sized devices.
3. One-Click Login & Checkout:
The PWA Mobile App Builder consists of one-click login options with Facebook & Google. The inbuilt login and registration options such as Google & Facebook and email allow users to access PWA Mobile App with ease.
The eCommerce shopping app allows the customers to fill in only necessary information while performing the transactions. This gives them the benefit of simplified checkout. This option prevents the customer from getting irritated and offers a smooth transaction process.
4. All Payment & Shipping Methods Support:
To gain the trust and reliability of the customers, the store admin can use multiple payment and shipping options in the PWA Mobile App. All the payment and shipping options available on the eCommerce website can be added to the Progressive Web App. The customers can easily shop from the most preferable payment & shipping options.
5. Real-Time Synchronization:
The real-time synchronization feature fetches the eCommerce website product inventory and data into the mobile app automatically. The store admin can easily update the app inventory as of website without the need of putting manual efforts again.
6. Lightweight App with Fast Loading:
The PWA app is very much lightweight and fast loading than the native apps. The Progressive Web App Builder ensures fast app performance and makes it smoothly run on all devices and platforms. The users do not have to depend on the Play Store and App Store to install the eCommerce mobile app.
7. Supports Offline Mode:
The eCommerce PWA Mobile App Builder consists of a cache of previously loaded data. It shows the data to users even if they are not connected to the internet. The user conveniently uses the shopping app with ease and adds products to their wishlist and cart.
8. Zopim and Whatsapp Chat Options:
The Progressive Web App Maker consists of Zopim and Whatsapp Chat features that helps to solve the queries and issues of the customers. Customer support is available 24*7 for mobile shoppers. The feature allows the user to connect with the store admin whenever required.
Conclusion:
This blog consists of eCommerce PWA Mobile App Builder features that ensure fast performance and reliable shopping channel for your mobile audience. Such PWA Mobile App can give a boost and competitive edge to the business. The outstanding features of the readymade plugin help in achieving a good conversion rate and sales from the mobile audience. You can reach us at support@knowband.com in case of any queries.
The PWA Mobile app for eCommerce is designed and developed to provide ease to the store admin by owning a shopping app. The store owners can now easily transform the eCommerce store into the Progressive Web App. The Progressive Web App is one of the most relatable technologies for which every eCommerce store admin should opt for. It offers some amazing features in the mobile app such as offline mode, easy customization options, platform independence, push notifications, etc.
Knowband is a well-renowned company that is especially known for developing readymade plugins for eCommerce websites. We have developed eCommerce plugins for different platforms like OpenCart, PrestaShop, Magento 2, WooCommerce. One such extension is PWA Mobile App Builder. This readymade solution allows the store admin to make their website PWA active and customers will get “Add PWA App To Home Screen” to install and access the shopping app.
Important Notes Of PWA Mobile App for working on iOS Devices:
There have been many myths and confusions in the eCommerce industry about working of PWA Mobile Apps on the iOS devices like iPhone, iPad, etc. Here are some of the major ones to clear out the concept:
1. iOS devices do not allow the “Add To Home Screen” prompt
The PWA Mobile App Builder provides an ease to the customer to easily add the mobile app in their device Home Screen without accessing it from the App and Play store. Once the store URL is opened on the mobile browser, a prompt comes with “Add To Home Screen”. This feature is working smoothly on Android as of now. The iOS app users need to add the Progressive Web App on the iPhone/iPad manually because the iOS does not offer any inbuilt “Add To Home Screen” popup.
2. Web Push Notifications won’t work in iOS
Push notification is one of the best marketing tools of eCommerce PWA Mobile App Builder. The push notification feature of the eCommerce PWA Mobile App Maker is very much useful in sending updates about discounts, offers, cart abandonment rates to mobile shoppers. The store admin can easily configure and send push notifications to Android users, but as of now, this option is not available for iOS users.
What is PWA Mobile App Builder & how does it work?
The Progressive Web App Maker is a modern web technology that offers a native app-like experience via web-app. It is a ready-made software plugin that converts your eCommerce store into a Progressive Web App without any coding knowledge. Moreover, the store admin can get all the advantages of the eCommerce app in the Progressive Web App. Enabling PWA Mobile App in mobile devices allows the store admin to save time, and money and comes with easy customization options.
Once the website is converted into PWA Mobile App, whenever any user opens the store URL on the mobile browser, the “Add To Home Screen” pop-up will be there. The Progressive Web App will be simply added to the mobile device and the same can be accessed anytime to browse or shop products.
Knowband offers the PWA Mobile App Maker for all major platforms like PrestaShop, Magento, WooCommerce, OpenCart. Check the below links for more information:
Other Key Features Of PWA Mobile App Builder (On Both Android & iOS)
There are some key features of the Progressive Web App that are available on both Android and iOS devices. We have mentioned a few of them in this section:
1. Branding with Home Screen Customization:
Branding is one of the most important parts of every eCommerce business because it gives an identity to the eCommerce brand in the mind of customers. The store admin can also take the benefit of the proper branding strategy by adding the brand logo, brand name, icon, image, splash screen, background color, etc. in the Progressive Web App. All these changes can easily be done by accessing the module backend.
The PWA Mobile App consists of several effective customization options from which the store admin can change the look and feel of the app without any change in technical coding. The PWA for eCommerce allows the store admin to perform the changes even if the app is live. The store admin can change banners, images, sliders, intuitive colors, and font, etc., and design the home screen layout from the admin panel.
2. Tablet & Mobile Compatible:
The eCommerce PWA Mobile App is very much lightweight and can easily get compatible with all devices. The eCommerce Progressive Web App is not platform or device-dependent and can smoothly run on Android or iOS and mobile or tablet.
3. One-Click login and Checkout:
Most of the eCommerce mobile apps are not able to provide the easy login and checkout option that can lead to a high cart abandonment rate. The PWA Mobile App Builder offers one-click login solution with Google & Facebook. The store admin can enable the social login options and email login/registration. The simple checkout process allows the customers to fill in the necessary information to complete the transactions. This option only allows the users to fill in the relevant information to complete the order in PWA Mobile App.
4. All Payment & Shipping Methods Support:
The store admin can also include the multiple payment and shipping in the eCommerce PWA Mobile App available on the eCommerce website. The customer can conveniently shop with their most preferable payment and the shipping method. The reliable payment and shipping options improve customer trust and persuade them to shop more.
5. Multilingual & RTL Languages Support:
The eCommerce PWA Mobile App supports all the languages available on the eCommerce website. The Progressive Web App also allows the store admin to add multiple languages including RTL (Right To Left) scripts like Arabic, Hebrew, Persian, etc. The eCommerce merchant can include the languages according to the target region and the needs of the users. The mobile shoppers just have to select the language in the eCommerce app and it will get translated accordingly.
6. Real-Time Synchronization:
The Real-time synchronization ensures all the eCommerce website product inventory and data to be fetched into the shopping app automatically. If any changes are performed in the store inventory, then the same will also get reflected in the front-end eCommerce Progressive Web App. This eliminates the manual efforts of the store admin and saves a lot of time.
7. Lightweight App with Fast Loading:
The PWA Mobile App Builder is very much lightweight and gives fast performance if we compare it with the native apps. The Progressive mobile app allows the customer to install it without worrying about the space in the mobile phones. The PWA app is also not dependent on the Play Store and App Store. The user can directly install it from the eCommerce website.
8. Supports Offline Mode:
The offline mode of the PWA Mobile App allows the users to access the eCommerce mobile app without any internet. The cache of previously loaded screens appears on the Progressive Web App. This option allows the user to conveniently use the mobile app with ease even if they are facing any internet issues.
9. Zopim and Whatsapp Chat Options:
The Progressive Web App Builder provides a convenient chat feature to mobile shoppers. The users can directly connect to the store admin regarding their queries, issues, and confusion and get answers via chat. The store admin can give instant solutions to their concerns. This feature allows the user to connect with the store admin anytime and get the required assistance.
10. Compatible With Multi-vendor Marketplace:
The Progressive Web App maker is also compatible with the multi-vendor marketplace. The multi-Vendor marketplace plugin allows the store admin to easily register the seller by taking some required information. It allows the sellers to get registered on the web marketplace and the same will be fetched on the eCommerce PWA app along with their profile and products.
Here, in this article, we have tried to cover all the concerns related to PWA Mobile App and iOS platform. Along with that, we have tried to narrow down all the outstanding features of the readymade plugin PWA Mobile App Builder. It is the most convenient option to take your business to the mobile platform and help you to achieve the goal that you are looking for.
No one likes to face unpleasant or bad online shopping experiences. The technologies are changing rapidly according to the way customers behave while online shopping. But, running an online eCommerce shop isn’t a piece of cake for everyone. Often, a minor issue like slow page loading time can increase your bounce rate and make you lose revenue. To eliminate this problem Google came up with the solution called, Progressive Web App(PWA) in the year 2015. PWA Mobile App for eCommerce is noted for responsiveness, fast loading, rapid installation, and very exciting features. The qualities like this give it the potential to replace native apps.
Knowband is popularly known for providing the best eCommerce solution to a wide range of eCommerce platform owners. Knowband offers readymade plugins for platforms like Magento 2, PrestaShop, OpenCart, and WooCommerce to provide eCommerce Progressive Web App solutions to its customers.
E-Commerce Progressive Web App(PWA) gives you the look and feel of the app (as of native) with all the advantages of responsive websites. It is available for almost all browsers with a quick installation facility. The user interface of the PWA Mobile App looks like an app and can also work offline, even with a slow or no internet connection. It also provides mobile push notification features that provide updates to users on a timely basis.
#1. Customer Engagement and push notifications:
Customer engagement is one of the top priorities in the current eCommerce scenario. There are several ways through which store admin can improve customer engagement using a Progressive Web App. The store owners can use push notification features to inform about current website updates, discounts, stocks, and sales. Moreover, the “Add to Home screen” pop-up makes it easier for customers to install the app instantly on the PWA Mobile App.
#2. Improved security with no installation:
It is important to gain the trust of customers with Progressive Web App Builder. The sale is more likely to improve when customers trust and rely on your PWA Mobile app. So, the PWA mobile app considered all the security parameters to be followed to gain customer trust. Progressive Web App Maker can be easily added to the user’s mobile home screen with a few clicks and users can easily get away from lengthy installation processes.
#3. Higher conversion rate:
PWA Mobile Apps are fast loading and offers high performance, unlike native apps. It also uses website content efficiently that positively influences users and boosts conversion rates.
#4. Seamless Performance:
Users can access the Progressive Web App Maker allowing the users to access the required data even when they are not connected to the internet or an unstable network. The PWA Mobile App works perfectly in those areas with an unstable network connection and allows users to perform several activities on the app.
#5. Improved Search Ranking:
Google discovers and crawls Progressive Web App(PWA) easily and effortlessly because each page of a web app has a unique URL. This means that you can get much-needed traffic in your web app.
#6. Cost-effective:
Progressive Web App Maker is a lot cheaper than native app development. The native app requires a separate version of iOS and the Android operating system but the PWA app consists of only one cross-platform to launch. It is a great way to cut down the expenses of developing applications. Basically, a PWA Mobile App can be simply derived by opening the website on a mobile browser.
Top 10 PWA examples of online marketplaces
As you can see there are many benefits of the Progressive Web App in the eCommerce industry. There are many global brands that integrate PWA on their websites. We have mentioned top global brand examples that showed shocking results after integrating PWA into the website.
Jumia:
Jumia is an African eCommerce website, launched in Nigeria in 2018. It has expanded to over 14 countries, including Morocco, Kenia, South Africa, and Egypt, etc. The obstacle in Jumia growth was its target audience visiting the website from 2G internet connection and the customers are having low-end phone experience with data limitations issues. Jumia eliminates the obstacle by providing a smooth user experience through PWA for eCommerce. After that Jumia became hit and visitors spent more time on the app that also showed a significant decrease in bounce rate.
33% higher conversion rate
50% lower bounce rate
12X more users than native apps (Android & iOS)
5X fewer data used
2X fewer data required to complete the first transaction
25X less devices storage required
Flipkart:
Flipkart is considered one of the top e-commerce platforms in India. It is giving neck to neck competitions to websites like Amazon. Flipkart got abandoned by many users in 2015 because it is not able to compete with native apps. The reason is users are not getting a fast and responsive user experience.
After that Flipkart came with a solution called Flipkart Lite. It is a progressive web app that is built to provide a great user experience to customers and it became a huge success. PWA apps run fast, work offline, and help to re-engage customers. The push notification feature in Flipkart gives timely and relevant updates to their customers and also works in offline mode.
3x lower data usage
40% increase in user engagement
70% more conversion rate
3x more time spent on site.
Ali Express:
AliExpress was launched in China in 2010. It is a global retail company that has gained popularity in top countries such as Russia, Brazil, and the US. AliExpress is often compared to eBay because buys can directly sell their products to customers. The company gained popularity and implemented an eCommerce PWA Mobile App solution to its website to cater to the needs of both web and mobile customers. After that Ali express rebuilt its online presence with a fast and reliable eCommerce Progressive Web App
82% increase in iOS conversion rate
104% more new users across all browsers
2x more pages visited
74% increase in time spent
OLX:
It is another brand that has adopted the PWA Mobile App Builder technology. The company headquarters is in Amsterdam and operates in approximately 45 countries. In 2014 South African media group called Naspers acquired 95% of OLX. The OLX strategy is to allow customers to buy used products at a lower cost. They have also included a chat option where the customers can negotiate product prices.
The majority of traffic in OLX comes from mobile devices and the figure was continuously growing. The only problem was the website’s slow speed leads to more bounce rate. The company came up with an eCommerce Progressive Web App solution and provided an “Add to home screen” feature that increased the engagement rate.
250% increase in engagement rate
23% less time until a page is interactive
80% lower bounce rates
146% increase in CTR (click-through rates) on Ads
Alibaba:
Alibaba serves millions of buys and sellers located in 200 countries. It is the world’s largest global wholesale platform. It serves more than 2 million buyers around the world. The majority of users are using Alibaba via mobile devices so they came up with native Android and iOS apps. Soon, the company realized that customers do not want to download apps because of its large size mobile application. Customers can easily perform the transactions from their web browsers rather than downloading the app which is more than 60 MB.
Alibaba decided to opt for the eCommerce PWA Mobile App Builder platform. Alibaba integrated features such as Add to Home Screen, Push Notifications and the motive is to engage more customers and to provide a fast and reliable mobile experience. And Alibaba is successful to engage visitors and impress their users with a reliable and fast mobile experience.
76% higher conversion rate.
14% more monthly active users on iOS
30% more monthly active users on Android
4X higher interaction rate
Pure Formulas:
The Pure Formulas company is specialized in providing health and nutritional supplements, vitamins, minerals to buyers. The problem with Pure Formulas is that the checkout process is too slow and page loading time is very much high and that results in low conversion and high cart abandonment rates.
Pure Formulas come up with the solution to that after implementing Progressive Web App Builder on their website. Progressive Web App Maker lowers the cart abandonment rates. Customers can now easily find needed health products. Customers can also plan a menu according to their preferences, health state, and dietary needs.
+23% to mobile revenue;
14% to the conversion rate;
+9% to the average order value.
Garbarino:
Garbarino is an Argentina-based company that offers a wide range of products from furniture and electronics to toys and DIY items. After implementing Progressive Web App Creator, Garbarino obtains better performance, decreases in load time, and visitors navigate more on the website.
The interface of the web app is very much user-friendly, convenient and the features like filter, discounts help the customers to pick up the best product from the list.
27% Conversion rate increased
35% increase in Pageviews increased
9% decrease in Bounce rate decreased
Snapdeal:
Snapdeal is the largest online marketplace in India that offers multiple products to its customers. The range of products varies from electronics and kitchen appliances to clothes and online entertainment. With the increase in the rate of user engagement, Snapdeal decided to implement eCommerce PWA Mobile App Builder technology on their website.
This was a fortunate decision for Snapdeal because Progressive Web App Builder provides a pinned footer menu, convenient filter menu, fast loading page and etc to the web app. Along with that users can also visit the web app even in offline mode. It added value to the user experience and enhances their shopping experience.
UK Meds:
The pharmaceutical industry is no longer behind in terms of technology and UK Meds is the live example for that. The goal of UK Meds is to deliver the medicine to the customer’s doorstep conveniently and easily. The UK meds consist of all important features such as consultations, treatment, placing an order and getting it delivered, etc.
UK Meds consists of all those things that a customer requires and to cater to all the needs of the customer without leaving behind in technology, UK Meds decided to implement Progressive Web App. It makes their web app easy to load, enhances the user experience, improves revenue, etc.
5 Miles:
5 miles builds a bridge between nearby sellers and buyers. It is an online marketplace that is used to trade such things as cars, clothes, kitchen items, second-hand stuff, and so on. But the company was not able to deliver a better user experience to the customers. Because of the low retention and high bounce rate, the company decided to switch to native apps, but this strategy turns out to be very expensive and challenging.
After getting inspired by technology trends, 5 Miles opted for PWA for eCommerce and it turns out to be a boon for them. The web app became fast and efficient and also showed a good decrease in bounce rate. The app also allows you to participate in a real-time bidding process, the bids change in flash and you may also get a drop-dead bargain.
50% decrease in bounce rate
30% increase in conversion rate
30% increase in the time spent
Conclusion –
If you want to deliver a fast and seamless shopping experience on mobile, then you must opt for a Progressive Web Application. An eCommerce PWA Mobile App can bring much more to the table than you have ever thought of. We have mentioned worldwide brands that get benefits from PWA and you can also get the same by implementing it on your website. Knowband is here to turn your ideas into reality. If you invest wisely you are also able to obtain profit from PWA. You can contact us at support@knowband.com.
This readymade plugin is designed & developed by KnowBand to convert your running WooCommerce store into a feature-rich Progressive Web Application. Once the eCommerce store is transformed into PWA Application, whenever any user opens the store URL in the mobile browser, the concerned person will be asked to “Add PWA To Home Screen”. Once the WooCommerce PWA Mobile App is added to the home screen of the mobile device, the user can browse the store on the app like any other application.
The WooCommerce PWA Mobile App is a web application that actually doesn’t rely on app publish on Google Play and Apple App Store. The users can simply add the Progressive Web App to the mobile device and use like any other application.
1.1 Compelling Features to Choose WooCommerce PWA:
– Faster loading & quick performance
– Fully customizable home screen with the DIY editor
– All website shipping & payment methods support
– Engaging user-friendly interface
– No dependency on App stores
– Fully branded to your store
– Email & Social Login (Google & Facebook)
– Multi-lingual & RTL support
– Offline mode working
– Live synchronization b/w website & app
– Both android and iOS compatible
– One page checkout
– Lightweight application
– CMS pages management
1.2 View WooCommerce PWA Demo
Explore module and PWA app features from the below demo links:
–> 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 won’t be received on the PWA installed on the iPhone or iPad.
[NEW UPDATE] WooCommerce PWA supports RTL Language Scripts:
The WooCommerce Progressive Web App Creator now supports all worldwide languages including RTL (Right To Left) ones like Arabic, Hebrew, Persian, etc. The store admin can now even add RTL languages on WooCommerce PWA Mobile App.
2.0 Admin Panel Screens:
Explore all settings under Admin Panel of WooCommerce PWA Mobile App and check how they work with the help below detailed screenshots:
2.1 General Settings:
a) Show/hide Preview: Tap on the eye button to display/hide preview phone in the admin panel. b) Enable/Disable: Enable the module to PWA work on mobile devices. c) Enable Request Log Reporting: Enable error log on mobile. d) Redirect on Cart Page when Add To Cart: Control redirection of Add To Cart button whenever any user taps Add To Cart button. e) Display Short Description: Enable and display a short description for the product (if added on the website product page). f) Display Add To Home Screen Pop Up: Offer pop-up message “Add To Home Screen” and allow users to add the PWA app on the mobile devices. g) Enable Logo: Add your brand logo on the header of the WooCommerce PWA Mobile App.
h) Splash Screen Background Color: Choose and set the color for the splash screen of the WooCommerce Progressive Web App. i) Name for PWA App: Enter the desired name for WooCommerce PWA App. It will be displayed once the user add app on the mobile devices. j) Image for App Icon: Add app icon image in the admin panel. k) Select Font of the App: Choose the font for your WooCommerce PWA Mobile App. l) Select Layout for Home Page: Choose from pre-added home screen layout for the WooCommerce PWA App.
m) App Button Color: Choose button color for PWA Mobile App. n) App Theme Color: Choose theme color for PWA App. o) App Background Color: Choose the background color for the PWA App. p) Enable Tab Bar: Enable tab bar on the bottom of the PWA App for quick and easier navigation. q) Custom CSS: Enter CSS code to improve look and feel of web-view pages of PWA App like web-view payment, CMS pages, etc.
2.2 Push Notifications Settings
Push notifications are the best marketing tool for the PWA app for WooCommerce. The store admin can simply promote the store products and deals to app users and bring more sales and revenue. Enter all details in push notification settings by creating a Firebase project:
How to set up a Firebase Account?
Step 1: Login Google Firebase
Step 2: Create a New Project
As you click on Add Project, the following dialog box will pop up:
It will take a few seconds to create the project. Once the project is ready, click continue.
Step 3: Manage Project Settings
Once the project is created, click on Project Settings.
Step 4: Go to Authentication options:
Step 5: Find Firebase Keys
In the project settings, click on Cloud messaging settings. From here, you can directly get the server key.
Step 6: Add your Web-App to Firebase
Step 7: Get other firebase related details and paste the same in PWA module admin panel.
Step 8: Get firebase server key from cloud messaging tab in Settings:
Step 9: Add your domain in authentication>>sign-in.
A) Successful Order Push Notification:
Enable/Disable automated Push Notification to be sent to app users whenever they place successful order from the WooCommerce PWA app.
B) Order Status Update Push Notification:
Enable/Disable automated Push Notification sent whenever order status from the app gets updated. The WooCommerce PWA mobile app users can keep an eye on the details of previous orders.
C) Abandoned Cart Push Notification:
Enable/Disable automated push notification sent to users abandoning products in cart without successful purchase. This push notification will be sent to users automatically after the entered time interval.
2.3 Push Notifications History
Complete push notification history of successfully sent push notifications will be seen here. The store admin can keep a track of previously sent push notifications from here.
A) Send Notification:
Personalize and send push notification manually to PWA app users as per the need. The store admin can configure these notifications on their own & send them to WooCommerce PWA app users.
2.4 Home Page Layout:
The WooCommerce PWA Mobile App offers a customizable Home Screen whose layout can be designed from the admin panel with a few mouse clicks and drag-drop. The attractive layout as per running festival, sale, occasion etc. can surely help in improving sales through WooCommerce PWA Mobile Apps.
Add a new layout from this tab or edit the previously added ones. The home page configuration settings offers the following elements:
a) Top Categories:
b) Square Banner:
c) Horizontal Sliding Banner:
d) Grid Banners:
e) Countdown Timer Banner:
f) Square Products:
g) Sliding Products:
h) Grid Products:
2.5 Information Pages:
Add CMS pages on the app and offer informative content to WooCommerce PWA Mobile App users.
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.
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 Screens:
3.1 Home Screen:
The home screen of the WooCommerce PWA Mobile App is fully customizable with the DIY editor as explained above in Admin Panel screens. Change app home screen look & feel anytime and offer more user-friendly & sale driven appearance.
1. Custom Layout:
Using various banner, slider, product elements, the store admin can create dynamic layout as per the need.
2. Brand Logo:
Use your store logo on the top header of the WooCommerce PWA app.
3. Shopping Cart Bag:
The shopping cart icon on the top-right corner of the home screen allows users to access cart screen and check added products.
4. Left Navigation Menu:
Browse the categories displayed in the PWA app with left navigation menu browsing.
3.2 Accordion Menu (Navigation Bar):
The WooCommerce PWA Mobile Apps comes with seamless and proper categorization available. The users can find relevant categories from the left navigation menu and browse products. Various CMS pages can also be added in the menu offering relevant content on App.
1. My Account
My Account option contains all the users’ personal information including shipping and order. The WooCommerce Progressive Web App shoppers can view and update the saved information.
2. Categories
Categories displayed in the left navigation menu of the WooCommerce Progressive Web App are the same as available on the eCommerce store.
3. CMS Pages
Various CMS pages like About Us, Contact Us, Terms & Conditions, etc. can be accessed from here. These information pages can be added from the admin panel of the extension.
4. Language(s)
The language option allows PWA app users to view the web-app in their desired language.
5. Currency(s)
All available currencies on your website are displayed here on the WooCommerce PWA app.
6. Login/Logout
Users can easily sign-in/sign-out from the WooCommerce PWA app via this option.
3.3 Category Screen:
Clutter-free category screens with the list and grid view allow the users to choose what’s best for them from a specific category. The entire store inventory will remain in-sync with WooCommerce PWA Mobile App and new additions and changes even get updated in real-time.
1. List & Grid View:
The categories on the PWA app for WooCommerce can be browsed in both list and grid view.
2. Product Sorting:
The sorting option allows online shoppers to narrow down the products in the desired sort order and find the right one.
3. Product Filter:
The WooCommerce PWA Mobile App offers the option to filter products simplifying the product search. Online shoppers can find the desired products under categories using filters for various attributes like size, color, price, etc.
3.4 Product Screen:
The product screen of the WooCommerce Progressive Web App is as simple & intriguing as it could get. With all the necessary options and information about the product, it becomes a matter of minutes for users to be sure about the product which he/she is about to purchase. Multi-images are available for the product with In stock and Out of stock 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 minds about the 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 products into the cart. The users can further process the cart for purchase.
6. Product Social Sharing:
The sharing option for the product allows users to share products on multiple social channels.
3.5 Login Screen
The WooCommerce PWA Mobile App offers one-tap social login options & make the sign-in/registration process more seamless. The WooCommerce Progressive Web App offers Google and Facebook login.
1. Login:
The app users can easily authenticate & login to 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 WooCommerce PWA App. The sign-up form asks for only the necessary details to create an account.
3. Login with Facebook:
The users can log in to the PWA app using their Facebook Account Credentials.
4. Login with Google:
The users can log in to the PWA app using their Google Account Credentials.
3.6 Shopping Cart Screen:
The Shopping Cart screen of the WooCommerce PWA Mobile App will display all products added into the shopping cart. The app users can view Product name, quantity, total price & shipping cost. This screen has the following options:
1. Apply Voucher:
This option allows 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 the “Remove” option.
5. Continue Shopping:
The app users can leave the cart to browse more products on your app.
6. Continue To Checkout:
The PWA app users can proceed further to the checkout & payment screens just by tapping the “Continue To Checkout” option.
3.7 Checkout Screen
The Progressive Web App for WooCommerce has a simplified single-screen checkout with only relevant information. The app 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 app users get to view product details before making payment.
3. Shipping Methods:
All available shipping methods are displayed here. Users can choose the one suiting their needs.
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.
5. Payment Summary:
This section displays the complete breakdown payment details involved with the purchase.
6. Proceed To Payment:
The 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 the WooCommerce PWA App has all web-view payments available on the store. Online shoppers can find similar payment experiences on both websites and apps.
3.9 My Account Screen
My account screen of the WooCommerce PWA Mobile App allows online shoppers to view their complete details saved on the Progressive Web App. This screen also displays a list of previous app orders as well.
1. Personal Details:
Users get to view & update their pre-saved personal details on PWA Mobile App.
2. Shipping Address(s):
The app users can see the complete list of pre-saved shipping addresses in the PWA app.
3. Order Details:
The app users can get to view the complete list of the previously placed orders from the PWA app and their details.
4. Re-order feature:
There is a direct re-order button on the My Account screen of the PWA app. All the previous products under this order will be added into the cart with just a single button.
3.91 Order Detail Screen
The order details screen of the WooCommerce Progressive Web App provides complete details of specific orders from the PWA app. Users can easily view shipping address, product summary, shipping and payment method, and total cost summary, etc. It even offers the option to keep a track of status of order and delivery.
