Mobikul Mobile App Builder for Magento
Table of Content
Live Demo
Introduction
The Mobikul Mobile App Builder for Magento will convert your Magento Store into a native mobile application.Which means that, now the users can easily visit your store by using the mobile application (Android/iOS) on the go.
The mobile application has the better user experience with splendid features and functionalities and it is fully compatible with your default Magento Store.
Not only this, the mobile application provides a user-friendly experience and enhances the customers’ engagement with the mobile platform.
Added to that, the customers of the current generation are smart enough and aware about what they need to purchase and from where.
Further, this paves a great growth opportunity for the e-Commerce retailers to bridge the gap between the digital and physical shopping experiences.
What is MOBIKUL?
After creating a major share in the world of e-Commerce software marketplace, Webkul is all set to move into the new areas of mobile applications
Mainly, it is possible by stepping from the world of e-Commerce to m-Commerce with its new product “MOBIKUL”.
Mobikul is compatible with all the e-Commerce Platforms like Magento, OpenCart, Prestashop, Open ERP, Shopify, X-Cart, CS-Cart, Joomla and WordPress.
Mobile technology is a broad category that includes all devices, protocols, and infrastructures that allow one to communicate, interact and exchange data with an individual or system.
Examples include mobile phones, PDAs (Personal Digital Assistants), etc.
Meanwhile, the main reason for the increase in preference for mobile apps is that it is not necessary that the seller is really reaching the customers with their emails, personalized notifications etc.
As, it may be possible that they are not accessing these options at the time of need, but since mobile has become a necessity in today’s world and everyone is having the same in their hands.
MOBIKUL will provide Instant Connectivity of shoppers with notifications, offers and deals at that juncture only.
Above all, creating an interactive interface for your mobile website is a complex task. It must be easy to use and understand, like:
- Firstly, the buttons must be big enough so users don’t have any problems “tapping” them.
- After that, the scroll lists shouldn’t be too long so the users won’t get bored.
- It must attract the consumer’s eye.
- Images size should be moderate so that download will not take much time.
Finally, here comes our role to remove the complexities and make the tasks easier for you to try your hands on a new experience.
Features
- To attract the attention of the customers anytime anywhere, while they are on a move with their mobiles.
- Assuring you for your customers’ privacy and security concerns.
- To Open a New Avenue for increasing the Sales.
- Providing flexibility and ease of connectivity, in learning about customers.
- To increase customers’ engagement because of their growing reliance on mobile technology.
- To increase the engagement and conversion rates of customers the need is to send relevant Push notifications over their mobile phones.
- The product search will be done via ML kit (ready to use APIs in Google’s Firebase).
- The customer will have the facility of Current Location detection via Pin Map API to add in the new address to there profile.
- Provides an easy way to compare the Product, Prices, and Reviews.
- ‘Time Critical services’ like Push notification, and alerts.
- Easy ‘Sharing of Products’ through various platforms like Whatsapp, Fb, Twitter, etc.
- Ease of use of ‘Attractive and Convenient UX’.
- Application frameworks or Operating systems, which it supports are ‘Android and Apple platforms’.
- Provision of ‘Synced carts or Cross-Platform carts’ to bestow a seamless experience to browse on one platform and purchase from another.
- It provides ease to the shoppers as stored data does not have to enter again, like delivery address and nilling details, etc.
- Providing ‘Multiple trustworthy Payment methods’ like Paypal, MangoPay, Stripe, WePay, Credit Cards, Cash on Delivery, etc.
- Providing Layered Navigation for filtering the products on various attributes.
- Interactive Front-end Panel for the stores.
- An additional feature providing Multiple Store Views in which the store can be customized to view in Different languages.
Admin end
After the successful installation of server side code on your Magento server.
First, you need to flush the existing Magento cache.
This can be done by going to System > Cache Management.
Then click the “Flush Magento Cache” button.
And After this, from the Actions, choose the “Refresh” option and click the “Submit” Button.
You will see an additional tab with the name of “Mobikul” appearing on your Magento admin panel.
If you just hover over this tab you will find a list of options, namely:
- Add /Manage Banner Images
- Add/ Manage Notifications
- Featured Categories
- Add /Manage Category’s Banner n Images
- Mobikul Configuration.
Mobikul Configuration
This is the part that helps in connecting your mobile application to your server.
This part itself contains four blocks, namely:
- Mobikul Api Configuration
- Push Notification Parameters
- Basic Configuration
- Search Setting
Mobikul Api Configuration:
This part is exactly responsible for making the connection with your Magento server.
You should never change the values for any field under this block.
Push Notification Parameters:
This part is responsible for delivering the push notification to the users of your application.
FCM API key is the server key you receive when you create an account on firebase console. A slight change in the value of this field can stop the working of push notification on your application.
Although, you can change the topic whenever you want to from your admin panel, it is not advised to do so after the publication of the application on play store.
Moreover , whenever you change this value you should let your developer know on an immediate basis.
Basic Configuration:
This is the setting which you can change in order to manage the content on the home page of your application.
It has three options:
- Enable random featured product in home page?
FIrst, set this option to yes if you want to have some random products under “Featured Products” on the homepage of your mobile application. - If you set this option to “No”, then only the products that have the “Is featured for Mobikul” set to yes will be visible in this category.
- Allowed CMS Pages
From this menu, you can control the CMS Pages that you wish to include into your mobile application.
NOTE: We support only HTML tags under this option. If you need to include any other CSS script, then you need to inform us.
- Enable Mobile Login
This feature allows you to enable the users to log in to their accounts using their mobile numbers.
Search Setting:
Note- To know more about Admin end Configuration of the Mobikul app, refer here, Mobikul Application Magento Admin Panel.
Interactive Homepage
The Magento Mobikul, Mobile App Builder has the really interactive Homepage. It includes the followinhg sections:
- The Slider Banners( Homepage banners): The admin can add as many as slider banners from the backend admin panel and can add the categories and products for respective banners.
- Shop By Category: This attractive features will make the application more user-friendly as the admin can add the interactive banners images and each image will have a category.
- Featured Product Carousel: This carousel includes all the featured products of the store.
- New Product Carousel: This includes the new products that are added to the store for the easy interaction of the product with the customer.
- Hot deals section: Also, the product with the discounts and offers are displayed here.
Further, the category is selected by the Admin from the backend panel. Including the main category, the admin also adds any sub-category with the respective image.
Product Carousel
Featured Product Carousel: This feature shows the featured products from the all the categories or specific categories splendidly in the horizontal carousel slider.
Also, this feature is really user-friendly from the mobile application perspective.
New Product Carousel: This feature displays all the newly/latest added products of the store in the horizontal carousel slider so that the customers will always know about the latest products of your store.
Right Navigation Drawer
In the right navigation drawer, the customers can easily access all the account information in this account section.
This page includes:
- Dashboard
- My Downloadable Products
- My Wishlist
- Account Info
- Notifications
- Logout
Dashboard
Under the Dashboard Section, three options are available for the customer:
- The customers can view and edit the list of addresses which includes billing address, shipping address and additional address.
- The second option includes the order list with respective order status.
- Also, the customers can view the list of reviews.
Automatic Address detection –
By this feature, the address of the customer will be detected automatically without even typing it. Sometimes, it becomes a heck for a customer to type multiple fields for address to the dashboard.
When, the customer enters the Dashboard of the application and clicks on ADD ADDRESS or EDIT button, a form will appear under My Address section , which is shown in the image below:
In addition to that, this feature provides the customer with two different ways to add a new address or edit the existing ones in a smarter way, which are mentioned as:
- GPS: If the customer has to add their current location as the address then by clicking on the GPS icon the address will get updated in the fields of the address form, as shown in the below image:
Note: The GPS of your device must be enabled from the settings to use this feature.
- Pin Map implementation: Once, the user clicks on this icon a map dialog box will appear with a pin. The customer can move that pin throughout the map to set/mark any location as address.
Also, the customer can zoom in or zoom out the map for accurate selection of the location.
Added to that, the list of address will contain the Default Addresses and also the Additonal Addresses which are added by the customer:
Under My Order tab, it will show all the orders made by the customer with their Order Ids, Date, Shipment Details, Order Status and to View/ Reorder.
Also, under My Review tab will list up all the reviews made by the customer on different products of the store with the reviews and ratings for the product.
My Downloadable Products
It will display the details of all the downloadable products of the customer with Order ID, Date, Title, Status and Remaining Downloads, along with a link to open the product directly.
My Wishlist
It will exhibit the products added by customers which they want to purchase, with product details, selected quantity and an option to add the product to cart or remove it from the wishlist.
Account Information
It allows the customer to update the account information details by filling up the fields like First name, Last name, Email,
Also, the customer is provided with an option to change the password of the account.
Notification
After sending the notification from admin, it will appear on the notification link. Also, the customer can see all the notification sent by the admin.
Left Navigation Drawer Page
This left navigation category page shows all the categories of the store. It has the Search Terms Option and Advanced Search Option so that customer can easily search any product of the store.
Additionally, All the cms pages of the store will also show in this section like about us, contact us.
All Categories and Products
The feature permits to display all the products of the store, with their assigned and associated Sub-categories and Parent category in the mobile application too. Which will allow:
- All the categories (Root category with their Sub- Categories).
- And, all the products (Simple, Virtual, Configurable, Grouped, Bundle and Downloadable) of the store owner.
THe categories and products which are displayed on the store, will also be shown in the MOBIKU.
The Page will display the Status of the product, Details of the product, Quantity selected and options for-
- Add to cart.
- Add to Wishlist.
- Share Options.
- Choose Option like Color, Size.
- Description and Additional Information.
- Review and Ratings.
Catalog
To provide a hassle-free experience for the customer in order to prevent them from searching for everything, a catalog accommodates the features like:
- Layered Navigation
- Search Engine Visibility (by capturing traffic with highly relevant keywords), etc.
Search
The search feature operates in 3 ways-
- Like: Finds the similarity between the keywords matching with product titles.
- Full Text: This search matches the exact keyword with the titles
- Combine: This search is a mix of both i.e. Like and Full Text.
There are two ways to search for a product, one is the search engine known as Catalog Search which will show all the products related to the searched keyword along with its Price and buttons for adding it directly to wishlist or to compare.
The other is Advanced Search (under Quick Links) to find products on more parameters like Name, Description, Price, Color, Size, Gender etc. In order to narrow down the navigation.
Other techniques of search.
This feature allows the customer to look for the product via image scanning. The app uses Google Firebase’s ML kit- a ready to use API. The app will save the search time via two ways-
- Text Detection– The app user can search the product by allowing the scanning of the text in on an object. Currently, the text detection works for English language only.
- Product(Object) Detection– In this case, the app user can search the product via the real-time object. That is the app user can scan the product in reality which will open up the list of linked products.
Layered Navigation
To make the navigation more flexible and user-friendly, layered navigation simplifies the product search, filtering items based on their attributes.
The image below represent the filters can be applied on the home and decor product:
Moreover, it benefits the customer to narrow the search according to the desired product. These can be changed according to specified product attributes.
The store owner can control the filters from backend and thus can benefit the customers by-
- Speeding up the products search
- Saving their time.
- Providing more search flexibility.
Shopping Cart
The specified tab will redirect you to the shopping cart page which will display the products in the cart with product details like:
- major attributes
- price
- quantity
- subtotal
- an option to remove the product from the cart.
Also, it provides the options to apply discount quotes (if any) and to estimate the shipping and tax rates according to the customer’s location and shipping rates.
The Grand Total amount will be shown along with a button to proceed towards the checkout.
Taxes
Calculation of Taxes (Tax Rule) is based upon 3 mandatory fields- Customer Tax Class, Product Tax Class, and Tax Rate.
Added to that, each customer is assigned to a particular Customer Class, similarly, each product will be associated with a particular Product Class (selected at the time of creation of the product).
Magento calculates the Tax by matching these 3 areas:
- Tax Class of the product in the cart (Taxable Goods, Shipping goods etc.).
- Tax Class of the Customer (Whole seller, Retailer etc.).
- Location of the transaction taking place (which is set in the section “Manage Tax Zones and Rates” ) traced from Billing or Shipping Address.
Checkout
Further, the Checkout is divided into 4 sections-
- Showing Billing and Shipping Address with options to update/ change it.
- Selection of Shipping Method which may include the option to add Gift options (if enabled).
- Payment information from various payment gateways.
- Order Review, which will display all the products with its Price, Quantity and Grand Total after adjusting discounts, shipping charges etc. With Sub-Total.
Shipping Method & Payment Method
It’s a way through which buyer decides to pay the seller for the goods and services purchased. A customer can choose a payment method based on the owner’s list of preferred payment methods.
Moreover, various Payment methods provided by the app are Paypal, Cash on delivery, Saved Credit Cards/ Money Orders, Bank Transfers, Cheques etc.
The section will be shown at the time of checkout where the details for the chosen payment method needs to be entered.
After selecting shipping method and payment method, the customer can review the order. After reviewing, the customer will receive a message “Your Order Has Been Received” with the order id.
Store View
It provides an option for Multiple Store views, i.e. the feature allows user to customize the Store View in various languages like-
- English
- French
- Arabic
- German
- Italian etc
Support
That’s all for the Magento Mobile App, still, have any issue feel free to add a ticket and let us know your views to make the module better https://webkul.uvdesk.com