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

Magento 2 Mobile App Builder – User Manual

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, Knowband has made the job simpler for you. Find out how?

Magento 2 Mobile App Builder extension lets you upgrade your eCommerce store to a mobile app by developing native Android and iOS apps for you. The functional 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 of eCommerce app 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 eCommerce stores developed by this Magento Android/iOS Mobile App Maker provide a flawless and reliable experience to the users which will definitely bridge the gap between you and your customers.

1.1 Module Installation

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

  1. Buy the Mobile App Builder module from Knowband. You can download the extension package from here.
  2. The package has a zipped file that contains the user manual and the source code of Mobile App Builder Extension. Unzip the package.
  3. Create a folder{Magentoroot}/app/code/Knowband/Mobileappbuilder
  4. Upload the extracted content in the above folder via FTP manager (like Filezilla or WinSCP – download here: http://filezilla-project.org/).
  5. 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
  1. 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 Admin Module

Once you have installed the Magento 2 Mobile App Maker module on your website, 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:

general-settings

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.
  1. Enable Request Log Reporting: Enabling the request log allows you to get any report on any abnormal behavior of the application.
  1. 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 allow you to directly assist your users.
  2. 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.
  3. Number of Products: You can select the number of products to be displayed at the various categories on the home screen of the application.

Once you have made all the changes, click on the “Save” button shown at the 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 the user directly to a particular page. Find it for yourself in the following snapshot:

menu-settings

  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:

menu-settings

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 Android/iOS Mobile App Creator plugin.

push-notification-settings

  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 the push notification to any specific application.

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

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

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

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

  1. 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 contain 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:

push-notification-history

  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.

send-notification

  1. Title: – The title of the Push Notification that is to send to the app users.
  1. Message: – The message is displayed on the notification.
  1. 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.
  2. Select Image Type:- Select relevant images for the personalized notification.
  1. 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
  1. 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.

sliders-settings

Edit Slider: Store admin can edit any of the saved sliders by clicking on the ‘Edit’ option as shown in the snapshot below:

slider-settings

  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.

banners-settings

Edit Banner: Store admin can edit any of the banners by clicking on the ‘Edit’ option as shown in the snapshot below:

banner-settings

  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

Magento 2 Mobile App Maker for Android/iOS supports all types of payment methods. PayPal and COD payment options are incorporated in the apps by default.

payment-method-settings

Edit Payment Methods: Store admin configure both PayPal and COD payment methods just by clicking edit option.

payment-method-settings

  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 the sandbox or live option. These settings allow 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.

3.0 Front End Module

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 – Magento 2 Mobile App Maker provides four attractive theme colors in the apps. There is also an option to choose a custom color by clicking on ‘+’ option.splash-screen
  2. Select language – Mobile App Builder for Magento 2 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 to the list, we can incorporate that free of cost.
  3. Choose Font – Mobile app creator 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 want to just experience the app features and functionalities.

3.2 Home Screens

The intuitive product and category screens of eCommerce mobile apps motivate 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.

menu-screen

  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.
  1. Sliders:

Sliders are displayed at the top of the home screen of the app. Sliders are nothing but the various promotional images which changes after a fixed time slot as of a slideshow. These sliders basically redirect your users to a specific product or category screen of application and thus helps in product marketing.menu-screen

Note: Keep the size of the images to be used in them of size 400*600 for clear image preview on the app.

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

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

3.3 Category

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-page-screen

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.

  1. Filter:

App users are also able to apply filtration to the categorized products on the basis of various attributes as price, color, size etc.

  1. Product Listing:

Category products are listed in the grid view. Users can even change the view to list and simply scroll below to get the collection of products.

3.4 Sorting

sorting

3.5 Filter

filter

Users can search any product available on the store just by entering the related keyword in the search icon. Advanced Voice search functionality is also there in Android apps.

search

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:product-image

  1. Product Name and description:

All the necessary details of the product are there in the description.

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

  1. Add to Wishlist:

Users can even add the products to the wishlist for future purchase.

  1. Product Sharing:

Online shoppers can share the products on different social platforms with their familiar ones.

3.8 Shopping Bag

The 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.shopping-bag

  1. Product Listing: Users can find all the saved products in their cart along with the price.
  1. Update quantity: Users can even update the product quantity in this screen with Update Quantity option.
  1. Remove from the cart: Unwanted products can be removed from the cart.
  1. Continue Shopping: When the user taps the Continue Shopping option, they are redirected to the home page of the app to browse more products.
  1. Continue to Checkout: Users can proceed to the checkout screen directly by clicking on the Continue To Checkout option.

3.9 Checkout

Magento 2 Mobile App Maker 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.checkout-screen

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

 

checkout-screen4. 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 the total cost of the shopping cart.

6. Proceed to payment:

Users can go to Payment page simply by clicking on Proceed To Payment option.

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 the Make Payment option to complete the transaction.

in-built-payment-method

3.11 Login

Mobile App Builder for Android and iOS provides quick social login options. Facebook and Google login is provided in the eCommerce mobile apps. It makes the login and registration process hassle free and fast for the app users.login-screen

  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 log in and browse the app with their Facebook account.
  5. Google Login: Users can also log in and browse the app with their Google account.
  1. To create Facebook App and obtain the App ID, refer the following link:

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

  1. To create Google App, refer the following link:

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

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 the following functionalities:

  1. Order History: Provides the complete details of placed order such as order id, date of my-account-screensubmission, order status etc.
  1. Update Profile: Users are allowed to update their personal saved details.
  1. Shipping Address: Users can view all the stored addresses directly by clicking on the shipping addresses option.
  1. Order Detail: Users can view the complete details of the previously placed orders as order id, order status etc. whenever required.
  1. Re-order feature: Reorder feature allows the users to purchase the previously ordered products directly from the My Account screen.

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.

order-detail

3.14 Add Address

Whenever there is a requirement, users can conveniently add new shipping address directly from the mobile app.

add-address

4.0 Features of Magento 2 Mobile App Builder:

Now that you are fully aware that Magento 2 Mobile App Maker by Knowband will enhance your business reach in the easiest and cost-effective way, let’s take a look at some of its sale pushing features in detail:

1. Web Admin Interface

The Magento 2 store admin gets full access of the web-admin interface of Magento 2 Mobile App Creator. 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 for Magento 2 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 Magento 2 Mobile App Creator 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 the store and mobile app

Magento 2 Mobile App Maker 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 Android/iOS 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 the mobile application:

  • Bulgarian
  • Czech
  • Dutch
  • English
  • Finnish
  • French
  • German
  • Greek
  • Hungarian
  • Italian
  • Polish
  • Portuguese
  • Romanian
  • Russian
  • Slovak
  • Swedish
  • Spanish

RTL Compatible languages:

  • Arabic
  • Aramaic
  • Azeri
  • Dhivehi/Maldivian
  • Hebrew
  • Urdu
  • Persian/Farsi
  • Kurdish and others.

8. Multi-currency support

Mobile App Builder for Magento 2 stores provides support to all the currencies available at your store.

9. Unlimited Push Notifications

Mobile App Creator 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 the mobile application.

12. Facebook and Google Login

Magento 2 mobile app maker provides social login option in the 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

Android/iOS Mobile App Creator supports all types of coupons and vouchers available on your store.

14. Native Payment method support

Mobile App Builder for Magento 2 module supports all sorts of payment methods. PayPal and COD payment methods are by default incorporated in the application.

15. Social sharing

Users can share your store products with different social networks directly from the product page of your screen.

16. All sorts of product support

All sorts of product support are provided Magento 2 Android/iOS mobile app builder as simple, virtual, configurable, bundled and grouped products.

17. Multiple shipping methods

Magento 2 Mobile App Creator is compatible with various shipping methods available on your store.

Voice Search option of Mobile App Creator for Android/iOS 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 mobile app maker make the shopping pretty easy and fun for the users.

20. Order tracking

Magento 2 Mobile App Creator provides order tracking feature in mobile apps. Users can view the updated status of their placed order whenever required.

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 *