Magento Mobile App Builder – User Manual

1.0 Introduction

A Mobile App is definitely one such solution that can take your eCommerce business to far off places. With the support of the Magento Mobile App Builder for Android/iOS, you can seamlessly target your multi-platform customers and grab maximum sales as well as customer engagement. The mobile apps with Magento eCommerce Mobile App Builder can make your eCommerce business accessible to the worldwide mobile-based consumers. The store owners can now improve the chances of their business growth and expansion. This Mobile App Maker for Magento allows the store owners to get their customized mobile app as per their business requirements and needs.

Whether your eCommerce site is recording a consistent sale volume or if it’s on the verge of finding your niche market, nowadays mobile apps have the potential to drive quality traffic as well as conversions. Mobile applications have become the flavor of the current time and the idea of taking your business on the mobile platform sounds quite perplexing.

To ease the task for all the Magento store owners out there, KnowBand has brought its readymade framework Magento Mobile App Builder. This pre-designed mobile app solution builds full-fledged Android & iOS apps for your eCommerce website.

1.1 Salient Feature of Magento Mobile App Builder

The Magento Mobile App Builder comes with some of the major sale pushing features:

–> Customizable Home Screen Layout (Complete Flexibility)
–> Store Branding
–> Zopim & WhatsApp Chat Support (24*7)
–> Google & Facebook Login
–> OTP & Fingerprint Login
–> Both Tablet & Mobile Support
–> Android 4.2 to Android 8.0 (Oreo) Support
–> iOS 9 to iOS 11 Support
–> Automatic Inventory Update
–> Multiple Color & Font Choices
–> Multi-lingual & RTL (Right To Left) Support
–> Multi-currency Support
–> All Product Type Support
–> Website Payment Method Supported on Apps
–> Website Shipping Method Supported on Apps
–> Custom Payment Method Integration
–> Unlimited Push Notifications
–> Product Social Sharing Options
–> Multiple Filtering & Sorting Options
–> Advanced Voice Search (Android Only)
–> Wishlist Functionality
–> Website Coupon/Vouchers Supported on Apps.
–> Simplified Checkout Screen
–> Real-time Order Tracking

2.0 Magento Mobile App Demo

KnowBand offers a FREE Magento Mobile Apps demo for you before making the actual purchase. The store admin can experience the apps functioning on your testing devices.

2.1 View Our Demo Store working on Apps

We have set up a free Demo store just to test the Magento Mobile App functionalities. Install the application on your device & explore its flawless working.

Step 1: Download and install the Nautica Magento Mobile App on your mobile device. Here, are the links to the apps:
Apple App Store  
Google Play Store

Step 2: Once the apps are successfully installed, open & tap “View Demo” option on the splash screen. Start testing the apps working with ease.

Note: You can access the admin panel of Magento Mobile App Builder from here.

2.2 View Your Store working on Demo Apps

Still not convinced? Want to test your own website on the demo apps. We got you covered with that as well in just 3 simple steps:

Step 1: Download our Free Magento Mobile App Builder from KnowBand & install the same on your website.

Step 2: Install the demo Magento Apps on the testing devices & enter the store URL in View Your Store option.

Step 3: Tap “View Your Store” and start experiencing your own website on Magento Android & iOS 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 Mobile App Builder.

3.0 Process to build Magento Mobile Apps

Satisfied with our demo apps & want a pair for yourself? Build Magento Mobile Apps in just 3 simple steps:

Step 1: Purchase & Install Module on your website.
Get paid version of Magento Mobile App Builder from KnowBand & install the same on your website.

Step 2: Share some App-related Specifications
We would require some app-related specifications & requirements from your end. For this, we would send a pre-requisites to form with you.

Step 3: Get Your Android & iOS Apps in 1-2 days
Our developers & technical team will develop the apps & get back to you in 1-2 days.

Note: You can publish these APK/IPA files on respective app stores. Refer 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 publishing app on respective stores, we would get it done for you.

4.0 Admin Panel Screens

After successful purchase & install of Magento Mobile App Builder, the store admin can configure the backend panel. Go to System>>KnowBand Extensions>>Mobile App Builder & you would find the following tabs in the module backend:

4.1 General Settings:

general-settings

a) Enable/Disable: Enable/disable the Magento Mobile App Builder module to make the apps work on the smartphone.
b) Redirect on Cart Page when Add To Cart: Redirect the mobile app users to the cart screen whenever any user tap Add To Cart button.
c) Display Short Description: Enable to display the short product description on the mobile apps.
d) Enable Request Log Reporting: This functionality enables the error log on the mobile devices. This error log file is used to rectify any error or abnormal behavior of App.
e) Enable Fingerprint Login: Enable the fingerprint login option in the mobile apps.
f) Enable Phone Number Registration: Enable Phone Number login/registration in the mobile apps.
g) Select Layout for Home Page: Choose the desired layout for your app home screen. You can create multiple layouts under Home Page Layout tab which will be displayed here in the drop-down menu.

general-settings

h) Disabled Shipping Methods: Choose shipping methods which you don’t want to display on the Mobile Apps.
i) Enable WhatsApp Chat Support: Enable/disable the WhatsApp chat option on mobile apps.
J) Enable Live Chat Support: Enable/disable Zopim chat options in mobile apps.

general-settings

k) Enable Logo: Enable logo in your mobile apps. You can upload the logo image which will be displayed on the header of the mobile apps.
l) App Button Color: Choose the button color for your apps.
m) App Button Text Color: Choose the button-text color for your apps.
n) App Background Color: Choose the background color for your apps.
o) App Theme Color: Choose the theme color for your apps.

4.2 Mobile Menu Settings

This tab of the Magento Mobile App Maker allows the store admin to display various website CMS pages on the Mobile Apps. You can add as many custom CMS pages as you want. The Mobile App Maker for Magento allows you to bring all the website CMS pages on the app.

mobile-menu

4.3 Payment Methods:

The Magento Mobile App Creator offers additional PayPal & COD payment options to make the payments easier in the apps. The mobile apps with this extension already support web-view payment options in mobile apps.

payment-methods

4.4 Push Notifications:

push-notifications-settings

a) Firebase Key: Enter the Google Firebase key to send push notifications on your Magento Apps. You can skip this setting for the Free version. We would set up the same with the paid version of the module.

b) Order Success Notification: Configure automated Order Creation Push notification which would be sent automatically to the user’s who successfully creates an order.
c) Order Status Update Notification: Configure automated Order Status Update notification which would be sent automatically to the users whenever there is an update in order delivery status.
d) Abandoned Cart Notification: Configure automated Abandoned Cart notification which would be sent automatically to the users who left their products in the cart. This notification is sent repeatedly to the users after a fixed time duration.
e) Send Notification:
If the store admin feels like there is a need to highlight any daily deals or discounts, custom notifications can also be sent to the app users. These notifications can be configured from the backend panel & will be broadcasted to all app users.

send-notification

4.5 Home Page Layout

The Magento Mobile App Builder offers customizable Home Screen in your apps whose layout can be configured by you. You can create & save multiple layouts based on various themes, festivals or events & select them for your app as per the requirement.

home-page-layout

The module offers the flexibility to add as many layouts as needed along with the options to edit previous layouts.

home-page-layout

home-page-layout

In the Home Page Layout of Magento Mobile App Creator, the store admin gets to edit & customize the following designing elements:

Top Categories:

Top categories are displayed in the form of small squares on the Home Screen which can be configured from the backend using images & landing pages.

top-categories

Square Banner:

Square Banner is a configurable square shaped listing on the Home Screen whose image & landing pages can be configured from module backend.

square-banner

Sliding Banner:

The Banners can also be displayed in horizontal sliding & their image/landing page can be configured from the backend interface.

sliding-banner

Grid Banner:

The Banners can also be displayed in the form of grid listing on mobile app Home Screen. These banner images & landing pages can be customized easily from the backend interface.

grid-banner

Countdown Banner:

The Magento eCommerce Mobile App Maker offers a count-down timer banner on your home screen in order to offer a time-based sale (Flash Sale). The banner timer, image, landing page can be configured from backend panel.

countdown-timer-banner

Square Products:

The products on your store can be listed on the Home Screen of the app in the square listing.

square-products

Sliding Products

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

sliding-products

Grid Products:

The products can also be displayed in the grid view on Mobile App Home Screen. These listing can be configured as shown in the snapshot below:

grid-products

Products Recently Accessed:

The Magento Mobile App Creator brings one more element of Recently Viewed Products. This attribute displays those products in the sliding view which were being visited recently by the user.

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

5.0 Mobile App Screens:

5.1 Home Screen:

The Magento Mobile App Builder offers a dynamic home screen in the mobile apps which can be easily designed from the backend panel. The store admin gets the complete flexibility to design & craft the home screen as per his/her choice. The Magento Mobile App Builder offers the following designing elements:

–> Top Categories
–> Square Banners
–> Sliding Banners
–> Grid Banners
–> Square Products
–> Sliding Products
–> Grid Products
–> Countdown Timer Banner
–> Recently Viewed Products

The positioning of these attributes can also be changed as well just with simple drag & drop.

a) Dynamic Layouts: Craft alluring home screen layouts on your own which connect with the users & compel them to make the purchase.

b) Website Logo: Add your store logo in the module backend & display the same on the header of the app.

c) Search: The search option in Magento Mobile App allows the users to search for products without any hassle. Both keyword & voice search makes it easier for the buyers to get the right product in the least time.

d) Wishlist: Wishlist option in the Magento Mobile App lets you bookmark the products regarding future purchase.

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

f) WhatsApp/Zopim Chat: Your Magento Mobile App users can directly contact you regarding any query or concern through WhatsApp & Zopim chat option on the home screen.

5.2 Accordion Menu (Navigation Bar)

The Magento Mobile Apps for Android & iOS come up with easy to use categorization of your store products. The online shoppers get to browse all the categories in the navigation bar along with all CMS pages. The Accordion menu categories are the same as of your store & it provides the following options:navigation-bar-screen

My Account:

The My Account screen of Magento Mobile App contains all the user information like Personal Details, Shipping Address(s) & Order Details. There is even an option for the users to register their fingerprint. The online shoppers get to view complete personal details from here & update the password as well.

Categories:

All your store categories are fetched on the mobile apps as well. Offer a multi-level categorization to your app users & let them browse products with ease.

CMS Pages:

All of your website CMS pages like About Us, Contact Us, Terms & Conditions, etc will be displayed here.

Language(s):

The Magento Mobile Apps are both multi-lingual & RTL supported. The users can choose the desired language & all the app contents will be translated accordingly. Every language available on the store is displayed here.

Currency(s):

Just like languages all sorts of currencies available on your website will be displayed in Magento Mobile Apps. This allows the users to make the payments with the desired currency option.

5.3 Category Screen:category-screen

All sorts of categorization available on your Magento stores will be displayed in the mobile apps as well. The category screen has two views: Grid & List view. The product image, name, price is displayed for all product listings. The mobile apps with Magento Mobile App Maker have multiple filter & sorting options which simplify product search for the users.

Grid & List View:

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

Sort:

Sort option in Magento Mobile Apps allows the users to view products in Low to High or High to Low category.

Filter:

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

5.4 Product Screen:

The product screen of Magento Mobile App is as simple & easy-to-use as it could get. Every product has multiple images product-screendisplayed along with name & price. The product availability is also displayed as “In Stock” or “Out Of Stock”. The product screen has the following other 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 available on your website.

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

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

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

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

Product Social Sharing:
The Magento 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:wishlist-screen

The Magento Mobile App Builder has a wishlist bag allowing the users to bookmark products for future purchase. The 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 remove option if required.

5.6 Login Screen

The Magento Mobile App Creator offers various one-tap login options & make sign-in/registration process more seamless:login

Login:
The app users can authenticate & access to Magento Mobile Apps using e-mail sign-in credentials.

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

Login with Phone Number:
Your Magento Mobile App comes up with phone number login option as well which allows users to verify OTP & login without any hassle.

Login with Fingerprint:
Your app users also get an option to log in with a fingerprint. This biometric authentication allows the users to login apps in seconds.

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

Login with Google+:
The users can log in into app using their Google+ Account Credentials.

5.7 Shopping Cart Screen:

The Shopping Cart screen of your Magento Mobile App will display all products added into shopping cart. The app user’s can view Product name, quantity, total price & shipping cost. This screen has the following options:shopping-cart

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

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

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

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

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

6. Continue To Checkout
The app users can proceed further to the checkout & payment screens just by tapping the “Continue To Checkout” option. It will re-direct users on the checkout screen.

5.8 Checkout Screen

The mobile apps built with Magento Mobile App Maker has a simplified checkout approach on a single-screen. The users can checkout-screenreview complete order details like shipping details, billing details, order summary, order comment, payment summary before making the actual order.

Shipping Address:
The checkout screen of Magento Mobile Apps screen provides details of all addresses saved by the user. If required, the user can also edit/save new shipping address. The total checkout cost is also displayed on this screen.

Billing Details:
The users can even enter billing details along with shipping details for their purchase. They can also choose the shipping address to be same as the billing address.

Order Summary:
The app users get to view purchased product details along with the quantity before making the final purchase.

Shipping Methods:
Every shipping methods running on your website are displayed on the checkout screen as well. The users can choose the desired one from here.

Order Comment:
The app users can also add any comment related to their order which will be visible to the store admin in the backend.

5.9 Payment Screen:

The payment screen on the Magento Mobile App displays both web-view & native app payment methods. The Magento Mobile Apps supports all sorts of website payment options along with PayPal & COD payment methods. Moreover, various other native payment options like PayU, Apple Pay, Amazon Pay, Braintree, Stripe etc. can also be added in your mobile app over a fair price.

payment-screen

5.10 My Account Screen

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

 

Order History:
The users get to know about complete order details created on the app. The order creation date, reference, price & delivery status is available on this screen.

Update Profile:
Users can also update their pre-saved profile details like First or last name, phone number & password.

Shipping Address(s):
The app users can see the complete list of saved Shipping Addresses. New Shipping address can also be added from here.

Order Details:
The app users can view the complete list of the previously placed orders from the app.

Re-order feature:
There is a direct re-order functionality allowing the users to repeat the order just by clicking “Re-order” button.

5.11 Order Detail Screen

Order details screen of Magento Android & iOS App provides complete order detail such as shipping address, product summary, shipping and payment method and total cost summary. This order detail is of the previous order placed by you. The users can even track the delivery of previously placed orders directly from this screen.

order-details

6.0 Advanced Magento Marketplace with Mobile App

KnowBand’s Magento Marketplace converts your online website into a fully fledged marketplace. The Magento Mobile App Builder is fully compatible with Magento Marketplace extension. This means you can bring the entire marketplace listing on the same Magento 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 of the marketplace along with their rating.

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

marketplace mobile appmarketplace mobile app

Get to know more about the Magento Mobile App Builder plugin with:

Magento Mobile App Builder

Advanced Magento Marketplace with Mobile App

Admin Demo Link

Front App Demo for Android

Front App Demo for iOS

Video Link:

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.

Leave a Reply

Your email address will not be published. Required fields are marked *