Magento Mobile App Builder – User Manual

1.0 Introduction

The Magento Mobile App Builder for Android/iOS can convert your Magento Store into a complete mobile app. When it comes to enhancing the user experience, a mobile store is a must-have for the eCommerce sites. The Magento Android/iOS mobile app creator by Knowband are exceptionally skilled and proficient in converting your site into a wonderful feature packed mobile app for your targeted customers.

A mobile store is definitely one such solution that can take your eCommerce business to far off places. With the support of this Magento mobile app maker for Android/iOS, you can seamlessly target your multi-platform customers and grab maximum sales as well as customer engagement. The Magento eCommerce mobile app builder can make your eCommerce business accessible to mobile-based consumers. The store owners can now improve the chances of their business growth and expansion. This mobile app maker for Magento lets Magento store owners 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, a mobile app 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. The Magento Mobile App creator bridges the gap between the online retailers and the mobile users.

1.1 Salient Feature of Magento Mobile App Builder

Some of the features of this mobile App maker are:

Tablet-Optimized: The Magento mobile app maker allows seamless shopping experience to the users regardless of the device they are using. The Android/iOS mobile app works on tablets, Android phones, iPhone, iPad and others.
Social Login: Quick login options offered by Magento mobile app builder reduces the sign-up process of the consumers. Provide social media login options (Facebook/ Google).
Multi-lingual support: The Mobile app builder for Magento offers multi-lingual and multi-currency support.
Easy Synchronization: The Magento Android/iOS Mobile App creator offers real-time synchronization. No manual integration is required. The Magento app builder offers seamless synchronization between your store and App.
Live Chat Option: The incorporated Zopim chat services allow the store admin offer 24/7 chat option to the customers.
Compatibility: The mobile app builder is compatible with 1.9.x version of Magento. At the same time, it is compatible with the latest version of Android and iOS.
Interactive Interface: The m-commerce apps come with a bundle of interactive themes. The store admin can choose the theme that matches his site.
Easy Navigation: The uncluttered interface and filters offer easy shopping experience. The voice search option is offered by the Android mobile app builder only.
All Product Type Support: The Magento Mobile app creator supports all type products. The app supports simple, configurable, virtual, bundled and others.
Supports all payment and shipping methods: The mobile app builder for Magento supports all type of payment and shipping methods.
Simple Checkout: The single page checkout of Magento eCommerce mobile app builder makes it easier for the online shoppers to complete their transaction.
Easy Order Tracking: The customer can track their orders from their account.
Push notification: The store admin can keep the customers informed about the offerings of the online store. Magento mobile app maker offers unlimited push notification facility to the merchants.

2.0 Working Process of Magento Mobile App Builder

Follow the below-mentioned steps in order to upgrade your eCommerce site into a mobile application:

Step 1: Purchase the Magento Android/iOS Mobile App Creator module and download. Install and enable the Magento Mobile Builder extension on your store. It enables communication between your mobile app and store.

Step 2: Our development team will, then, design the app for you. Share the below requested details, so that, we can generate your Android/iOS app (APK file).

  • Splash image (1280×1920 png)
  • App icon (512×512 png)
  • Theme color (Blue, Orange, Green, Black)
  • Website URL
  • Website Name
  • Desired social login option name out of Facebook and Google.

Step 3: After receiving the above-requested information we will share an APK file with you, which you can post on your “Google Play Store” account so that your customers can download your app.

Note: In case of social login, before we generate APK file for you, you also need to share your APP id with us. To generate this APP id we will share a hash key with you along with all instructions. Usually, it takes around half an hour to create an APP id.

2.1 How to get your Mobile App Builder?

You can get the demo version of the Android mobile app builder and iOS mobile app builder from Google Play store and Apple App store respectively.

itune

playstore

 

 

Download and install our Android Mobile App Builder Free and iOS Mobile App builder Free in your store. You can see the demo of your store and how the app would look like once it is live.

Once you are satisfied with the functionality of the eCommerce mobile app, you can get your application is a few simple steps:

picture1

1. Please click on the below link and fill up the form to provide the basic information for the application:
https://www.knowband.com/forms/view.php?id=30′
2. Share the Facebook and Google app keys with us if you choose for social logins.
3. KnowBand will share the APK for your application.
4. You can release the APK on Play store/ Apple store or we can do the same for you free of cost.

3.0 Mobile App Screens

3.1 Splash Screen

The splash screen is the initial screen of the eCommerce mobile which will appear to the users once they install and open the app.
Choose your App theme: The application comes with a number of themes to choose from. The user can select a theme of the App as per his/her choice.

View Demo: Free Magento Mobile App Builder allows the user to view the demo store.

App Theme

3.2 Home

The seamless home and category pages designed by the Magento Android/iOS mobile app creator lures the customers to dig into the store. The home screen consists of slide-screen, banners, featured products and special products of your store.Home Page  C:\Users\Velocity-1601\Downloads\Magento App\Magento App\Image 2.png

1. Splash-screen: Splash-screen will appear on the top of home screen.

Note: Make sure that Magento splash screen module is enabled in the back-end of the Magento eCommerce mobile app builder plugin. The size of the slides must be >= (900*400) w * h for clear image preview on mobile App.

2. Banners: Banners will be presented below the splash-screen in the vertical direction.

Note: Make sure that Magento banner module is enabled from the admin interface of the Magento mobile app creator module. The size of the banners must be >= (600*400) w * h for clear image preview on mobile App.

featured product

3. New Arrivals Products: New arrivals products will be listed in grid view just below the banners.

Note: Make sure that Magento featured products module is enabled from the admin panel of the Magento mobile app builder extension. The size of the products must be >= (200*200) w * h for clear image preview on mobile App

Special Products

4. Best Seller Products: Bestseller products will be listed below the featured products in the horizontal direction.

Note: Make sure that Magento special products module is enabled feature is enabled from the back-end of the Magento android mobile app builder module. The size of the products must be >= (200*200) w * h for clear image preview on mobile App.

5. Menu: The menu on the left side of the home page of the Android/iOS application allows the users to navigate their way through the app easily. Menu options provided to store visitors are as follows:

Menu

  • Categories: The links can take the users to the category page of the mobile application. The user can select and land directly on the category page of the store.
  • Login/ Logout: Allows user to login/ logout of their store account.
  • About Us: Allows users can view store about us page.
  • Contact Us: Allows users can view store contact us page.
  • My Account: Users can have access to their account where s/he can view their order history or update their account details.
  • Languages: The Magento iOS mobile app maker for Android/iOS offers multi-lingual support. The users can select the desired language from here.
  • Currency: The Magento android Mobile App creator is even multi-currency compatible. The visitors can select the currency in which they want to interact.

6. Search: The search option in the home page allows the users able to search for any product at a button click.

7. Shopping Cart: Users can view the cart details by simply clicking on cart icon shown at the top of homepage.

8. Wish-list: logged-in users would also be able to view their wish-list products by simply clicking on the wish-list icon shown at the top of homepage.

Screenshot_2016-06-15-19-14-29

3.3 Category

The Magento android Mobile app creator offers a cutter-free category page for the store visitors to shop and find the product that they find interesting. The Menu option in the home page lists all the categories and their sub-categories of the store. The online shoppers can land on the category pages by clicking on the desired category from the menu bar. Category section offers various functionalities:

4

1. Search: With Magento mobile app developer, users will be able to search any product in store by simply clicking on the search icon shown at the top of the category page.

2. List/ Grid View: With Magento Android/iOS app builder, users can simply change the view of category screen to list or grid as per his/her need.

3. Sort: Magento eCommerce mobile app creator allows users to sort result based on price (low to High or High to Low).

4. Filter: Magento eCommerce mobile app maker allows users to apply multiple filtration of products based on their attributes.

3.4 Product

Product screen allows the users to view the product details such as product image, description, and attributes (size or color). The product page of the mobile store offers various functionalities:

1. Add to Cart: The store visitors admin will be able to add a product to their shopping cart by simply clicking on ‘Add to Cart’ button shown at the bottom of the screen.

2. Add to Wish-list: The customers can also be able to add a product to their Wish-list by clicking on ‘Add to Wish-list’ button shown at the bottom of the screen.

3. Select product Attributes: Magento eCommerce mobile app creator allows users to select the product attributes like Size, Color and so on.

4. Product Info and Care: User can browse for the information regarding the product like Product reference number, Product composition, SKU number, Product condition, Brand and so on.

5. Product Customization: A customizable product can be browsed on the Magento mobile app with an option to customize the text.

6. Packed products: Users can browse for the packed products where multiple products are sold as a single quantity.

       Note: Make sure the size of the products must be >= (400*400) w * h for clear image

Screenshot_2016-06-15-18-52-07

Screenshot_2016-06-15-18-52-21

Screenshot_2016-06-15-18-53-53

Screenshot_2016-06-15-18-54-19

3.5 Login

Magento Mobile App Builder offers a number of social login option. The Magento mobile app facilitates the users to login and manage their account. The app users offers social login (Facebook/ Google) facility to ease and maximize user account login.

1. Login: Authenticated users would be able to access their account by with their login credentials.

2. Forget Password: With Magento eCommerce Mobile app maker, registered users can also opt for reset password by sampling providing their email.

3. Social Login: Magento Android/iOS mobile app maker allows users to access their account from social media such Facebook/ Google.

4. Signup: Users can create their account on the store from mobile App by providing the all the necessary details required during the signup process.

5. Continue as Guest: User can also be able to place an order as a guest user without being login into their account.

Screenshot_2016-06-15-19-01-15Screenshot_2016-06-15-19-01-20

                                            Screenshot_2016-06-15-19-02-07

3.6 Shopping Cart

The shopping cart of the app allows the customers to save as many products as they want to. The customers get to view the total cost of the products as well as the discount coupons available. The Magento eCommerce mobile app builder This allows the users to view products details, apply coupon or voucher and total cost summary. This section offers various functionalities:

1. Product Summary: The store visitors can find the complete detail of the product(s). It also provides the option to update the quantity or remove any product on the shopping cart. The details can be seen in multiple languages as Magento iOS mobile app creator offers multi-lingual support.
Products out of stock can also be removed from the cart by simply clicking on remove button shown on product details section.

2. Apply Voucher: The Magento mobile app maker extension supports all type of coupons. The users can also apply for any valid voucher to their shopping cart.

3. Gift Wrap (Additional Cost): The customers can even opt for the gift wrapping of the products if this functionality is enabled from the back-end of the Magento Mobile app builder plugin. An info for the additional cost of gift wrapping is also shown.

4. Message to recipients: If gift wrapping is enabled, the users get an option to add a message to the recipient of the gift.

5. Total Cost Summary: Once the product is saved in the cart, the details of the total cost of the shopping cart can be viewed.

Screenshot_20160629-104502

Screenshot_2016-06-15-18-56-52

3.7 Final Checkout

Review checkout screen of the Magento mobile application allows a user to view the checkout details that include shipping address, order summary, shipping methods and total cost summary.

1. Shipping Address: Provides detail of shipping address entered by a user.

Add/ Edit Shipping Address: Users can also add or update shipping address as per his/her requirement.

Note: Total cost will be estimated based on selected shipping address and method.

2. Billing Address: This section provides the detail of the billing address selected by the customers.

Add/ Edit Billing Address: Users can also add or update billing address as per his/her requirement.

3. Order Summary: Order summary provides the detail of the product(s) added to cart by the user.

4. Shipping Methods: The Magento mobile app creator module supports all type of shipping methods. The end-users can select any shipping method from the existing options for the selected products.

5. Edit Shipping Address: In the case of a logged-in customer, if a shipping address is already added, it will be selected by default. However, users get an option to edit the provided shipping address. If an address is not provided already, users are taken to the add shipping address form.

6. Total Cart Summary: The cart summary provides the details of the total cost of the shopping cart.

Screenshot_2016-06-15-18-58-15

3.8 Payment Methods

Magento eCommerce mobile app builder plugin supports all sort of payment methods. The payment methods screen of the application provides the list of payment methods exist on the store. The user will be required to select any payment method to proceed further with the payment transaction.

After a user selects a payment option. The app takes him/her to a web view to make the secure payment. After a successful payment, the user is directed back to the app view where he/she can view the order details in order history in My Account section.

Screenshot_2016-06-15-19-00-44

3.9 My Account

My account screen of the Android/iOS mobile app allows the customers to view their account details. This section allows you to view the list of the previous orders placed by users. My account section offers various options. They are listed below:

1. Order History: The customers can view their transaction history. They can see the details of order(s) being placed by the user such as order id, placed the date, status and order products.

2. Update Profile: Users can also be able to update their profile details such as first or last name, phone number.

Screenshot_20160629-104623

3.10 Order Details

Order details screen of the eCommerce mobile app provides the detail of order placed by the user such as shipping address, order summary, shipping and payment method and payment summary.

C:\Users\Velocity-1601\Downloads\Magento App\Magento App\Image 16.png

3.11 Creating Facebook App

Please click on the respective links to know more about the configuration of the Facebook and Google App:

For Android:

How to create Facebook App for Android :
https://www.knowband.com/blog/user-manual/android-mobile-app-builder-configuration/

Watch video:

Facebook Account: https://youtu.be/TT-uXSPISks

Google/Firebase Account: https://youtu.be/XIYd7u3h574

For iOS :

How to create Facebook App for iOS:
https://www.knowband.com/blog/user-manual/ios-mobile-app-builder-configuration/

Watch Video:

Facebook Account: https://youtu.be/Zv_uSNfMXRc

Google/Firebase Account: https://youtu.be/Cw7WDqvYNkM

3.11.1 Prerequisites for creating Facebook App- Will be provided by Knowband

  • App Package Name (com.example.xxxx)
  • App Class Name (MainActivity)
  • Android Key Hash

3.11.2 Creating Facebook App

  • Go to https://developers.facebook.com/. If you have not registered yourself as a developer yet then Facebook will ask you to register as a developer. Simply register as a developer.
  • From the top navigation menu hover over My Apps.
  • Then click Add a New App.
  • You will be asked to select a platform, click on android.
  • On the new page, you can select quick start or you can select skip and create app id from the upper right corner.
  • Click on skip and create app id.
  • Give a display name and a namespace for your app as shown in the image below.

login with facebook android

3.11.3 Creating Facebook App ID

  • Click create app id.
  • You will be redirected to your apps dashboard.

login with facebook android

3.11.4 Apps Dashboard

  • Here you can get your app id. Copy the app id it will be used further.
  • Now from the left menu, click on settings.
  • Click on add a platform and select android.
  • Enter your package name and class name of your main activity (MainActivity) and click on save changes.
  • Make sure you also provide contact email which will be required to make this App public.
  • Now your need to provide App Key Hash which was shared with you earlier.

login with facebook android

3.11.5 Adding a Platform for your App

  • Now to make this App accessible to all, you need to make it public.
  • Now from the left menu, click on App Review.
  • Turn the switch next to ‘Do you want to make this app and all its live features available to the general public?’ to Yes.

enter image description here

  • Now your App will be publicly available. You can see the green circle next to App name on below image:

enter image description here

  • Please share your Facebook App ID with knowband.

3.11.6 Creating a Project at Google Developers Console

Prerequisites for creating Facebook App – Will be provided by Knowband

  • App Package Name (com.example.xxxx)
  • Android SHA1 Key

Creating Google Project

  • Log in to Google Plus account and go to this link and click on create project.

developers console

  • Now fill the details and click on create.

new project

  • Now we need a configuration file for our android app. So go to this link. Select your app we just created on developer console.
  • Provide package name and choose country and click on continue.

google developers

  • Provide SHA1 key which was share earlier and Enable Google Service page.

enable google signin

  • Now click on Enable Google Sign-in and click on Continue to generate configuration files. Now click on download google-services.json to get your configuration file and share the same with Knowband.

4.0 Advance Marketplace Feature of Magento mobile app builder

Knowband introduces the Magento marketplace mobile app builder that is compatible with Magento multi-vendor marketplace as well. If you are using Magento marketplace extension of Knowband, then, you can now have an app for your online marketplace with great ease. Magento marketplace mobile app builder for Android/iOS allows you to launch a marketplace app that offers all the features to attract a larger base of sellers and customers.

Follow the below-mentioned steps in order to create your own marketplace app with Magento marketplace mobile app builder:

  • Purchase the Magento marketplace mobile app builder extension from Knowband site.
  • Unzip the zipped file. Copy the files and folders and paste them in the root directory of the Prestashop marketplace.
  • Fill up the form shared by Knowband and share your specification with the team. The app will be designed and developed as per the requirement.
  • The APK file of the app will be shared to you. This can be used to publish the app on the various app stores.

The app developed by the Magento marketplace mobile app builder offers all the features discussed above. In addition, the app offers a ‘Seller’ option in the main menu as shown in the image below.

marketplace mobile app

As the user clicks on this 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.

marketplace mobile app

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

marketplace mobile app

The profile can be viewed, changed and managed from the app itself.

Magento Mobile App Builder: https://www.knowband.com/magento-mobile-app-builder

Magento Marketplace Mobile App Builder: https://www.knowband.com/magento-mobile-app-multi-vendor-marketplace

Admin Demo Link: https://mageapp.knowband.com/index.php/admin/

Front Demo for Android: https://play.google.com/store/apps/details?id=com.velsof.magentogenericapp

Front Demo for iOS: https://itunes.apple.com/in/app/magento-nautica-app-builder/id1290688278?mt=8
Video Link: https://www.youtube.com/watch?v=kTUIKbkDLus

Liked This? You’ll Like These Too

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.

3 thoughts on “Magento Mobile App Builder – User Manual

  1. Hi
    We are interested in iOS and Android versions of Mobile Builder App for Magento/ WooCommerce platforms.
    Please inform:
    a) Is the WooCommerce version available or will take some time.
    b) Do you provide the Source Code? We require the same to add modules as required.
    Thanks

  2. Reading this article was an experience. I enjoyed all the information you provided and appreciated the work you did in getting it written. You really did a lot of research.

  3. Reading this article was an experience. I enjoyed all the information you provided and appreciated the work you did in getting it written. You really did a lot of research.

Leave a Reply

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