Magento 2 Mobile App Builder

Home > Magento Extension User Guides > Magento 2 Mobile App Builder

Table of Contents

  1. Extension Installation Guide
  2. Configuration
  3. Other Configuration
  4. Select CMS Page
  5. Mit App Interface
  1. Extension Installation
    • For Magento Marketplace Customers
      • Find the Composer name and version of the extension in the extension’s composer.json file.
      • Login to your SSH and run:
        • composer require meetanshi/magento-2-mobile-app-builder --ignore-platform-reqs
    • Enter your authentication keys. Your public key is your username; your private key is your password.
    • Wait for Composer to finish updating your project dependencies and make sure there aren’t any errors.
    • To verify that the extension installed properly, run the command:
      • php bin/magento module:status Meetanshi_CustomRestApi --ignore-platform-reqs
          • By default, the extension is probably disabled.
          • Enable the extension and clear static view files:
      • php bin/magento module:enable Meetanshi_CustomRestApi --clear-static-content
      • php bin/magento setup:upgrade
      • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
      • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
      • php bin/magento cache:flush
    • For Meetanshi Customers
      • Extract the zip folder and upload our extension to the root of your Magento 2 directory via FTP.
      • Login to your SSH and run below commands step by step:
        • php bin/magento setup:upgrade
        • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
        • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
        • php bin/magento cache:flush
  1. Configuration
    To configure the extension, log into Magento backend, navigate to Stores à Configuration à Mit Mobile App Builder, and configure the following settings:
    • Main Banner Identifier: Enter the identifier of the block, which you want to display on the main banner in the mobile app.
    • Main Banner Category ID: Enter the ID of the category, where the users will be taken on tapping the main banner in the mobile app.
    • Collection Banner Identifier: Enter the identifier of the block, which you want to display on the collection banner in the mobile app.
    • Collection Banner Category ID: Enter the ID of the category, where the users will be taken on tapping the collection banner in the mobile app.
    • Discount Banner Identifier: Enter the identifier of the block, which you want to display on the discount banner in the mobile app.
    • Discount Banner Category ID: Enter the ID of the category, where the users will be taken on tapping the discount banner in the mobile app.
    • Remove Pub/ from media URL? Select ‘Yes’ if you want to remove the pub/ from the URLs of the media files.

  1. Other Configuration
    The Magento 2 Mobile App Builder extension by Meetanshi also lets you set the logo and image dimensions for the mobile app. Scroll down to Other Configuration, and configure the following settings:
     
    • Upload App Logo: Upload your brand logo here. This logo will be displayed at relevant places in the mobile app.
    • Upload Placeholder Image: Upload the placeholder image here. This image will be displayed at places where the original image is missing, broken, or has not loaded yet.
    • Enable Banner HTML? Select ‘Yes’ if you want to enable Banner HTML for the mobile app.
    • Category image dimensions [on homepage]: Set the dimensions of the category image on the homepage.
    • Product image dimensions [on product page]: Set the dimensions of the product image on the product page.

Note: Enter the dimensions in “width_in_px,height_in_px” format. For example: 100,100

  1. Select CMS Pages
    The extension lets you map various pages in Magento, which the customers can access via the app. Select respective CMS pages of Magento store for the following:
    • Customer Support
    • FAQ
    • Refund Request
    • Terms of Use
    • Privacy Policy
    • Legal Policy

After completing the above setup, you’re ready to sell through Meetanshi’s mobile shopping apps🚀

  1.  Mit App Interface
    Once the extension is configured, the mobile app will sync with the Magento 2 store. The mobile app for Android/iOS comes with the following main interfaces:
     
    • Main Screen
    • Categories
    • Contact us
    • Cart
    • Profile (Only for logged in customers)
    • Other Navigation Options

Main Screen

The main screen of the app shows a search bar and the following elements:

    • Main Banner
    • Categories
    • Best Selling Products
    • Category Banner
    • Discount Banner
    • New Products

The banners are displayed as per the configuration in the Magento 2 Mobile App Builder extension, and takes the user to the configured categories. The home screen displays all the main categories in the store, with icons uploaded in the backend (You can change these icons from Magento Backend > Catalog > Categories > Edit Category Content).

The best selling and new products are showcased as per the default features of Magento.

Categories

The second interface of the app lists all the categories and sub-categories in the store. The sub-categories (up to 3rd level in hierarchy) are displayed under their parent categories. The customers can browse the products either in Grid or List view.

Contact Us

Third interface displays the default contact us form of Magento 2.


Search, Filter, and Wish List

The handy search bar helps the customers easily find the products in the store. Furthermore, they can also filter the products on the category pages by various criteria.

The little heart icons near the products add the products to wish list, which can be later accessed by the customer.

Product Screen

The app’s product screen is very clean and intuitive. All the details about the product are displayed, such as images, videos, short and long description. Scrolling down, the customers can also find more information and reviews about the product.

Furthermore, there is also an option to share the product, tapping which, the customer can share a link to the product page via various available sharing options.

Product price and Add to Cart button (the main call-to-action) are sticked on the bottom of the screen.

Seamless Checkout Process

The customers can find all the items added to the cart, along with details about order total, applicable tax, and grand total. The customer can edit the items quantity or delete any item, apply the promo code, and proceed with the checkout. After entering the billing & shipping details, the order confirmation screen provides complete details of the order before checking out.

Lastly, the customers can complete the order by completing the payment from the available payment methods.

Customer Sign in

The customers can sign in to their account by entering Email & Password. On successful sign in, the Profile interface appears on the app, where the customer can find:

    • Account Information
    • My Orders
    • My Wish List
    • My Downloadable Products
    • Newsletter Subscriptions
    • My Product Reviews

Other Navigation Options

On tapping the Hamburger on the top-left corner, the customers can find other useful links. It includes:

    • Customer Support
    • FAQs
    • Refund Request
    • Terms of Use
    • Privacy Policy
    • All Legal Policies

These options take customers to respective pages as set in the extension. In the menu, the customer can also choose to:

    • Change Currency
    • Log out
    • Change App Theme

Updated:

Other Articles

and 228 more ...