1.0 Introduction
This automated OpenCart extension is built with the motive to provide ease for online store owners to transform their store into a Progressive Web Application. The eCommerce store into PWA is one of the major advanced technologies that every eCommerce business should look for. The OpenCart PWA Mobile App is actually a web application that doesn’t rely on the third-party App stores (Google Play and Apple App Store). Online shoppers can easily “Add PWA App To Home Screen” and shop products on the go like any other application.
1.1 How OpenCart Progressive Web App (PWA) Works?
Once the eCommerce store is converted to OpenCart PWA Mobile App, whenever any user opens the store URL in the mobile browser, users will be asked to “Add PWA To Home Screen”. It’s that simple to install and use OpenCart Progressive Web App.
1.2 Top Features to Choose OpenCart PWA:
- Faster loading & quick performance
- Fully customizable home screen with DIY editor
- All website shipping & payment methods support
- Unlimited push notifications (Both Automated & Custom notifications)
- Abandoned cart push notification
- Zopim and WhatsApp chat support
- Engaging user-friendly interface
- No dependency on App stores
- Fully branded to your store (White Label)
- Email & Social Login (Google & Facebook)
- Multi-lingual & RTL support
- Offline mode working
- Inbuilt Wishlist Functionality
- Live synchronization b/w website & app
- Automatic Inventory Update
- Multiple devices compatibility
- One-page checkout
- Lightweight application
- CMS pages management
- Related products on Progressive Web App
- User reviews for products on PWA
- Multicurrency Support
- Coupons/Vouchers Support
[IMP] Notes For iOS PWA:
–> iOS devices (iPhone, iPad, etc.) do not offer any inbuilt “Add To Home Screen” prompt. Hence, the PWA Mobile App users need to manually add OpenCart PWA Mobile App to the home screen of iPhone or iPad.
–> iOS does not support web push notifications. Hence, the store admin can only send the push notifications to the Android device, not on iOS.
[NEW UPDATE] OpenCart PWA supports RTL Languages (Arabic, Hebrew, etc.):
The OpenCart PWA Mobile App Creator now supports multiple languages including RTL (Right To Left) scripts like Arabic, Hebrew, Persian, etc. All languages of the OpenCart store will be on the Progressive Web App and other required languages can also be added. The users can choose the language on the Progressive web app and the entire app content will be translated accordingly.
Fully Compatible With KnowBand Multi-vendor Marketplace:
Our OpenCart PWA Mobile App is compatible with OpenCart Multi-vendor Marketplace. Convert your OpenCart eCommerce store into a full-fledged marketplace and launch PWA mobile app for the same. The marketplace sellers will be available on your Progressive Web App and users can simply browse them as well.
Note: OpenCart PWA Mobile Apps are only customer-centric i.e. the users can visit the browse PWA app along with sellers. There won’t be any seller dashboard or management via OpenCart Progressive Web App. The admin can manage the sellers from marketplace web and same will be updated automatically on the PWA Mobile App.
1.3 View OpenCart PWA Demo:
Explore module and PWA app features from the below demo links:
Module Admin Panel: https://opencartdemo.knowband.com/3.0/pwa/admin/
PWA Demo App: https://opencartdemo.knowband.com/3.0/pwa/pwa-app/
(Copy-paste URL in the mobile browser and “Add To Home Screen”)
2.0 Admin Panel Screens:
Explore all settings of Admin panel of OpenCart PWA Mobile App extension along with functionality and work with the below-shared snapshots :
2.1 General Settings:
a) Show/hide Preview: Tap on the eye button to display/hide preview phone in the admin panel.
b) Status: Enable the module to PWA work on mobile devices.
c) Enable Request Log Reporting: Enable error log on mobile.
d) Name for PWA App: Enter name for OpenCart PWA App.
e) Select Layout for Home Page: Choose from pre-added home screen layout for OpenCart Progressive Web App.
f) Enable Tab Bar: Enable tab bar on the bottom of the OpenCart PWA App for seamless navigation.
g) Font for PWA App: Choose a font for OpenCart Progressive Web App(PWA).
h) App Button Color: Choose button color for PWA Mobile App.
i) App Theme Color: Choose theme color for PWA App.
j) App Background Color: Choose the background color for the PWA App.
k) App Splash Screen Color: Choose a splash screen for PWA Mobile App.
l) Enable Logo: Add your brand logo on the header of the OpenCart PWA Mobile App.
m) Image for App Icon: Add app icon image in the admin panel of OpenCart PWA extension.
n) Redirect on Cart Page when Add To Cart: Control redirection of Add To Cart button whenever any user taps Add To Cart button.
2.2 Push Notifications Settings
Push notifications are the best marketing tool for the Progressive Web App(PWA) for OpenCart. 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 OpenCart Progressive Web App (PWA).
B) Order Status Update Push Notification:
Enable/Disable automated Push Notification sent whenever order status from the app gets updated. The OpenCart 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 OpenCart Progressive Web App(PWA) users as per the need. The store admin can configure these notifications on their own & send it to OpenCart Progressive Web App (PWA) users.
2.4 Home Page Layout:
Design and save multiple layouts designs (sale, festivals etc.) and just choose right one from admin panel to update on OpenCart Progressive Web App.
The OpenCart Progressive Web App(PWA) 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 OpenCart PWA Mobile Apps.
Add a new layout from this tab or edit the previously added ones. The home page configuration settings offer the following elements:
Top Categories:
Square Banner:
Horizontal Sliding Banner:
Grid Banner:
Countdown Timer Banner:
Square Products:
Sliding Products:
Grid Products:
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.
2.7 Information Pages:
Add CMS pages on the app and offer informative content to OpenCart PWA Mobile App users.
3.0 Front End PWA App Screens:
3.1 Home Screen:
The home screen of the OpenCart Progressive Web App (PWA) is fully customizable with a 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 a dynamic layout as per the need.
2. Brand Logo:
Use your store logo on the top header of the OpenCart Progressive Web App(PWA).
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 OpenCart 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 to the menu offering relevant content on the App.
1. My Account:
My Account option contains all the users’ personal information including shipping and order. The OpenCart Progressive Web App shoppers can view and update the saved information.
2. Categories:
Categories displayed in the left navigation menu of the OpenCart 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 OpenCart Progressive Web App (PWA) app.
6. Login/Logout:
Users can easily sign-in/sign-out form the OpenCart 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 OpenC Progressive Web App(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 OpenCart 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 OpenCart 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 OpenCart 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.
4. Add To Cart:
This button allows users to add products into the cart. The users can further process the cart for purchase.
5. Product Social Sharing:
The sharing option for the product allows users to share products on multiple social channels.
3.5 Login Screen
The OpenCart PWA Mobile App offers one-tap social login options & make the sign-in/registration process more seamless. The OpenCart 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 OpenCart 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 OpenCart 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 OpenCart 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.
6. Payment Summary:
This section displays the complete breakdown payment details involved with the purchase.
7. 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 OpenCart 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 OpenCart 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 OpenCart Progressive Web App (PWA). 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 OpenCart 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.
