magento-2-mobile-app-builder-user-manual

Magento 2 Mobile App Builder – 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 provides a flawless and reliable shopping experience to the users. This will definitely boost conversions & sale of your store.

1.1 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 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: http://filezilla-project.org/).
  • Now run 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 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 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:

general-settings

a) Enable the Extension: Enable the Magento 2 Mobile App Builder to make the mobile apps work on the user’s devices.
b) 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.
c) Display Short Description: Enable to display the short product description on the product screen.
d) Enable Request Log Reporting: Enable the error log on the mobile apps which are used to identify & rectify any abnormal behavior of the mobile apps.
e) Enable/Disable Fingerprint Login: Enable Fingerprint login on the Mobile Apps.
f) Enable/Disable Phone Number Login: Enable Phone Number login on the Mobile Apps.
g) Select Layout for Home Page: Choose the desired Home Screen layout for the mobile apps.

general-settings

h) 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.
i) Enable WhatsApp Chat Support: Enable/disable the WhatsApp chat option on mobile apps.
j) 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.
k) App Button Color: Choose the button color for your apps.
l) App Theme Color: Choose the theme 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.

4.2 Payment Methods:

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

payment-methods

4.3 Push Notifications:

push-notifications-settings

a) 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 Free version of Magento 2 Mobile App Builder.

b) Order Success Notification: Configure automated Order Creation push notification which would be sent automatically on the user’s apps who successfully creates order through your app.
c) 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.
d) Abandoned Cart Notification: Configure automated Abandoned Cart notification which would be sent automatically to the users who left their products in the cart.
e) Send Notification: The store admin can even send manual notification & highlight any deal or discount with the mobile app users.

send-notification

4.4 Menu Settings:

The Magento 2 Mobile App Maker offers the Menu Settings tab to add & manage various CMS pages on the Mobile App. Contact Us Page can be enabled/disabled & new CMS pages can be added as well.

home-page-menu

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 Home Screen & offer to your users.

home-page-layout

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

home-page-layout

home-screen-layout

The store admin can configure the following designing 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:

top-categories

Square Banner:

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

square-banner

Sliding Banner:

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

sliding-banner

Grid Banner:

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

Countdown Timer Banner

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

countdown-timer-banner

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:

square-products

Sliding Products

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

sliding-products

Grid Products:

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

grid-products

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.

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

home-screen

home-screen

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 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 & voice search options which allow the users to search for products without any hassle.

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

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

f) WhatsApp/Zopim Chat: 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.

5.2 Accordion Menu (Navigation Bar)

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:navigation-bar-screen

My Account: My Account options let the users access the user info saved on the store. This screen of Magento 2 Mobile App displays all user information like Personal Details, Shipping Address(s) & Order Details. There is even an option for the users to register their fingerprint. The mobile app shoppers can view all personal details from here & update user password as well.

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 on 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:category-screen

All categories on your Magento 2 website are fetched on the Magento 2 Mobile Apps as well. The category screen of 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:

Sort option in Magento 2 Mobile Apps allow 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 Magento 2 Mobile App product screen is completely clutter-free & appealing. Every product has multiple images displayed along with their name & price. The product availability is also displayed as “In Stock” or “Out Of Sproduct-screentock” 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 available on your website.

Short Description:
Users get to read the short description of your product to quickly make up their mind. The Magento 2 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 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:wishlist-screen

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

5.6 Login Screen

The Magento 2 Mobile App Maker offers various one-tap login with the following options:
1. E-mail Loginlogin
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 of Magento 2 Mobile App is fully seamless.

Login with Phone Number:
Your Magento 2 Mobile App come up with 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 login just a matter of a few seconds.

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

Log in with Google+:
The users can log in into 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 into 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 shopping-cartoptions:

Apply Voucher:
This option allows the users to get discounts & offers by entering valid coupon & voucher 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 in 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 re-directed to the home screen on tapping 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 re-direct users on the checkout screen.

5.8 Checkout Screen

The eCommerce Mobile Apps built with Magento 2 Mobile App Maker has a simplified checkout approach with a single-screen. The users can get info regarding order details like shipping details, billing details, order summary, order comment, payment summary before making the actual order.checkout-screen

Shipping Address:
The checkout screen of Magento 2 Mobile Apps provides details of all addresses saved by the user. If required, the user can also edit the saved shipping address or add new. 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 the same as the billing address.

Order Summary:
The Magento Mobile 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 shipping method from here.

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

Payment Summary:
The checkout screen of Magento 2 Mobile App displays the complete payment details.

Proceed To Payment:
The app users will be re-directed to the Payment screen after tapping the “Proceed To Payment” button.

5.9 Payment Screen:

The payment screen of Magento 2 Mobile App displays both web-view & native app payment methods. These apps support your Magento 2 website payment methods 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 2 Android/iOS App allows the users to view the complete account details including list of all previous orders. This screen has the following 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

The Magento 2 Mobile App Builder offers a real-time order tracking in mobile apps. The Order Details screen of these apps displays complete order detail such as shipping address, product summary, shipping and payment method, and total cost summary. The users can even track the delivery of previously placed orders directly from this screen.

order-details

6.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 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.

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..

Leave a Reply

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