Tag: Android App Builder

WooCommerce Mobile App Builder – User Manual

Get fully Flutter Android & iOS apps for your WooCommerce website & start selling your products on Mobile Apps!

1.0 Introduction

WooCommerce Mobile App Builder

This is the user manual for WooCommerce Mobile App Builder’s cutting-edge and ready-made Flutter mobile app solution. This eCommerce website plugin was created and expertly crafted to help you create flawless and feature-rich Android and iOS shopping apps.

1.1 Introduction to WooCommerce Mobile App Builder

The most sophisticated and automated way to expand your online business to mobile platforms is with the WooCommerce Mobile App Builder. It turns your entire website into a mobile app with features and enables you to sell products on mobile devices in addition to the traditional website. The app’s features and operation perfectly mirror those of the website and are compatible with both Android and iPhone devices.

The pre-configured framework used by our WooCommerce Mobile App Builder was created by experts and professionals to create two Flutter eCommerce apps (Android and iOS). The apps can bring every item in your store to the user’s fingertips and increase sales and revenue. Therefore, this is your best opportunity if you are a WooCommerce store merchant looking for a complete mobile app solution. To get complete information on WooCommerce Mobile App Development, read the article in its entirety.

Additionally, the Multi-vendor Marketplace plugin is fully compatible with our WooCommerce Mobile App Builder extension. The same Mobile Apps can be used to access the entire marketplace listing. Even better, we provide a bundle that includes both WooCommerce Advanced Marketplace With Mobile App and WooCommerce Multi-Vendor Marketplace.

Moreover, You would be persuaded to choose this Flutter app solution if you considered the following advantages of WooCommerce Mobile App Maker:

  1. A mobile app solution with no coding.
  2. A welcoming administrative panel with full access.
  3. Free assistance for three months
  4. Completely Flutter remedies (Android & iOS)
  5. Synchronization of your apps and website at all times
  6. Extremely flexible in terms of design and operation.
  7. Uses practical marketing tools to boost user engagement.
  8. Increases your store’s revenue and traffic.

Top Qualities of the WooCommerce Mobile App Builder:

The following is a list of some of the major features that your apps with WooCommerce Mobile App Builder will include:

  • The layout of the home screen can be changed (Complete Flexibility)
  • Store Identities
  • (24/7) WhatsApp Chat Support
  • OTP and fingerprint login for both tablets and smartphones with Google and Facebook
  • Support iOS 9 and subsequent iOS versions, as well as Android 4.2, and up versions support.
  • automatic inventory updates.
  • Numerous Font & Color Options
  • bilingual and RTL (Right To Left)
  • Support All Product Types
  • Support Multi-currency
  • Support Website Shipping Method Supported on Apps
  • Support Website Payment Method
  • Push Notifications indefinite
  • Options for Product Social Sharing
  • Numerous options for sorting and filtering
  • Wishlist Functionality
  • Internet coupons or vouchers backed by apps.
  • Checkout Screen with Fewer Details
  • Live Order Monitoring
  • Unbroken Accordion Menu
  • Clear-cut Category & Product Screen

Latest Version Updates in WooCommerce Mobile Apps:

With an integrated “Add To Cart” button for products on the Home & Category screen, the WooCommerce Mobile App has been made more usable for online shoppers. By simply tapping the cart button, users can quickly add products to the cart.

The category screen of mobile apps also features an Add To Cart button. Users only need to scroll to the bottom of the page to browse the products and keep adding items to their shopping cart by tapping the Add To Cart button.

A) App Reviews for Products

Our WooCommerce Mobile App is currently compatible with WooCommerce’s built-in Product Comments module. The user can now post product reviews on the website, and those reviews will also show up on the app. The user has access to both read and write reviews on the app.

b) Related App Store Products

The Automatic Related Products module is now compatible with the WooCommerce Mobile App Builder. On the product page of the website and mobile app, related products can be shown. This compatibility can be a wonderful tool for your company to increase cross-selling.

C) Deep Linking: A deep linking feature is built into the WooCommerce Mobile App. Now, when a link is shared, the user will be taken to the application rather than the website. Installing the app on the mobile device is the only requirement. The user will even be directed to the appropriate app screen by the shared link.

D) Accessibility in Offline Mode: With this extension, eCommerce mobile apps will now function even when there is no internet connection. Users are able to browse any time the pages that were loaded while the internet was active. Products, categories, the cart screen, etc.

–> Explore WooCommerce GDPR Module

E) Spin & Win (Gamified Email Subscription) Compatibility:

The WooCommerce Spin & Win extension is also compatible with the WooCommerce Mobile App Creator. On the web store, a spin-wheel interactive pop-up that can be scheduled for entry or exit display is provided by the gamified email subscription pop-up. The same pop-up will now be automatically displayed on the apps thanks to this integration. The extension only needs to be installed on your website.

F) Video Banner Elements: Knowband’s WooCommerce Mobile App Builder now supports video banners on the home page. Store admins can upload videos directly or embed YouTube videos, making the home page more visually appealing and improving the user experience.

G) List/Grid View: Knowband’s WooCommerce 2 Native Mobile App Builder for Android and iOS allows app users to easily switch between list and grid views while browsing products. This feature improves the shopping experience by providing a flexible and attractive way to explore products. Users can toggle between views using the list/grid button on the product listing pages.

H) Automated Banner Sliders: The latest Knowband Magento 2 Mobile App Builder includes an automated banner slider feature. Store admins can easily set the sliding interval from the module’s backend. This is especially helpful for “Banner Horizontal Sliders” on the home page, allowing admins to add both video and image banners for a more dynamic and engaging display.

I) Enhanced Review Section: The Knowband mobile app features an improved review section. Approved reviews are displayed with a better user interface, offering a more visually appealing and seamless experience for both Android and iOS users.

–> Investigate the WooCommerce Spin Win Module

This is not the end of the list. Learn more about the features in-depth from this page.

2.0 Demo of the WooCommerce mobile app

KnowBand is aware of your hesitation to use the solution and has provided all owners of eCommerce stores with a free demo in order to allay your worries. The merchants can see their store operating on our demo apps as well as our demo store operating on mobile devices.

2.1 Check Out Our Demo Store for Apps

Want to see the features of the eCommerce app? In order for you to explore the app and see all of its features, we have integrated our demo store with it. Just adhere to the guidelines below:

Step 1: Your mobile device can be used to download and install the Nautica WooCommerce Mobile App. The following are links to download trial versions of the following apps:

Apple App Store  – https://testflight.apple.com/join/mrvIRLfw

Google Play Store- https://play.google.com/store/apps/details?id=com.velsof.woocommercegenericapp

Secondly, the Click the view demo button after launching the Nautica WooCommerce App.

I’m done now! On the demo app, you will see our demo store operating. You can browse it, test out every feature, place orders, etc.

Note: Click here to access the KnowBand Mobile App Builder Admin Panel on our demo store.

2.2 Watch Your Store Operate with Demo Apps

Not content? Do you wish to test the demo apps on your store? We have everything covered for you, though. On our demo app, you can also experience your store, and at no cost. You only need to follow these 3 steps to achieve the same results:

  • Install the FREE WooCommerce Mobile App Builder plugin on your store as the first step.
  • Install the Demo Apps on your mobile device in step 2 (links are in the previous section). Open the app and type in the store URL.
  • Click “View Your Store” to begin using demo apps to explore your store.
  • Type your store’s URL into the box that appears.

For instance, see https://www.example.com/

Note: No APK or IPA files will be provided with this module; this Free version of Mobile App Builder is only for demonstration purposes. You must buy the WooCommerce Mobile App Builder’s paid version in order to obtain your own APK/IPA files.

3.0 Create a mobile WooCommerce app in 3 easy steps

We hope you enjoyed the WooCommerce Mobile Apps demo and discovered what you were looking for. So now is the perfect time to add a pair of Flutter apps to your store. An eCommerce mobile app can be created in the most straightforward manner possible. Your app will be ready in just 3 easy steps and 1-2 working days.

First, add the module to your website.

Install WooCommerce Mobile App Builder on your store after downloading it.

Step 2: Share the details of your application

Use our prerequisites form to share your app’s specifications.

Step 3: In 1-2 days, receive your apps

Our knowledgeable and experienced developers create your apps precisely in accordance with the shared details. In 1-2 days, we would reply with APK/IPA files.

Note: These APK/IPA files can be published on the appropriate app stores.

 

Still a problem? Tell us, and we’ll help you publish the apps. Furthermore, you can contact us at support@knowband.com if you have any questions or suggestions.

4. Installation of Module

You will receive the files listed below once you have purchased the WooCommerce Mobile App Builder module:

1. ZIP-formatted compressed file (contains the source code of the addon)

2. User Guide

You can now continue the installation process in one of the two ways listed below:

Details of module installation via FTP

Installing a module using admin details

5.0 Screens for the admin panel

It’s time to set up the WooCommerce Mobile App Creator’s Admin Panel after it has been successfully installed on your website. You will see the following tab with user-friendly interfaces as soon as you select the “Configure” option on the KnowBand Mobile App Builder. Let’s eliminate each one individually.

5.1 General settings:

The settings needed for users’ devices to run your mobile app are all covered under the General Setting tab. This tab has every generalized option required to sync the app.

A) Enable Plugin: To make your mobile app functional on users’ devices, enable the WooCommerce Mobile App Creator plugin.

B) Enable Spin and Win: When any user opens the app, enable the display of a gamified spin-wheel pop-up on the home screen. It can be used to provide discounts and deals in exchange for their email addresses, which are then used for marketing. The Spin and Win module from Knowband must be installed on your website in order for this functionality to function.

The Spin and Win Module will only function if the plugin has been installed in your store end.

C) Redirect on Cart Page when Add To Cart: This feature enables you to manage the “Add To Cart” button’s navigation. When a user taps the Add To Cart button, you have the option of sending them to the shopping cart or keeping them on the product page. This increases the likelihood of making additional purchases.

D) Display Short Description: Allow the short description of the product to appear on the product screen alongside the full description and other information.

E) Choose Layout: Pick the Home Page Layout you want for your WooCommerce app. According to different holidays and themes, you can create a variety of home screen layouts in the backend and use them as needed for your store.

Choose the preferred button color for your WooCommerce Mobile App under Option

F) App Theme Color: Pick your WooCommerce Mobile App’s preferred theme color.

G) Logo image: Put your store’s logo on the app’s top header by uploading it. This helped your brand gain recognition among global mobile customer s.

H) Disabled Shipping Methods: Select the shipping options you want to be hidden from the WooCommerce Mobile App.

I) Enabled CMS Pages: Select the CMS pages you want to appear on mobile apps.

J) Enable Request Log Reporting: Enable the log feature on mobile apps to learn more about any unusual behavior exhibited by your app.

K) Enable WhatsApp Chat Support: On your WooCommerce Mobile Apps, enable the WhatsApp chat option. Your WhatsApp number entered in the backend can be used by users to get in touch with you directly.

L) Enable/disable Phone Number Registration: In your WooCommerce Mobile App, enable the Phone Number login option and enable OTP authentication for your users.

M) Enable URL encoding for Image Links: Turn on this feature to allow the app to support characters other than ASCII.

N) Show Add to Cart Button on Product Block: The admin can show/hide the “add to cart” button for the product listing pages with the help of this button.

O) Enable Notification List Feature: The button allows the admin to enable the notification listing features for the app users. If this option is disabled, the notification tab will not appear in the app.

P) Enable Sign In Login Popup: The admin can enable or disable the login/sign-up pop-up for the new customers with this option.

5.2 Settings for Push Notifications

The Google Primary Services for the Push Notification to Mobile Devices are used by the WooCommerce Mobile App Creator for Android and iOS to harness the power of push notifications. It provides this practical marketing tool to increase sales by grabbing users’ attention right away. With the help of your WooCommerce Mobile App, you can easily highlight your current specials and offers. WooCommerce Mobile App Maker offers both automated and customized notifications.

A) Service Account JSON: With the deprecation of the traditional Firebase push messaging API, it has been replaced by a Service Account JSON file. In this section, admins can configure the JSON file from their Firebase account. You can either set it up yourself, or we can provide the Service Account JSON file during the app creation process for your convenience.

B) Order Creation Notification Enable/Disable: Enable/Disable automated Push Notification sent to app users upon successful order creation.

–> Title and Message for Push Notification: To create an order successfully, enter the title and message in the push notification setting.

C) Order Status Changed Notification: Users of the app can choose whether to receive automated Push Notifications when their previous order’s delivery status changes.

-> Title and Message for Push Notification: Enter the title and message whenever the delivery status of an earlier order is updated on the push notification setting.

D) Enable/Disable Abandoned Cart Notification: Enable/Disable automated push notifications that are sent to users whose carts have been abandoned but no successful purchase has been made.

Enter the title and message for the push notification sent to app users who have abandoned their carts.

E) Time Interval: The amount of time (in hours) between which app users who have abandoned their carts without making a purchase will receive Push Notifications.

5.3 History of Push Notifications

This tab includes a history of each type of push notification that was sent to a user with relevant information. The retailer has access to all previously sent notifications. Additionally, a custom notification created in the backend can be sent to the users using this tab. Through manually sent notifications, you can easily inform customers about any information or discounts pertaining to the store.

Send Notification: You can choose to manually send a notification to app users using this option. According to the screenshot below, you can customize the notification’s title, message, landing page, image, etc.

a) Push Notification Title: This is the name of the manual Push Notification you will be sending to app users.

b) Push Notification Message: The text of your manual notification that needs to be sent to app users.

c) Device Type: You can specify which users on Android, iOS, or both platforms you want to receive your manual push notification.

d) Image Type: You are able to upload the banner or image you want to use to support your notification. The banner image can be used directly through a URL or uploaded.

e) Notification Image: The store administrator is given the opportunity to preview the notification image and assess how it will appear on users’ apps.

The actual URL of the notification image that will be sent to app users is listed under item f.

f) Redirection Activity: Here, you can select from the Home Screen, Any Category, or Any Product to redirect your notification. Your users will be directed to whatever you specify when they tap the push notification.

g) Choose the Category/Product: For your notification, you can select any relevant category/product screen.

h) Send Notification: After creating and previewing your notification, it’s time to send it to your apps.

5.4 Payment Procedures

All types of website payment methods are supported by the WooCommerce Mobile App Creator for Android & iOS apps. It also includes the option for COD payments and the flexibility to include additional Web-View payment methods.

In our mobile app, the only available payment option is cash on delivery by default. Disable the COD method from the module’s back end, though, if you want to add the same payment methods as on your WooCommerce store. All of the payment options that are available on your website will work as intended in your mobile apps after the COD method is disabled.

.

5.5.1 Home Page Design

The WooCommerce Mobile App Builder plugin’s ability to design and create multiple home screen layouts using different designing attributes and elements is one of its most amazing features. As can be seen in the screenshot below, this tab contains a list of home screen layout that has been previously configured using different themes & fonts:

The following elements are available in the back-end to configure the home page layouts:

  • Top categories
  • Square Banner
  • Horizontal Sliding Banner
  • Grid Banners
  • Countdown Banner
  • Grid Products
  • Horizontal Sliding Products
  • Recently Accessed Products
  • Add YouTube videos/upload videos on the home page layout.
  • Login/sign-up pop-up for the non-logged-in users.
  • Add custom banners with custom dimensions.

Any of these attributes can be set up by the store merchant and used to create and save multiple layouts. These layouts can be utilized based on the theme and specifications. Additionally, using just a drag and drop functionality, different elements’ positions can be changed.

Top Categories:

Top categories can be configured, including their image and landing categories or products, and are shown as small squares on the home screen. Maximum categories available through the WooCommerce Mobile App Maker are 8, with a minimum of 4 required.

Square Banner:

Top categories can be configured, including their image and landing categories or products, and are shown as small squares on the home screen. Maximum categories available through the WooCommerce Mobile App Maker are 8, with a minimum of 4 required.
In the recent updates, we have also provided the option to showcase different videos with the YouTube Video/Video Upload section added in the “Select Image Type” section.

Horizontal Sliding Banner:

These rectangular sliding doors are available and fully customizable from the backend. Like banner squares, the admin can also highlight the banner sliders by adding video elements. Furthermore, now the admin can get the option to enter the time that he wants to set for the automated banner sliding.

Grid Banners:

These are square-shaped banners that are listed in a grid format on the home screen. On the home screen, you can place as many banners as you like. You can also change the landing page’s image as needed.

Countdown Timer Banner:

A countdown timer is available on the banner provided by the WooCommerce Mobile App Builder. You can choose the landing page and banner image, as well as set a timer for when you want to display the banner. The banner will automatically disappear when the timer expires.

Square Products:

Regarding banners, the WooCommerce Mobile App Creator provides products to show as square listings on the home screen.

Horizontal Sliding Products

The products can be added as horizontal sliders. The products chosen may fall under any one particular category or may be highlighted as Best Sellers, Featured Products, etc.

Grid Products:

Grid listings of the products can also be added to the home screen. Any category can be used to select the goods.

Products Recently Viewed: The WooCommerce Mobile App Creator offers the recent tab element, which shows the most recent products the user has viewed. To display the element on your home screen, simply include it in your layout.

Sign-Up Pop-Up: Capturing visitors’ emails is a major challenge in eCommerce. To simplify this, the latest version of the Magento 2 Mobile App Builder includes a login/sign-up pop-up feature. Store admins can add a pop-up that appears for non-logged-in customers, making it easier to collect emails by offering simple login options and increasing the chances of email opt-ins.

Note: When designing a layout in the backend panel, the store administrator can add up to 20 elements.

6.0 Screens for Mobile Apps

6.1 Home Screen

Your WooCommerce Mobile App’s Home screen will be exactly how you want it to be. You have complete creative control over how to design and create a home screen with the WooCommerce Mobile App Maker. You can create user-friendly home screen layouts using a variety of banners (Square, Grid, Sliding), products (Square, Grid, Sliding), countdown timer banners, and recent products tabs in the backend.

 

Additionally, different design elements’ placements can be changed based on the situation.

1. Dynamic Layouts: You can create and save different layouts in the backend and reuse them for different events and festivals by using a variety of elements. Your app’s home screen can be created and customized dynamically.

2. Brand Logo: The WooCommerce Mobile App’s top header’s left-middle section displays your store’s logo. The logo can be enabled or disabled, as well as having its image changed, from the module backend.

3. Search: The search feature enables mobile app users to find what they’re looking for quickly and easily. The WooCommerce Mobile App offers two ways to search for products: On the WooCommerce Mobile App’s bottom tab bar layout, there is a search option.

–> Text: Users of your app can search for desired products by entering a few relevant keywords. The WooCommerce Mobile App will display results for that keyword that are pertinent.

4. Wishlist Bag: The wishlist bag, which contains all bookmarked products, is visible on the top header of your WooCommerce Mobile App. Users of the app can store their wishlist items in a bag for potential future purchases.

5. Shopping Cart: The Shopping Cart can be found on the app’s home screen in the top-right corner.

The users can get to know about the products added to their cart right from there.

6. WhatsApp:

A live seller-buyer chat option can be found at the bottom right of the home screen. Customers who use your mobile app can easily and directly message you with any questions, and you can answer them right away.

6.2.1 An Accordion Menu (Navigation Bar)

On the website, there are WooCommerce Mobile Apps for Android & iOS that have been developed with accurate product categorization. Mobile shoppers can browse a variety of products with ease. The Accordion Menu is also available for all CMS pages. It offers the following alternatives:

 

1. My Account

All user data, including personal details, shipping addresses, and order details, can be found on the My Account screen. The customers have access to all of their information and can update both their login credentials and personal information.

2. Categories

These categories match those on your website exactly. For easy browsing, you can map them appropriately and provide a 3-level categorization to app users.

3. CMS Pages

Here, a variety of CMS pages from your website, including About Us, Contact Us, Terms & Conditions, etc., are displayed. From the WooCommerce Mobile App Builder backend, you can select the one you want to be shown on the mobile app.

4. Language

Your users can view the WooCommerce Mobile app in their native language using the language selection option.

5. Currencies(s)

The WooCommerce Mobile App also shows all currencies that are offered on your e-commerce website. Customers can view and buy products for the price in the currency of their choice.

6. Sign in/Sign out

This option makes it simple for your users to log in and out of the WooCommerce Mobile App.

6.3 Category Screen:

Your WooCommerce Mobile App includes all of the associated categories, parent categories, and subcategories. The category screen is created with minimal clutter in

1.Two fundamental views:

Grid and List. In every listing, the product name, image, price, and discount are shown along with a button to add them to your wishlist bag. Layered navigation on mobile apps created with the WooCommerce Mobile App Builder makes finding products much easier. The category screens offer the following choices:


2. Sort:

Customers can choose the preferred order for sorting the category product pricing using this option. Your apps have two sorting options: Price: Low to High and Price: High to Low.

3. Filter:

The users can filter out the products using various selection options provided under the filter tab.

6.4 Product Screen:

Your WooCommerce Mobile App’s product screen is straightforward and interesting. Along with the name and price, various images of the same item are displayed. Depending on inventory status, the product availability is also indicated as “In Stock” or “Out Of Stock”. It includes the next additional items.

1. Options

Product Options: This screen shows all available options for the product, including size, color, and so forth. The product choices here match those on the website.

2. Brief Description

Users can quickly decide after reading the brief description of your product.

3. Product Details and Care

This page displays all of the product information that is listed on the website. Users of the app can access this page for detailed product information.

4. Add To Wishlist: By tapping “Add To Wishlist” on the left bottom of the product screen, users of the mobile app can directly bookmark the product.

5. Add To Cart: As the name implies, clicking the “Add To Cart” button adds the product directly to the shopping cart, allowing users to continue with the transaction.

6. Product Social Sharing

On this screen, you have the option to share your product on various social networks, including Bluetooth and email. Users of the app can invite many users to your app by sharing the products with their friends and family on various social media platforms.

6.6 Login Screen

The WooCommerce Mobile App Creator streamlines the sign-in/registration process and provides a variety of one-tap login options:

1. Login

Using their email addresses as sign-in credentials, app users can authenticate and access apps.

2. Register

The mobile app allows all new app users to register and create an account on the store. Only pertinent information is requested on the WooCommerce Mobile App sign-up form.

3. Use Phone Number to Log In

The easier and more reliable phone number login option that your mobile app offers makes it simpler for users to login and verify their OTP.

4. Use your fingerprint to log in

Additionally, your users have the option of using fingerprint authentication to sign in. Users can now quickly access apps thanks to this.

5. Login with Facebook

Users can access the app by logging in with their Facebook credentials.

6. Login with Google

The users can log in to the app using their GoogleAccount within no time.

7. Shopping Cart Screen:

All of the items in your shopping cart are displayed on the WooCommerce Mobile App’s shopping cart screen. The product’s name, quantity, total price, and shipping cost are all visible to app users.

1.Use Voucher

By entering active coupons and vouchers that are currently active on your website, this option enables users to receive discounts and offers.

2. The full product cost

Users can access this page to view the full cost of their shopping bag. It is automatically updated whenever there is a change in the quantity of a product or an addition.

3. Revision of Product Quantity

With the “Update Quantity” option, app users can even change the product quantity.

4. Remove the item

Users of the app can easily remove a product from their cart by selecting “Remove” from the menu.

6. Continue To Checkout

By selecting “Continue To Checkout,” front-end mobile app users can continue to the checkout & payment screens. On the checkout screen, they will receive a redirect.

6.8 Checkout Process

The checkout process in the WooCommerce mobile app Builder is made simple. In the mobile app’s checkout process, front-end users have the option to choose the shipping details, billing details, order numbers, order comments, and so forth.

Orders can be placed using just a few easy steps on the Android and iOS apps.

1. Customers can choose and add the desired item to their shopping carts. When the shopping bag is clicked, the user can also choose the desired product quantity. Users of the mobile front-end app can also view the total number of products and shipping costs.

At the bottom of the same page, the customer can also choose to use any coupon or coupon code.

2. The user can review the order and see several details after selecting the Continue to Checkout option. such as the cost of the product, the cost of shipping, the shipping address (which can be changed on the same page), the order summary (the number of products), the total cost, and so forth.

On the same page, the customer can also choose their preferred method of shipping. The order comment option that appears at the bottom of the screen allows the user to also include any special requests or requirements.

3. After selecting the option to “continue to checkout,” the user will be taken to the screen that asks for their payment method.

Users can choose from all of the website’s payment options on this screen. The shopping app includes a cash-on-delivery option as a standard form of payment.

The user will be taken to the order summary screen after completing the payment activity. where the customer can view the status, cost, and other information regarding their orders. Users of the front-end mobile apps will receive the order confirmation popup messages on their mobile phone screens as well.

6.9 My Account Screen

Users of the Android/iOS eCommerce app can view all account information, including a history of previous orders, on the My Account screen. The following options are available on the My Account screen:

  1. Order History

The users learn all the details of the earlier-placed order. The date the order was submitted, the order number, the price, and the delivery status are all visible to the users screen.

2. Update Profile:

Users can also update their previously saved profile information, such as their first or last name, phone number, and password.

3. Delivery Address (s)

Users of the app have access to the full list of saved shipping addresses. From here, you can also add a new shipping address.

4. Order Details:

The complete list of previously placed app orders is available to app users.

5. Reorder function

By selecting the “Reorder” button, you can directly reorder a product. By pressing a single button, all previous orders will be added to the cart.

6.10 Order Detail Screen

The WooCommerce eCommerce App’s order details screen shows every aspect of the order, including the shipping address, a summary of the products, the shipping and payment options, and the total cost. From this screen, users can even follow the delivery of previously placed orders.

7.0 Video Tutorials

Magento Mobile App Builder – User Manual

1.0 Introduction

A Mobile App is definitely one such solution that can take your eCommerce business to far off places. With the support of the Magento Mobile App Builder for Android/iOS, you can seamlessly target your multi-platform customers and grab maximum sales as well as customer engagement. The mobile apps with Magento eCommerce Mobile App Builder can make your eCommerce business accessible to the worldwide mobile-based consumers. The store owners can now improve the chances of their business growth and expansion. This Mobile App Maker for Magento allows the store owners to 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, nowadays mobile apps 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.

To ease the task for all the Magento store owners out there, KnowBand has brought its readymade framework Magento Mobile App Builder. This pre-designed mobile app solution builds full-fledged Android & iOS apps for your eCommerce website.

1.1 Salient Feature of Magento Mobile App Builder

The Magento Mobile App Builder comes with some of the major sale pushing features:

–> Customizable Home Screen Layout (Complete Flexibility)
–> Store Branding
–> Zopim & WhatsApp Chat Support (24*7)
–> Google & Facebook Login
–> OTP & Fingerprint Login
–> Both Tablet & Mobile Support
–> Android 4.2 to Android 8.0 (Oreo) Support
–> iOS 9 to iOS 11 Support
–> Automatic Inventory Update
–> Multiple Color & Font Choices
–> Multi-lingual & RTL (Right To Left) Support
–> Multi-currency Support
–> All Product Type Support
–> Website Payment Method Supported on Apps
–> Website Shipping Method Supported on Apps
–> Custom Payment Method Integration
–> Unlimited Push Notifications
–> Product Social Sharing Options
–> Multiple Filtering & Sorting Options
–> Advanced Voice Search (Android Only)
–> Wishlist Functionality
–> Website Coupon/Vouchers Supported on Apps.
–> Simplified Checkout Screen
–> Real-time Order Tracking

2.0 Magento Mobile App Demo

KnowBand offers a FREE Magento Mobile Apps demo for you before making the actual purchase. The store admin can experience the apps functioning on your testing devices.

2.1 View Our Demo Store working on Apps

We have set up a free Demo store just to test the Magento Mobile App functionalities. Install the application on your device & explore its flawless working.

Step 1: Download and install the Nautica Magento Mobile App on your mobile device. Here, are the links to the apps:
Apple App Store  
Google Play Store

Step 2: Once the apps are successfully installed, open & tap “View Demo” option on the splash screen. Start testing the apps working with ease.

Note: You can access the admin panel of Magento Mobile App Builder from here.

2.2 View Your Store working on Demo Apps

Still not convinced? Want to test your own website on the demo apps. We got you covered with that as well in just 3 simple steps:

Step 1: Download our Free Magento Mobile App Builder from KnowBand & install the same on your website.

Step 2: Install the demo Magento Apps on the testing devices & enter the store URL in View Your Store option.

Step 3: Tap “View Your Store” and start experiencing your own website on Magento Android & iOS 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 Mobile App Builder.

3.0 Process to build Magento Mobile Apps

Satisfied with our demo apps & want a pair for yourself? Build Magento Mobile Apps in just 3 simple steps:

Step 1: Purchase & Install Module on your website.
Get paid version of Magento Mobile App Builder from KnowBand & install the same on your website.

Step 2: Share some App-related Specifications
We would require some app-related specifications & requirements from your end. For this, we would send a pre-requisites to form with you.

Step 3: Get Your Android & iOS Apps in 1-2 days
Our developers & technical team will develop the apps & get back to you in 1-2 days.

Note: You can publish these APK/IPA files on respective app stores. Refer 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 publishing app on respective stores, we would get it done for you.

4.0 Admin Panel Screens

After successful purchase & install of Magento Mobile App Builder, the store admin can configure the backend panel. Go to System>>KnowBand Extensions>>Mobile App Builder & you would find the following tabs in the module backend:

4.1 General Settings:

a) Enable/Disable: Enable/disable the Magento Mobile App Builder module to make the apps work on the smartphone.
b) Redirect on Cart Page when Add To Cart: Redirect the mobile app users to the cart screen whenever any user tap Add To Cart button.
c) Display Short Description: Enable to display the short product description on the mobile apps.
d) Enable Request Log Reporting: This functionality enables the error log on the mobile devices. This error log file is used to rectify any error or abnormal behavior of App.
e) Enable Fingerprint Login: Enable the fingerprint login option in the mobile apps.
f) Enable Phone Number Registration: Enable Phone Number login/registration in the mobile apps.
g) Select Layout for Home Page: Choose the desired layout for your app home screen. You can create multiple layouts under Home Page Layout tab which will be displayed here in the drop-down menu.

h) Disabled Shipping Methods: Choose shipping methods which you don’t want to display on the Mobile Apps.
i) Enable WhatsApp Chat Support: Enable/disable the WhatsApp chat option on mobile apps.
J) Enable Live Chat Support: Enable/disable Zopim chat options in mobile apps.

k) Enable Logo: Enable logo in your mobile apps. You can upload the logo image which will be displayed on the header of the mobile apps.
l) App Button Color: Choose the button 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.
o) App Theme Color: Choose the theme color for your apps.

4.2 Mobile Menu Settings

This tab of the Magento Mobile App Maker allows the store admin to display various website CMS pages on the Mobile Apps. You can add as many custom CMS pages as you want. The Mobile App Maker for Magento allows you to bring all the website CMS pages on the app.

4.3 Payment Methods:

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

4.4 Push Notifications:

a) Firebase Key: Enter the Google Firebase key to send push notifications on your Magento Apps. You can skip this setting for the Free version. We would set up the same with the paid version of the module.

b) Order Success Notification: Configure automated Order Creation Push notification which would be sent automatically to the user’s who successfully creates an order.
c) Order Status Update Notification: Configure automated 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. This notification is sent repeatedly to the users after a fixed time duration.
e) Send Notification:
If the store admin feels like there is a need to highlight any daily deals or discounts, custom notifications can also be sent to the app users. These notifications can be configured from the backend panel & will be broadcasted to all app users.

4.5 Home Page Layout

The Magento Mobile App Builder offers customizable Home Screen in your apps whose layout can be configured by you. You can create & save multiple layouts based on various themes, festivals or events & select them for your app as per the requirement.

The module offers the flexibility to add as many layouts as needed along with the options to edit previous layouts.

In the Home Page Layout of Magento Mobile App Creator, the store admin gets to edit & customize the following designing elements:

Top Categories:

Top categories are displayed in the form of small squares on the Home Screen which can be configured from the backend using images & landing pages.

Square Banner:

Square Banner is a configurable square shaped listing on the Home Screen whose image & landing pages can be configured from module backend.

Sliding Banner:

The Banners can also be displayed in horizontal sliding & their image/landing page can be configured from the backend interface.

Grid Banner:

The Banners can also be displayed in the form of grid listing on mobile app Home Screen. These banner images & landing pages can be customized easily from the backend interface.

Countdown Banner:

The Magento eCommerce Mobile App Maker offers a count-down timer banner on your home screen in order to offer a time-based sale (Flash Sale). The banner timer, image, landing page can be configured from backend panel.

Square Products:

The products on your store can be listed on the Home Screen of the app in the square listing.

Sliding Products

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

Grid Products:

The products can also be displayed in the grid view on Mobile App Home Screen. These listing can be configured as shown in the snapshot below:

Products Recently Accessed:

The Magento Mobile App Creator brings one more element of Recently Viewed Products. This attribute displays those products in the sliding view which were being visited recently by the user.

Note: The store admin can add up to 20 elements while designing layout in the backend panel.  

5.0 Mobile App Screens:

5.1 Home Screen:

The Magento Mobile App Builder offers a dynamic home screen in the mobile apps which can be easily designed from the backend panel. The store admin gets the complete flexibility to design & craft the home screen as per his/her choice. The Magento Mobile App Builder offers the following designing elements:

–> Top Categories
–> Square Banners
–> Sliding Banners
–> Grid Banners
–> Square Products
–> Sliding Products
–> Grid Products
–> Countdown Timer Banner
–> Recently Viewed Products

The positioning of these attributes can also be changed as well just with simple drag & drop.

a) Dynamic Layouts: Craft alluring home screen layouts on your own which connect with the users & compel them to make the purchase.

b) Website Logo: Add your store logo in the module backend & display the same on the header of the app.

c) Search: The search option in Magento Mobile App allows the users to search for products without any hassle. Both keyword & voice search makes it easier for the buyers to get the right product in the least time.

d) Wishlist: Wishlist option in the Magento Mobile App lets you bookmark the products regarding future purchase.

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

f) WhatsApp/Zopim Chat: Your Magento Mobile App users can directly contact you regarding any query or concern through WhatsApp & Zopim chat option on the home screen.

5.2 Accordion Menu (Navigation Bar)

The Magento Mobile Apps for Android & iOS come up with easy to use categorization of your store products. The online shoppers get to browse all the categories in the navigation bar along with all CMS pages. The Accordion menu categories are the same as of your store & it provides the following options:

My Account:

The My Account screen of Magento Mobile App contains all the user information like Personal Details, Shipping Address(s) & Order Details. There is even an option for the users to register their fingerprint. The online shoppers get to view complete personal details from here & update the password as well.

Categories:

All your store categories are fetched on the mobile apps as well. Offer a multi-level categorization to your app users & let them browse products with ease.

CMS Pages:

All of your website CMS pages like About Us, Contact Us, Terms & Conditions, etc will be displayed here.

Language(s):

The Magento Mobile Apps are both multi-lingual & RTL supported. The users can choose the desired language & all the app contents will be translated accordingly. Every language available on the store is displayed here.

Currency(s):

Just like languages all sorts of currencies available on your website will be displayed in Magento Mobile Apps. This allows the users to make the payments with the desired currency option.

5.3 Category Screen:

All sorts of categorization available on your Magento stores will be displayed in the mobile apps as well. The category screen has two views: Grid & List view. The product image, name, price is displayed for all product listings. The mobile apps with Magento Mobile App Maker have multiple filter & sorting options which simplify product search for the users.

Grid & List View:

The products can be displayed in both grid & list view.

Sort:

Sort option in Magento Mobile Apps allows 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 product screen of Magento Mobile App is as simple & easy-to-use as it could get. Every product has multiple images displayed along with name & price. The product availability is also displayed as “In Stock” or “Out Of Stock”. The product screen has the following other 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 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 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:

The Magento Mobile App Builder has a wishlist bag allowing the users to bookmark products for future purchase. The 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 Mobile App Creator offers various one-tap login options & make sign-in/registration process more seamless:

Login:
The app users can authenticate & access to Magento Mobile Apps using e-mail sign-in credentials.

Sign Up:
All the new users can sign-up & create their account on the store from mobile App. The sign-up form of Magento Mobile App is fully uncluttered.

Login with Phone Number:
Your Magento Mobile App comes up with phone number login option as well which allows users to verify OTP & login without any hassle.

Login with Fingerprint:
Your app users also get an option to log in with a fingerprint. This biometric authentication allows the users to login apps in seconds.

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

Login with Google+:
The users can log in into app using their Google+ Account Credentials.

5.7 Shopping Cart Screen:

The Shopping Cart screen of your Magento Mobile App will display all products added into shopping cart. The app user’s can view Product name, quantity, total price & shipping cost. This screen has the following options:

1. Apply Voucher:
This option allows the users to get discounts & offers by entering valid coupon & voucher running on your website.

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

3. Update Product Quantity:
The users can even update the specific product quantity.

4. Remove Product:
The app users can simply remove the product from the cart.

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

6. 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 mobile apps built with Magento Mobile App Maker has a simplified checkout approach on a single-screen. The users can review complete order details like shipping details, billing details, order summary, order comment, payment summary before making the actual order.

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

Order Summary:
The 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 one from here.

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

5.9 Payment Screen:

The payment screen on the Magento Mobile App displays both web-view & native app payment methods. The Magento Mobile Apps supports all sorts of website payment options 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.

5.10 My Account Screen

My Account screen of the Magento Android/iOS App allows the users to view the complete account details including list of all previous orders. My Account screen has the following other options:

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

Order details screen of Magento Android & iOS App provides complete order detail such as shipping address, product summary, shipping and payment method and total cost summary. This order detail is of the previous order placed by you. The users can even track the delivery of previously placed orders directly from this screen.

6.0 Advanced Magento Marketplace with Mobile App

KnowBand’s Magento Marketplace converts your online website into a fully fledged marketplace. The Magento Mobile App Builder is fully compatible with Magento Marketplace extension. This means you can bring the entire marketplace listing on the same Magento 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 the Magento Mobile App Builder plugin with:

Magento Mobile App Builder

Advanced Magento Marketplace with Mobile App

Admin Demo Link

Front App Demo for Android

Front App Demo for iOS

Video Link: