Magento 2 Mobile App Creator- User Manual

1.0 Introduction

Have you recently migrated to Magento 2.x from Magento 1.x? It’s time to build native Apps for your store. We all are aware that eCommerce mobile apps are one of the most unavoidable needs of online businesses today. So, if you are a Magento 2 store owner and planning to take your website to the Mobile platform, KnowBand has made the job simpler for you. Find out how?

The Magento 2 Mobile App Builder extension lets you upgrade your eCommerce store into a pair of featured & flawless Mobile Apps. The fully functional Android & iOS apps developed with Magento 2 Mobile App Maker would definitely fulfill all the requirements for the growth of your store. This is the most seamless solution for mCommerce development. All you need to do is to specify your business requirements and leave the rest to our skilled development team.
The Mobile Apps for Magento 2 stores developed by this ready-to-go solution provide a flawless and reliable shopping experience to the users. This will definitely boost conversions & sales of your store.

1.1 New Updates:

a) Home Screen Layout Backend Preview:

In the latest version (v1.0.6) of Magento 2 Mobile App Creator, the store admin can preview the home screen layout there only while setting up it from the admin panel. No need to open the app, refresh every time to visualize the changes. Just design your home screen with more ease and change it whenever required.

b) Flutter Update:

We have recently updated our both Android and iOS Mobile Apps to the latest Mobile App Development technology Flutter. Now, users can experience robust speed with all the updated features.

c) QR Code/Bar Code Scanner:

Now, the mobile app users can also search their favourite data by searching via QR/Bar codes. Android and iOS App users can find the updated option on the search page.

1.2 Module Installation

The steps to install the Magento 2 Mobile App Creator module are mentioned below:

Buy the Magento 2 Mobile App Builder module from KnowBand.
The package has a zipped file that contains the user manual and the source code of the Mobile App Builder Extension. Unzip the package.
Create a folder{Magentoroot}/app/code/Knowband/Mobileappbuilder
Upload the extracted content in the above folder via FTP manager (like Filezilla or WinSCP – download here: https://filezilla-project.org/).
Now run the below commands to install the plugin:
php -f bin/magento module:enable –clear-static-content Knowband_Mobileappbuilder
php -f bin/magento setup:upgrade
php -f bin/magento setup:di:compile
php bin/magento setup:static-content:deploy

The extension is now installed and ready for use. In Admin Panel go to “Knowband > Mobile App Builder”. You can now configure and use the Magento 2 Mobile App Builder module.

2.0 Magento 2 Mobile App Demo

Before going for the purchase of the Magento 2 Mobile App Maker extension, it’s better to test our demo apps.

2.1 View Our Demo Store working on Apps

We have developed two demo apps & set us a demo store for seamless testing of the module before actual Mobile App development. Follow the steps mentioned below:

Step 1: Download and install Nautica Magento 2 Mobile Apps on your testing device. Here, are the links to Magento 2 Android & iOS Apps:
Apple App Store
Google Play Store

Step 2: Open the App and tap “View Demo” option. That’s it, you can easily test all the app functionalities now.

Note: To access the Admin Panel of KnowBand’s Magento 2 Mobile App Builder on our demo store, visit here.

2.2 View Your Store working on Demo Apps

Want to test your own website on these demo Mobile Apps? We even made that possible in just 3 simple steps:

Step 1: Download & install FREE Magento 2 Mobile App Builder plugin on your Magento 2 website.

Step 2: Install the Demo Apps (links in the previous section) on your mobile device. Open the App & enter your website URL in the “View Your Store” option.

Step 3: Tap “View Your Store” and start analyzing your own website working on our demo apps.

Note: This Free version of Mobile App Builder is just for the demo purpose & no APK/IPA files will be provided with this module. In order to get your own APK/IPA files, you need to purchase the paid version of the Magento 2 Mobile App Builder.

3.0 Build your own Magento 2 Mobile Apps

After successful testing of Magento 2 Mobile App Builder, build a pair of mobile apps for your website. KnowBand has made it as simple as it could get.

Step 1: Purchase & Install Module on your website.
Purchase Magento 2 Mobile App Builder & install the same on your store using your store FTP details.

Step 2: Share your App Specifications
Share some details regarding app development with us through a pre-requisite form.

Step 3: Get Your Android & iOS Apps in 1-2 days
The final APK & IPA files can be shared with you in just 2-3 days. You can review the same & suggest changes (if any).

Note: You can publish these APK/IPA files on respective app stores. Refer to the following links for the same:

How to publish Android app on Google Play Store?
How to publish iOS app on the Apple App Store?

If there is any issue while app publishing, we would get it done for you.

4.0 Admin Panel Screens

After the successful installation of Magento 2 Mobile App Builder, the store admin will get the following tabs for customization:

4.1 General Settings:

Enable the Extension: Enable the Magento 2 Mobile App Builder to make the mobile apps work on the user’s devices.
Redirect to Cart Page when Add To Cart: Whenever any user clicks on Add To Cart button, it will be redirected to the shopping cart screen.
Display Short Description: Enable to display of the short product description on the product screen.
Enable Request Log Reporting: Enable the error log on the mobile apps which is used to identify & rectify any abnormal behavior of the mobile apps.
Show App Preview: This option will show/hide a preview of the app.
Enable/Disable Spin and Win: If you are using Knowband’s Spin and Win module, this option will enable/disable the spin and win pop-up in the apps.
Enable Social Login: This option will enable/disable social login options in the apps.
Enable/Disable Fingerprint Login: Enable Fingerprint login on the Mobile Apps.
Enable/Disable Phone Number Login: Enable Phone Number login on the Mobile Apps.
Mandatory Phone number at registration: The store admins can make the mobile number optional/mandatory by the help of the following button.
Select Layout for Home Page: Choose the desired Home Screen layout for the mobile apps.

Disabled Shipping Methods: The admins can disable specific shipping methods for the app only from the following button.
Enable Live Chat Support: Enable/disable Zopim(Zendesk) chat option on mobile apps. You need to enter the chat API key provided along with the final apps.
Enable WhatsApp Chat Support: Enable/disable the WhatsApp chat option on mobile apps.
Enable Logo: Enable logo on your mobile apps. You can upload the logo image which will be displayed on the header of the mobile apps.
Select Font of the apps: With the help of the following button, the admins can change the fonts of both Android and iOS Apps.
App Button Color: Choose the button color for your apps.
App Theme Color: Choose the theme color for your apps.
App Button Text Color: Choose the button-text color for your apps.
App Background Color: Choose the background color for your apps.

With the Menu Settings tab in Magento 2 Mobile App Maker, you can easily add and manage CMS pages on your mobile app. The Contact Us page can be enabled or disabled as per your preference, and you can also add new CMS pages to the menu. This allows you to provide your customers with easy access to important information such as your store policies, FAQs, and more. Additionally, you can customize the order of the menu items to make it easier for your customers to navigate through the app.

4.3 Push Notifications:

Firebase Server Key: Enter the Google Firebase key to send push notifications to the Magento 2 Mobile App users. This key would be provided to you along with the paid version of the module. You can skip this setting with the Free version of Magento 2 Mobile App Builder.
Order Success Notification: Configure automated Order Creation push notification which would be sent automatically to the user’s apps who successfully create an order through your app.
Order Status Update Notification: Configure Order Status Update notification which would be sent automatically to the users whenever there is an update in order delivery status.
Abandoned Cart Notification: Configure automated Abandoned Cart notification which would be sent automatically to the users who left their products in the cart.

4.4 Push Notifications History:

In the following tab, we have provided the option to check all the previously shared notifications along with the date and time. Moreover, by clicking on the send a new notification, the users can also send new notifications to the app users.

We have also added a special feature in the Magento 2 mobile app Builder module. Now the admins can send new notifications immediately or can also schedule them for the future.

4.5 Home Page Layout

The Magento 2 Mobile App Builder offers a customizable Home Screen with all sorts of design elements in the module backend. You can create any layout for your mobile app’s Home Screen & offer it to your users.

After adding the layout, click on the Edit option & start configuring various designing attributes for your Magento 2 App Home Screen.

The store admin can configure the following design elements under the Home Page Layout tab of the Magento 2 Mobile App Builder:

Top Categories:

These square-shaped categories can be used to highlight all the major categories of your website on the Home Screen. These categories can be added from the module backend as shown in the below snapshot:

The Banner can be displayed in square form on the Mobile App Home Screen. The landing page, image can be configured as shown in the below snapshot:

The sliding banners can be displayed on the mobile app Home Screen which can be configured as shown in the snapshot below:

These are the banners for the app home screen displayed in the form of a grid listing & can be customized as shown in the below snapshot:

Display a countdown timer banner on Magento 2 Mobile App home screens & offer a time-based/flash sale to your users:

Square Products:

The products can also be listed in the square listing on the Mobile App Home Screen. This can be configured as shown in the snapshot below:

Sliding Products

The products can be displayed in the slider view on the mobile app Home Screen & can be configured from backend panel.

Grid Products:

The products can be displayed in the grid view on the Mobile App Home Screen:

Products Recently Accessed:

The Magento 2 Mobile App Creator offers the recent products tab on the mobile app home screen which displays recent products viewed by the user. You can just add the element in your layout to display the same on the home screen.

Note: The store admin can add up to 20 elements while designing a layout in the backend panel.

5.0 Mobile App Screens

5.1 Home Screen:

The Magento 2 Mobile App Builder brings the complete flexibility to design the mobile app Home Screen on your own. The Android & iOS mobile apps can be designed from the backend panel using the following designing attributes:
–> Top Categories
–> Square Banners
–> Sliding Banners
–> Grid Banners
–> Square Products
–> Sliding Products
–> Grid Products
–> Countdown Timer Banner
–> Recently Viewed Products

The positioning of all the elements can be changed with a simple drag & drop.

a) Dynamic Layouts: Create & save various alluring & intuitive layouts in the backend & change your app’s look & feel in just one click.

b) Store Logo: Add your store logo image in the module backend & display the same on the header of the apps.

c) Search: The Magento 2 Mobile Apps have keyword search options that allow users to search for products without any hassle. Along with Keywords, the users can also search products via QR and Bar code scanner.

d) Wishlist: Wishlist option in Magento 2 Mobile App lets you bookmark the desired products for future purchases.

e) Shopping Cart: The users can easily access the shopping cart from the top-right corner of the home screen.

f) WhatsApp: The Magento 2 Mobile App Maker offers two live chat options in mobile apps with Zopim & WhatsApp. The app users can directly message you regarding any issue or query regarding purchase.

The Magento 2 Mobile App Maker offers an Accordion Menu in the mobile apps which displays the store categories on the Mobile Apps. Your app users can easily browse all the categories from this menu & access all CMS pages. This menu has the following options:

Categories: All sorts of categories on your store are fetched on the Android & iOS mobile apps as well. The apps even offer a multi-level categorization & allow the users to browse products with ease.

CMS Pages: All CMS pages on your store like About Us, Contact Us, Terms & Conditions, etc will be displayed on this Menu.

Language(s): The Magento 2 eCommerce Mobile Apps are both multi-lingual & RTL languages supported. The users can choose the desired app language & the entire app contents will be translated accordingly. Every sort of language available in the store is displayed here under this menu.

Currency(s): Just like multiple languages, all sorts of currency options running on your website will be displayed in Magento 2 Mobile Apps. This allows app users to make payments with the desired currency option.

5.3 Category Screen:

All categories on your Magento 2 website are fetched on the Magento 2 Mobile Apps as well. The category screen of the Magento 2 Mobile App has two views: Grid & List view. This screen has the following options:

Grid & List View:

The products can be displayed in both grid & list view.

Sort:

The sort option in Magento 2 Mobile Apps allows the users to view products in the Low to High or High to Low categories.

Filter:

Filter down the category products with various attributes like price, cost, etc. & search for desired products without any effort.

5.4 Product Screen:

The Magento 2 Mobile App product screen is completely clutter-free & appealing. Every product has multiple images displayed along with its name & price. The product availability is also displayed as “In Stock” or “Out Of Stock” along with the price discounts. The Product Screen has the following options:

Product Options:
Various options related to the product like size, color, etc. are displayed on the product screen. These options are the same as those available on your website.

Short Description:
Users get to read the short description of your product to quickly make up their minds. The Magento 2 Mobile App displays both short & full descriptions of the products.

Product Info & Care:
All the information related to the specific product is displayed in this section. This is the same information as on the website.

Add To Wishlist:
The users can even add the products to the wishlist bag from here. The products added to the wishlist are bookmarked for future purchases.

Add To Cart:
The Add To Cart button allows you to add products to the cart which can be processed further in successful order creation.

Product Social Sharing:
The Magento 2 Mobile App has the option to share the products on different social platforms, Bluetooth & e-mail. The users can share the products with their friends & relatives & bring potential users to your store.

5.5 Wishlist Screen:

The Magento 2 Mobile App Builder offers a wishlist bag allowing the users to bookmark products for future purchases. The app users can view the list of all wishlist products from this screen. It has the following options:

Add To Cart:
The app users can add the wishlist product directly into the shopping cart with Add To Cart option.

Remove From Wishlist:
The users can even remove any wishlist product with a remove option if required.

The Magento 2 Mobile App Maker offers various one-tap login with the following options:
1. E-mail Login
2. Google & Facebook Login
3. OTP & Fingerprint Login

Login:
The Magento 2 App users can authenticate & access using e-mail sign-in credentials.

Sign Up:
All the new users can sign-up & create their account on the store from the mobile App. The sign-up form for the Magento 2 Mobile App is fully seamless.

Login with Phone Number:
Your Magento 2 Mobile App comes up with a phone number login option allowing the users to verify OTP.

Login with Fingerprint:
Your app users also get an option to log in with a fingerprint. This biometric authentication makes the app log in just a matter of a few seconds.

Login with Facebook:
The users can log in to mobile apps using their Facebook Account Credentials.

Log in with Google+:
The users can log in to the app using their Google+ Account Credentials.

5.7 Shopping Cart Screen:

The Shopping Cart screen of the Magento 2 Mobile App will display all products added to the shopping cart. The mobile app users can view Product name, quantity, total price & shipping cost from the cart. The Shopping Cart screen has the following options:

Apply Voucher:
This option allows the users to get discounts & offers by entering valid coupons & vouchers running on your website.

Total Product Price:
The users can view the complete cost of their shopping bag which is automatically updated as per any addition to the cart.

Update Product Quantity:
The users can even update the specific product quantity.

Remove Product:
The app users can simply remove the product from the cart.

Continue Shopping:
The app users can leave the cart to browse more products on your app. The shoppers will be redirected to the home screen by tapping the Continue Shopping option.

Continue To Checkout:
The app users can proceed further to the checkout & payment screens just by tapping the “Continue To Checkout” option. It will redirect users to the checkout screen.

5.8 Checkout Process

The Magento2 mobile app Builder consists of a simplified checkout process. The front-end mobile app users have the option to select shipping details, billing details, order numbers, order comments, and so on in the checkout process of the mobile app.

Users of the Android and iOS apps only need to follow a few simple steps to place their orders.

1. Customers can select the desired product and add it to the shopping cart. After clicking on the shopping bag, he or she can also select the desired product quantity. Moreover, the front-end mobile app users can see the total number of products and shipping costs.

The customer also has the option to apply any voucher and coupon code at the bottom of the same page.

2. After clicking on the Continue to Checkout option, the user can review the order where he or she can see several details. Such as product price, shipping cost, shipping address (It can be edited on the same page), order summary (Number of the products), total price, and so on.

Additionally, the customer has the option to select their preferred mode of shipping on the same page. The user can also put his or her special request or requirement in the order comment option appearing at the bottom of the screen.

The user will be redirected to the payment method screen after clicking on the continue to checkout option.

On this screen, users have the option to select from all of the website payment options. By default, the shopping app consists of a cash-on-delivery option as a mode of payment.

When the user performs the payment activity, then he or she will be redirected to the order summary screen. where the customer can see the order status, order number, amount, and so on. The front-end mobile app users will get the order confirmation popup message on their mobile phone screens as well.

5.9 My Account Screen

My Account screen of the Magento 2 Android/iOS App allows the users to view the complete account details including a list of all previous orders. This screen has the following options:

Order History:

The users can view the complete details of their past orders, including the date of submission, order reference, pricing, and delivery status.

Update Profile:

The users can update their profile details, such as their first and last name, phone number, and password, using the app’s account settings.

Shipping Address(s):

The users can view all the saved shipping addresses in the Magento2 Mobile App, and they can also add a new shipping address from this screen.

Order Details:

The Magento2 Mobile App allows users to view their order history in the app. The users can see a list of all their previous orders, along with the order date, order number, order status, and total cost. They can also view the details of each order, including the products ordered, shipping and billing address, payment method, and delivery status. This feature makes it easy for users to keep track of their past purchases and reorder products if needed.

6.0 Order Detail Screen

The Order Details screen in your Magento2 eCommerce App displays the complete order details, including the shipping address, product summary, shipping and payment method, and total cost summary. The app users can track the delivery of previously placed orders directly from this screen, providing them with a hassle-free shopping experience.

7.0 Advanced Magento 2 Marketplace with Mobile App

KnowBand’s Magento 2 Marketplace converts your online website into a fully-fledged marketplace. The Magento 2 Mobile App Builder is fully compatible with Magento 2 Marketplace extension. This means you can bring the entire marketplace listing on the same Magento 2 Mobile Apps. Thus, launch a pair of Marketplace-compatible Mobile Apps with KnowBand & attract a large base of sellers & customers to your store.

–> As the user clicks on the Seller option, he/she is redirected to the Seller page of the mobile store. The user can view the list of the sellers in the marketplace along with their ratings.

–> The customers can click on the name of the seller in order to see his profile and the product being offered. The sellers can log in with their username and password. They are then redirected to the dashboard.

Get to know more about Magento 2 Marketplace with Mobile App from here.

That’s it! For More Info on KnowBand’s Magento 2 Mobile App Builder, refer the following links:

Magento 2 Mobile App Builder
Magento 2 Mobile App Builder Admin Demo
Magento 2 Android App Demo
Magento 2 iOS App Demo
Watch how this plugin works?

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..