Mobile App - Magento...E-23, Sector 63, Noida – 201301, India. Ph:+91-120-4243310. Velocity Software Solutions Pvt. Ltd. ... Zopim services incorporated in the eCommerce mobile apps

Velocity Software Solutions Pvt. Ltd. E-23, Sector 63, Noida – 201301, India.

Ph:+91-120-4243310. Velocity Software Solutions Pvt. Ltd.

1

Reg. Office: E23, Sector 63, Noida – 201 301 , U.P. (India)

http://www.velsof.com

Mobile App

User Manual v1.0.0

Prepared by

Velocity Software Solutions Pvt. Ltd.

Website: www.velsof.com,

E-mail: inquiry@ velsof.com

E-23, Sector-63, Noida. Phone: +91-120-4243310



2



Contents

1.0 Introduction ............................................................................................................ 3

1.1 Technology for Development .......................................................................................... 3

1.2 Installation Guide .............................................................................................................. 3

2.0 Admin Module ........................................................................................................ 4

2.1 General Settings .............................................................................................................. 4

2.2 Menu Settings .................................................................................................................. 6

2.3 Push notification Settings ............................................................................................... 7

2.4 Push Notification History ................................................................................................ 9

2.5 Slider Settings ................................................................................................................ 11

2.6 Banner Settings ............................................................................................................. 12

2.7 Payment Method Settings ............................................................................................ 13

3.0 Mobile App Screens ............................................................................................ 15

3.1 Splash Screen ................................................................................................................. 15

3.2 Home Screen .................................................................................................................. 16

3.3 Category Page Screen .................................................................................................. 18

3.4 Sorting Screen ................................................................................................................ 19

3.5 Filter Screen .................................................................................................................... 20

3.6 Search Screen ................................................................................................................ 21

3.7 Product Screen ............................................................................................................... 22

3.8 Shopping Cart Screen.................................................................................................... 23

3.9 Checkout Screen ............................................................................................................ 24

3.10 Payment Screen ........................................................................................................... 26

3.11 Login Screen ................................................................................................................. 27

3.12 My Account .................................................................................................................... 29

3.13 Order Details ................................................................................................................. 30

4.0 Features of Mobile App Builder ......................................................................... 32



3



1.0 Introduction

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 mobile, this module has made the job simpler for you.

Find out how?

Mobile App Builder extension for Magento 2 stores lets you upgrade your

eCommerce store to a mobile app by developing native Android and iOS apps for

you. The functional apps developed by this extension would definitely fulfill all the

requirements for the growth of your store. This is the most seamless solution of

eCommerce app development. All you need to do is to specify your business

requirements and the leave the rest to our skilled development team.

The mobile apps for Magento 2 eCommerce stores developed by this Mobile App

Builder provide a flawless and reliable experience to the users which will definitely

bridge the gap between you and your customers.

1.1 Technology for Development

Language: PHP

Frame Work: Magento

1.2 Installation Guide

Follow the simple steps in order to install the Mobile App Builder for Magento 2:

1. Buy the extension and download the extension package of Mobile App Builder.

2. You’ll get a zipped file. Install the package on your Magento 2 web-store.

3. The extension is now installed and ready for use. In Admin Panel go to “Knowband

Extensions > Mobile App Builder”.



4



2.0 Admin Module

After installing Mobile App Builder module into your Magento 2 store, the plug-in

will provide following interfaces in the Admin panel:

1. General Settings

2. Menu Settings

3. Push Notification Settings

4. Push Notification History

5. Sliders Settings

6. Banner Settings

7. Payment Method Settings

Each interface is in form of a tab and each tab contains some specific

settings/functionality that can be changed according to the need. Each tab is

explained below.

2.1 General Settings

Once you have installed the module, the first tab after clicking on the configuration

will be general settings as shown in the below snapshot:



5



Initially, all the fields in the General Settings will be already filled with their default

values.

1. Enable Plugin: Toggle the button to enable the module. A reliable connection

is established between your mobile app and your store once it is enabled.

2. Enable Request Log Reporting: Enabling the request log allows you to get any

report on any abnormal behavior of application.

3. Enable Live Chat Support: Enabling live chat support function will incorporate

a live chat option in the application. Zopim services incorporated in the

eCommerce mobile apps allows you to directly assist your users.

4. Select Product Carousel Type: Here, you can choose the different categories

of products which you want to feature on the home screen of the application.

5. Number of Products: You can select the number of products to be displayed

as the various categories on the home screen of the application.



6



Once you have made all the changes, click on the “Save” button shown at right

upper area.

2.2 Menu Settings

In this menu settings tab, the store admin can set and manage the various CMS

pages of the application. You can even set the redirection pages to the different

options in order to guide user directly to a particular page. Find it for yourself in the

following snapshot:

1. Contact Us Page: Enable the contact us page to display the same on the

mobile app menu.

2. Select Contact Us Page: You can redirect the users to the right CMS page

from here.

3. Custom Menu(s): Store admin can even show various other CMS pages as

Privacy Policy, Cookie Policy and others. The store admin can create custom

menus and add redirection links to them. Menu options can also be enabled

or disabled whenever required. See it for yourself in the snapshot below:



7



2.3 Push Notification Settings

The Mobile App Builder for Magento 2 provides unlimited push notification to the

admin to market your products. The push notifications are fully personalized and can

be timed as well from the backend of Mobile App Builder plugin.



8



1. Firebase Server Key: – To configure the Push Notification service for the

application, you will require a Google Firebase Server key. This key allows you

to send push notification to any specific application.

Note: In order to get the Firebase Server Key, refer to the link.

https://www.knowband.com/blog/user-manual/android-mobile-app-builder-configuration/#creating-a-project-at-firebase-console



9



2. New Order Settings: – Enable/Disable Push Notification for the new orders

placed by app users.

Title and message of Notification: – Enter the title and message that is to be

sent with the Push Notification after the Order is placed successfully from the

application.

3. Order Status Change Settings: – Enable/disable the Push Notification sent

when there is any update in the order status.

Title and Message of Notification: – Enter the title and message that has to

be sent in the Push Notification for the updated order status.

4. Abandoned Cart Settings: – Enable/disable Push notifications for the

shopping cart that has been abandoned by the user without successful

purchase.

Title and Message for Push Notification: – Enter the title and message that

has to be sent in the Push Notification for the Abandoned Cart by the app

users.

Time Interval: – This is a time interval (in hours) for sending the Push

Notification for the Abandoned Cart to the users who left items in their cart.

2.4 Push Notification History

Push notifications History settings contains the list of all the push notifications sent

to the app users along with the complete details. Store admin can easily view any of

the notification. The store admin can even send a new notification by Send

Notification option available under the push notifications history section:



10



1. Send Notification: On clicking the send notification option, a pop up window

appears which allow you to configure the push notification as per your

desire.

1. Title: – The title of the Push Notification that is to send to the app users.

2. Message: – The message being displayed on the notification.



11



3. Select Broadcast Device Type: Store admin can choose if he/she wants to

send the notification to the Android platform or iOS platform or both.

4. Select Image Type:- Select relevant images for the personalized notification.

5. Select Redirect Activity: – The store admin even select the category or

specific product to be redirected after he taps on the Push Notification. It has

three selections : –

Home

Category

Product

6. Send Notification: – This button is used to send the notification configured

above.

2.5 Slider Settings

The sliders are displayed at the top of the home screen of the mobile apps and can

be configured easily from the backend.

Edit Slider: Store admin can edit any of the saved sliders by clicking on the 'Edit'

option as shown in the snapshot below:



12



1. Status: Click to enable/disable the slider on the home screen.

2. Select Image Type: This option lets you set the image of the slider by

entering the URL or directly upload it from your system.

3. Image URL: You can even preview the image you are going to use as a slider.

4. Select Redirect Activity: You can even select where you want to redirect the

users with the slider.

2.6 Banner Settings

Banners are displayed just below the sliders on the homepage. You can configure the

banners from the backend and even add as many as you require.



13



Edit Banner: Store admin can edit any of the banners by clicking on the 'Edit' option

as shown in the snapshot below:

1. Status: Click to enable/disable the banner on the home screen.

2. Select Image Type: This option lets you set the image of the banner either by

entering the URL or direct upload.

3. Image URL: Store admin can even preview the image you are going to use on

the banner.

4. Select Redirect Activity: You can even choose the product or category

where you want to redirect the users with the banner.

2.7 Payment Method Settings

Mobile App Builder for Android/iOS supports all types of payment methods. PayPal

and COD payment options are incorporated in the apps by default.



14



Edit Payment Methods: Store admin configure both PayPal and COD payment

methods just by clicking edit option.

1. Status: You can enable/disable the payment method just by toggling the

button in the background.

2. Name: Enter the name of the payment method.

3. Payment Mode: You can select the native payment environment from

sandbox or live option. These settings allows the users to test the payment

methods before proceeding.

4. Client ID: Enter the appropriate client ID of PayPal merchant account. It

identifies the account to which the Payment has to be made while placing the

order.



15



3.0 Front End Module (Mobile App Screens)

3.1 Splash Screen

Splash screen of the Android or iOS mobile apps is the very first screen that will be

displayed to the users. There is a demo option in the lower end of splash screen to

provide you a glimpse of your app functionality.

1. Theme Color – Mobile App

Builder provides four attractive

theme colors in the apps. There

is also an option to choose a

custom color by clicking on '+'

option.

2. Select language - Mobile App

Builder supports all the native

languages and even

incorporates 18+ international

languages by default. Apart

from the list, if you want any

other language to be added in

the list, we can incorporate

that free of cost.

3. Choose Font - Mobile app

builder for Magento 2 provides

12+ font styles.

4. View your store – You can even

view how your website will

work as a mobile app by just

entering your website url.

5. View Demo - There is a demo

option also available for all

those who wants to just

experience the app features

and functionalities.



16



3.2 Home Screens

The intuitive product and category screens of eCommerce mobile apps motivates the

online shoppers to dig into your web-store. Let's take a look at the screens which will

appear once you enter the application.

1. Menu: You can find the app

menu just by tapping on the

navigation bar at the left side of

the home screen. It provides the

following options to users:

My Account: Users can even

access to their account

where he/she can view their

placed order history or even

update their pre-saved

details.

Categories: All the

categories options allow

the users to view

categories all product

categories from here.

About Us: It allows users to

view about us page.

CMS pages: Various CMS

pages are displayed here.

Users can view all of them

here.

Login/ Logout: Allows users

to login/ logout of their store

account.



17



2. Sliders:

Sliders are displayed at the top

of the home screen of app.

Sliders are nothing but the

various promotional images

which changes after a fixed

time slot as of a slideshow.

These sliders basically redirects

your users to specific product

or category screen of

application and thus helps in

product marketing.

Note: Keep the size of the images

to be used in them of size 400*600

for clear image preview on the app.

3. Banners:

Banners are displayed just

below the sliders on the home

screen of the app. You can

redirect the user to any

category or product screen with

the these banner images.

Note: Make sure that the size of

the banners must be >= (600*400)

w*h for clear image preview on the

mobile app.

4. New Arrivals: The home screen

contains the new arrivals to

the store. All the products

falling under this category are

displayed in the horizontal

scroll.



18



3.3 Category Page Screens

Online shoppers can easily find any categories from the navigation drawer. Users can

select any of the category pages. Mobile App Builder for Magento 2 stores can easily

display all of your web-store categories.

Category section offers

various functionalities:

1. Sort:

Sort feature allows the

shoppers to sort the

products on the basis of

high to low or low to high

price range.

2. Filter:

App users are also able to

apply filtration to the

categorized products on

the basis of various

attributes as price, color,

size etc.

3. Product Listing:

Category products are

listed in the grid view.

Users can even change the

view to list and simply

scroll below to get

collection of products.



19



3.4 Sorting

Sorting



20



3.5 Filter

Filter



21



3.6 Search

Users can search any product

available on the store just by

entering related keyword in the

search icon. Advanced Voice search

functionality is also there in

Android apps.



22



3.7 Product

The Mobile App Builder for Magento 2 stores provides all sorts of product support in

the apps. The Product screen contains all the relevant details regarding the item.

Product screen exhibit following functionalities:

1. Product Name and

description:

All the necessary details

of the product are there

in the description.

2. Add to Cart:

Users can simply add any

stock product to their

shopping cart by tapping

Add to Cart button

displayed at the bottom

of the screen.

3. Add to Wishlist:

Users can even add the

products to wishlist for

future purchase.

4. Product Sharing:

Online shoppers can share

the products on different

social platforms with their

familiar ones.



23



3.8 Shopping Bag

Shopping cart of eCommerce mobile app of Magento 2 allows the users to view all

the products which they stored in the shopping cart to purchase.

1. Product Listing: Users

can find all the saved

products in their cart along

with the price.

2. Update quantity: Users can

even update the product

quantity in this screen with

Update Quantity option.

3. Remove from cart:

Unwanted products can be

removed from the cart.

4. Continue Shopping: When

the user taps the Continue

Shopping option, they are

redirected to the home

page of the app to browse

more products.

5. Continue to Checkout:

Users can proceed to the

checkout screen directly by

clicking on the Continue To

Checkout option.



24



3.9 Checkout

Mobile App Builder offers simplified one-page checkout to your users. The checkout

screen contains the information about shipping details, Billing details, Order

Summary, Shipping Methods and total Payment Summary.

1. Shipping Address: Users can

find the shipping details on

this screen

Add/ Edit Shipping

Address: Online shoppers

are allowed to edit the

product shipping details and

can even add a new one.

2. Billing Address: Billing

details selected by user can

be viewed with this option.

Add/ Edit billing address:

Users can even view the

products added in the cart

along with the complete

summary.

3. Order Summary: Provides

detail of product(s) added

to cart by user.



25



4. Order Comment:

Users can even write

order comment which

would be visible to the

store admin at the

backend.

5. Payment Summary:

It provides the detailed

report of total cost of

shopping cart.

6. Proceed to payment:

Users can go to Payment

page simply by clicking on

Proceed To Payment

option.



26



3.10 Payment

On the payment screen, the buyer will find the list all the available payment methods

to choose from. Mobile App Builder extension supports all type of payment methods

running on your store. We have by default integrated two native payment method

PayPal and Cash On Delivery. Users can simply click on Make Payment option to

complete the transaction.

In-built payment

methods



27



3.11 Login

Mobile App Builder for Android and iOS provides quick social login options. Facebook

and Google login are provided in the eCommerce mobile apps. It makes the login

and registration process hassle free and fast for the app users.

1. Login: Users are allowed to access the app just by entering the login credentials of

the users.

2. Signup: For every new app user, sign up option is there which requires necessary

details to create the new account.

3. Forget Password: Users can even recover the lost password with Forget Password

option.

4. Facebook Login: Users can login and browse the app with their Facebook account.

5. Google Login: Users can also login and browse the app with their Google account.



28



1. To create Facebook App and obtain the App ID, Click Here

2. To create Google App, Click Here

3.12 My Account

My Account screen of Android/iOS mobile apps displays complete account details of

the users. It also has the list of all the previous orders placed by the users. This

screen exhibits following functionalities:

1. Order History: Provides the

complete details of placed

order such as order id, date

of submission, order status

etc.

2. Update Profile: Users are

allowed to update their

personal saved details.

https://www.knowband.com/blog/user-manual/android-mobile-app-builder-configuration/#prerequisites-for-creating-facebook-app-for-android-will-be-provided-by-knowband

https://www.knowband.com/blog/user-manual/android-mobile-app-builder-configuration/#prerequisites-for-creating-google-app-for-android-will-be-provided-by-knowband



29



3.13 Order Detail

Order detail screen of Mobile App Builder allows the users to find and track their previous placed

orders from the application. It has complete information about order status, shipping address,

payment details and total cost.



30



3.14 Add Address

Whenever there is a requirement, users can conveniently add new shipping address directly from

the mobile app.



31



4.0 Features of Mobile App Builder for Magento 2 stores:

Now that you are fully aware that Mobile App Builder will enhance your business

reach in the most easy and cost-effective way, let's take a look at some of its sale

pushing features in detail:

1. Web Admin Interface



32



The Magento 2 store admin gets full access of the web-admin interface of Mobile

App Builder. Once the module is installed, you can control the app as you want.

2. Design Control

The store admin even gets full design control in order to customize the app. Mobile

App Builder lets you to configure app design from the backend interface.

3. Attractive app themes

By default, four theme colors are provided in eCommerce mobile apps. You can even

choose a new one from the provided color chart.

4. Custom font styles

The mobile apps developed by Mobile App Builder comes with different font styles

to make the app look effective.

5. Tablet and mobile Optimization

Developed mobile apps are tablet and mobile optimized which makes them function

on various handheld devices without any flaw.

6. Synchronization between store and mobile app

Mobile App Builder plugin synchronizes the app and your web store in real time. All

the data related to inventory or order automatically gets reverted on the application.

7. Multi-lingual and RTL support

Mobile App Builder for Magento 2 provides multi-lingual support in applications. It

even supports RTL writing styles in apps along with 18 different languages. Following

is the list of languages supported in mobile application:

Bulgarian

Czech

Dutch

https://www.knowband.com/mobile-app/features/web-admin-interface/

https://www.knowband.com/mobile-app/features/design-control/

https://www.knowband.com/mobile-app/features/tablet-and-mobile-support/

https://www.knowband.com/mobile-app/features/web-store-and-synchronization/

https://www.knowband.com/mobile-app/features/multi-lingual-support/



33



English

Finnish

French

German

Greek

Hungarian

Italian

Polish

Portuguese

Romanian

Russian

Slovak

Swedish

Spanish

RTL Compatible languages:

Arabic

Aramaic

Azeri

Dhivehi/Maldivian

Hebrew

Urdu



34



Persian/Farsi

Kurdish and others.

8. Multi-currency support

Mobile App Builder provides support to all the currencies available at your store.

9. Unlimited Push Notifications

Mobile App Builder for Magento 2 allows you to send unlimited push notifications to

the app users. This feature can help you notify the users about the order success,

order status update and abandoned cart.

10. Promotional Banners and sliders

Banners and sliders are provided in the mobile applications for announcing new

deals, offerings, seasonal sales and discounts.

11. Live Chat Support

Zopim chat services allow you to provide 24/7 user assistance directly from mobile

application.

12. Facebook and Google Login

Mobile App Builder provides social login option in mobile app to make the

registration and login process fast for the users. Google+ and Facebook options are

added in the app by default.

13. Coupon and Voucher support

Mobile App Builder supports all types of coupons and vouchers available on your

store.

14. Native Payment method support

Mobile App Builder module supports all sorts of payment methods. PayPal and COD

payment methods are by default incorporated in the application.

https://www.knowband.com/mobile-app/features/unlimited-push-notifications/

https://www.knowband.com/mobile-app/features/zopim-chat/

https://www.knowband.com/mobile-app/features/social-login/

https://www.knowband.com/mobile-app/features/coupons-support/

https://www.knowband.com/mobile-app/features/supports-all-payment-methods/



35



15. Social sharing

Users can share your store products to different social networks directly from the

product page of your screen.

16. All sorts of product support

All sorts of product support is provided Magento 2 mobile apps for Android/iOS as

simple, virtual, configurable, bundled and grouped products.

17. Multiple shipping methods

Mobile App Builder is compatible with various shipping methods available on your

store.

18. Voice Search

Voice Search option of Mobile App Builder allows the users to seamlessly search the

store products. This feature is missing in the iOS apps.

19. Simplified checkout

Simplified checkout feature eases the order completion process. Magento 2 Android

and iOS apps makes the shopping pretty easy and fun for the users.

20. Order tracking

Mobile App Builder provides order tracking feature in mobile apps. Users can view

the updated status of their placed order whenever required.

https://www.knowband.com/mobile-app/features/supports-all-product-types/

https://www.knowband.com/mobile-app/features/supports-all-shipping-methods/

https://www.knowband.com/mobile-app/features/voice-search/

https://www.knowband.com/mobile-app/features/simplified-checkout/

https://www.knowband.com/mobile-app/features/order-tracking/

Documents

Mobile App - Magento...E-23, Sector 63, Noida – 201301, India. Ph:+91-120-4243310. Velocity Software Solutions Pvt. Ltd. ... Zopim services incorporated in the eCommerce mobile apps