Reading list Switch to dark mode

    CS-Cart Multivendor Mobikul Mobile App

    Updated 6 February 2024

    CS-Cart Multivendor Mobile App: In today’s expectancy having a Flutter native mobile app is essential for every e-commerce business. However, developing an application that supports mobile is expensive and time-consuming.

    The CS-Cart Multivendor Mobikul Mobile App Builder solves the needs of users by providing an appealing, complete mobile application at an affordable price. This splendid application allows every size of business to flourish and expand into the mobile world.

    Check the video mentioned below for an overview of the frontend of this mobile application:

    xGmcNTG8oL4

    Check the video mentioned below to understand the backend configuration settings of this mobile application:

    t8h3u4PTxaM

    Features

    • Well integrated with CS-Cart Multivendor store.
    • Besides this, the functionality of multiple profile creation is available and can be availed once enabled at the admin end.
    • Display of vendor list at the front end.
    • Option to view vendor’s profile information and corresponding reviews of the vendor at the user/customer end.
    • In addition, the functionality of displaying individual vendor products collection at the front end is available.
    • The option to select a shipping method according to the vendor at the user/customer end is available.
    • Informative and interactive shopping app with a fast and intuitive response.
    • Also Supports default CS-Cart shipping methods.
    • In addition supports phone orders, cash on delivery, fax order, money order, and personal cheque as payment methods.
    • The option of the gift voucher, promotional and coupon codes have been provided.
    • Also, a Push notification feature over the devices has been provided.
    • Well configured and easy to use at the admin end.
    • Moreover, the application is compatible with GDPR.
    • The customer can search for products with voice.

    Features added in CS-Cart Multivendor Mobikul Mobile App version 2.0

    • Functionality to support multiple currencies.
    • In addition, functionality to support multiple languages.
    • Add featured categories to the mobile app. 
    • Add CMS pages to the mobile app. 
    • Set walk-through for the mobile app. 
    • Add product and image-based carousels to the mobile app. 
    • Home Page Configurator option for the mobile app in the admin backend. 
    • Cache clear option in the admin backend.
    • Choose the app Icon and category views from the available ones.
    • Choose the app theme as Light or Dark.
    • Configure the light and dark theme mode configuration.

    Benefits

    • Increases relationships and loyalty by reinforcing the store.
    • Benefits sell through exposures across mobile devices.
    • Moreover, Strengthen the connectivity with on-the-go customers.
    • Well-supportive in terms of accessibility, immediacy, and reachability.
    • Be noticeable and visible every time on the user’s mobile device.
    • In addition avail the benefits of the creation of a direct marketing channels.
    • Helps in improving customer involvement.
    • Besides this, it ensures ease of accessing e-commerce sites via mobile.

    CS-Cart Multivendor Mobikul Mobile App

    After downloading the CS-Cart Multivendor Mobikul Mobile App, you’ll get one zip
    file and install it. text. Read the blog carefully and configure it accordingly. Firstly Go to the manage add-ons page. Browse and select the zip file, upload, and install.

    Find the Best CS-Cart
    Development Company
    Find out More

    Initial Configuration – Admin End

    After installing the add-on, navigate through Add on->Manage add-ons->Webkul Software Pvt. Ltd. ->Mobikul.

    Mobikul1-1

    Here, tap on the Open option to view the available settings for the same. 

    cs-cart.webkul.in_mve413_demoadmin.php_dispatchaddons.managesupplierWebkul20Software20Pvt.20Ltd.store-screenshts

    Now, tap on the Mobikul Link and navigate to the Settings->General section.

    General:

    cs-cart.webkul.in_mve413_demoadmin.php_dispatchaddons.updateaddonmobikulasd

    Here, the admin will enter the – 

    • Google FCM Project ID
      You will get the Project ID of the Firebase app when creating a new app for the Firebase cloud messaging.
      Mobikul3
    • Enter the Google FCM Private Key.

      Click on the generate new private key button in the service account section to download the JSON file.

      Mobikul4

    • Enter the email address. 
    • Enter the API Key. 
      Mobikul3-1
    • Enable Cache:
      When the enable cache option is checked it will clear the cache in the mobile app after an interval of set time.
    • Cache Time: 
      Enter the time in minutes to clear the cache from the app.

    Application:

    cs-cart.webkul.in_mve413_demoadmin.php_dispatchaddons.updateaddonmobikulasd-1

    Here, the admin will –  

    • Display the Play Store link:
      If the “Display Playstore Link” option is enabled (visible on the web storefront), and a URL is provided in the Playstore Link field, it will direct users to the respective app on the Play Store.
    • Display the App Store link:
      When the “Display Appstore Link” option is activated (visible on the web storefront), and a URL is entered into the Appstore Link field, it will result in a redirection to the corresponding app on the App Store.
    • Enter the Play Store.
    • Enter the App Store link.
    • Set the visibility on the top or bottom of the website as required. 
    • Display Text:
      The entered text will be visible on the front of the Play Store and App Store buttons on the web storefront.

    The web store front view will look somewhat like the images shown below:

    Mobikul7

    Payment Methods: 

    cs-cart.webkul.in_mve413_demoadmin.php_dispatchaddons.updateaddonmobikulasd-2

    Here, the admin will – 

    • Select payment methods – The payment methods selected by the admin will be visible on the app end.

    Shipping Methods: 

    cs-cart.webkul.in_mve413_demoadmin.php_dispatchaddons.updateaddonmobikulasd-3

    Here, the admin will select the Shipping methods as required for the mobile app. The chosen methods will be displayed on the app’s interface.

    App Configuration:

    cs-cart.webkul.in_mve413_demoadmin.php_dispatchaddons.updateaddonmobikulasd-4

    Here, the admin can make the configurations for – 

    • App Icon View – There are five types of launcher icons available.
      App-Icon-View
      App Icon Type 1&2 View:

      mockup

      mockup-1

      App Icon Type 3,4 & 5 View:

      mockup-2

      mockup-3

      mockup-4

       
    • App Category View – The admin can also manage the category views by selecting – Default Category View and Tab Category View.
      App-Category-View
      Default Category & Tab Category View:

      mockup-5

      mockup-6

    • App Theme Mode
      App-Theme-Mode

    The admin can also make the settings for – 

    • Light mode Theme Configuration

    cs-cart.webkul.in_mve413_demoadmin.php_dispatchaddons.updateaddonmobikulasd-5

    Here, the admin can set the –  

    • App Button Color
    • App Theme Color
    • Button Text Color
    • Theme Text Color

    Light Theme:

    mockup-7

     

    Apart from that the admin can make the settings for – 

    • Dark Mode Theme Configuration

    cs-cart.webkul.in_mve413_demoadmin.php_dispatchaddons.updateaddonmobikulasd-1-1

    Here, the admin can set the –  

    • App Button Color
    • App Theme Color
    • Button Text Color
    • Theme Text Color

    Dark Mode:

    mockup-8

     

    Mobikul – Management Options

    Navigate to Mobikul and here you will find the various options to configure.

    MobikulDropdown-1The options include – 

    • Banner 
    • Featured Category
    • Notifications
    • Pages
    • Augmented Reality
    •  Walkthrough 
    • Carousel
    • Home Page Configurator
    • Clear Cache. 

    Let’s go through each of the sections one by one: 

    Banner: 

    Tapping on the banner option brings up the complete list of banners if already been created. Otherwise, you will see this section as empty when you come to this section.

    Screenshot-from-2024-02-02-17-57-27

    Here, the admin will be able to create the banners for the mobile app. Apart from that, you can edit, delete, and deactivate banners as required. 

    To add a new banner, tap the “+” icon on the top right-hand corner, this brings up the below section. 

    New Banner

    Set the parameters as shown below in the snapshot-

    • Enter the name of the banner.
    • Set the banner type based on product, category, External Link, or No Link as required.
    • The option of selecting of product is available when the banner type is set as “product”.
      Product Banner
    • The option of selecting the category is available when the banner type is set as “category”.
      Category Banner
    • The option of entering the external link is available when the banner type is set as “External Link”.
      External Link banner
    • In the case of No Link, only a banner creation option is available.
      No Link Banner Type
    • Upload the image via the given options.

    After selecting the appropriate options, save the banner. 

    Featured Category:

    Under this section, you will find all of the created featured categories for the mobile app. 

    cs-cart.webkul.in_cscart413_demoadmin.php_dispatchmobikul_category.managestore-screenshts

    Here, the admin can add a new featured category for the mobile app, edit the already added one, and delete or make the status of the featured category active or disabled as required.

    featured category cs-cart multi Vendor mobile app

    To add a new featured category listing, tap the “+” icon, and that brings up the below section. 

    FeaturedCategory2

    Here, enter the –  

    • Featured Category name. 
    • Tap the add categories option to add categories as featured.
      cs-cart.webkul.in_cscart413_demoadmin.php_dispatchmobikul_category.updatestore-screenshts-1
    • Check the Visible Name on the App checkbox.
      cs-cart.webkul.in_cscart413_demoadmin.php_dispatchmobikul_category.updatestore-screenshts-2
    • Set the status as enabled.

    The admin can also edit the featured category.

    FeaturedCategory3

    Notification: 

    Here, the admin can create two types of notifications – product and category.

    Mobile app notifications cs-cart multivendor mobile app

    Apart from that, the admin can send the created notifications to the mobile users by selecting and tapping the Send selected button.

    send notification cs-cart multi vendor mobile app

    To create a notification, tap the “+” button, and that brings up the below section.

    create new notification for cs-cart multi vendor mobile app

    Here, the admin will – 

    • Enter the title of the notification. 
    • Select the type as Product, category, or other. 
      cs-cart.webkul.in_mve413_demoadmin.php_dispatchmobikul_notification.updatestore-screenshts-1
    • Choose the image for the notification. 
    • Choose the product or category as per the selected option “Type”.
    • Set the status as Active or Disabled. 
    • Enter the Content for the notification.

    Tap, the Create button to create the notification.

    Pages: 

    Here, the admin can add the CMS pages for the mobile app that can be accessed by the users. 

    Mobile App CMS Pages

    Here, to add a new Page or CMS Page tap the “+” button, and that brings up the below section. 

    Add new CMS Page for mobile app

    Set the parameters as mentioned below –

    • Set the title of the page.
    • Choose the position in the mobile app. 
    • Choose the page. 

    Lastly, tap the Create button to create the page.

    Augmented Reality:

    Navigate through Mobikul-> Augmented Reality as per the snapshot below.

    ArgumentedReality1-1

    AR enables the customer to make an informed choice by providing them with a realistic view of the product. Here, the admin can see all of the AR products that he has added.

    Argumented-Reality2-1

    To add an Augmented Reality product the admin will tap the “+” button and the below section appears.

    new ar product

    Here, the admin will –

    Choose Products: Here the admin needs to select the products for Augmented reality view.

    Upload Android 3D model: A media file (Image) for Android is uploaded using the Android File section, and the image format is GLB.

    Upload iOS 3D model: The iOS File section is where media files (images) for iOS (Apple) are uploaded. The image format for iOS is USDZ.

    AR Status: Here the admin can enable or disable the AR functionality.

    Lastly, tap the Create button.

    Walkthrough:

    Navigate through Mobikul->Walkthrough.

    Walkthrough1

    Here, you will find all of the walkthroughs that you have created if any. To add a new walkthrough, tap the “+” button, and that brings up the below section.

    Walkthrough2

    Here, the admin will enter the –

    • Title of the walk-through.
    • Description of the walk-through.
    • Set the position on the mobile app.
    • Upload the Walk-through image.
    • Set the status as enabled or disabled.

    Lastly, tap the Create button to create a new walk-through.

    The admin can also edit a walkthrough.

    Walkthrough3

    This is how the walkthrough will appear on the mobile app.

    mockup-3-3
    mockup-4-2

    Carousel:

    Here, the admin can create multiple carousels using products and images as required.

    Carousel1

    To create a new carousel, tap the “+” button and the below page appears.

    cs-cart.webkul.in_mve413_demoadmin.php_dispatchmobikul_carousel.updatestore-screenshts

    Here, the admin for the new carousel will –

    • Enter the title of the carousel.
    • Set the position of the same.
    • Choose the carouse type as product or image as required.
    cs-cart.webkul.in_mve413_demoadmin.php_dispatchmobikul_carousel.updatestore-screenshts-1
    • If the type is chosen as Product then select the sub-type as – Best, Popular, Newest, Special, Discounted, Feature, Brand, Category products, and after that choose the number of products to display.
    • If the type chosen is an image then select the sub-type as – All Parent Categories, Brand, Feature Category, or Banner.
    • Set the Status as Active or Disabled.

    Lastly, Save the new carousel.

    The carouse will be visible in the mobile app as per the snapshot below.

    mockup-5-2
    mockup-6-2

    In the case of the type chosen as Product:

    The admin can create the sub-types as mentioned below using the CS-Cart Multivendor Mobikul Mobile App feature –

    Popular Products – This will display products that are currently popular or trending on the app.

    Popular-Products

    Newest Products – Under this section, the app users will be able to purchase the latest products in the store.

    Latest-Products

    Best Products – Under this section, the app users will be able to purchase the best products in the store.

    Best-Products

    Discounted Products – This category displays products that are currently on sale or being offered at a discount.

    Discounted-Products

    Brand Products – The brand products section will help you to search for products by brand.

    Brand-Products

    Special Products – Products which are available with maximum quantity discount on the web store.

    Special-Products

    Category Products – A category product is a way for a business to group similar products together for customers to find them.

    Category-Products

    Feature Products – With the Featured Product admin able to highlight a particular product on a web store.

    FeatureProduct

    In the case of the type chosen as Image:

    The admin can create the sub-types as mentioned below using the CS-Cart Multivendor Mobikul Mobile App feature –

    Slide Banners – These are images or graphics that are displayed on the home screen of the app to highlight specific products, promotions, or events.

    Slide-Banners

    Featured Category – The admin can simply add featured categories to display them on the Mobikul app.

    The admin can configure the featured category as per the requirement by setting up the featured category information.

    Featured-Category

    Brand Images – These are brand images that are displayed on the home screen of the app.

    Users can check the products as per the brand and then tap on the one they are interested in to see the products or services in that brand.

    Brand-Images

    Home Page Configurator:

    Navigate through Mobikul->Homepage Configurator.

    The admin can manage the sorting of the category carousels present in the mobile app.

    Then the admin can change the position by easily dragging the category and dropping it to the desired position.

    Homepage-Configurator-1

    Clear Cache Memory

    CS-Cart caches scripts, styles, templates, etc. to increase page loading speed.

    If the changes you’ve made don’t appear on the page, try clearing the cache. To clear the cache, navigate through Mobikul>>Clear Cache.

    ClearCache-3

    Home Page View

    At the front end, the customers can see the slides, and carousels(the admin can add many carousels from the backend).

    • Category Carousel- The category carousel typically consists of a row of clickable images or icons, each representing a different category.

      Users can swipe through the carousel to see all the available categories and then tap on the one they are interested in to see the products or services in that category.
    • Slide Banners- These are images or graphics that are displayed on the home screen of the app to highlight specific products, promotions, or events. Recently Views-
    • On-sale Products- This category displays products that are currently on sale or being offered at a discount.
    • Popular Product– That will displays products that are currently popular or trending on the app.
    • Top Brands– The top brand section will help you to search for products by brands.
    mockup-21
    mockup-1-2
    mockup-2-3
    mockup-3-2

    Search View

    The customer can search for a product by specifying the keywords. Auto-suggestion is also here. The customer can also search with voice.

    mockup-4-1
    mockup-5-1

    Search via Image – Here, the search is done by image. The app learns about the desired product through image detection or text detection. After the machine learns it searches for the product in the app.
    Scan with Text – Here, the app user can search the product by allowing the scanning of the text on an object. Currently, text detection works for the English language only.

    mockup-6-1

    Product Page View To The Customers

    The customer can view a product after clicking on any product from the category. The customer can see the product image, specification, description, reviews, and price of the product and vendor details.

    mockup-7-1
    mockup-8-1

    If the customer clicks on the vendor name, they will redirect to the vendor’s profile” page

    Customers can make checkout without login through “Checkout As Guest” and customers redirect to the checkout page

    Under the navigation drawer, the customer can access their account, can see the orders and wishlist.

    Easy Sign In and Sign Up Page: In the navigation bar, the customer can log in to their account. 

    • Shop for Categories
    • My Wishlist
    • Track Order
    • My Orders
    • My Address
    • My Dashboard
    • Notification
    • Account Information
    • Delete Account
    • My Wallet (Paid)
    • All Vendors
    • Language
    • Currencies
    • Others
    • Logout Option.
    mockup-9-1

    Sign In/ Sign Up

    The customer can sign in and sign up for his accounts through the app. So, the Sign In/ Registration page can give the customer the options as-

    • Sign in with the Email address
    • Create An Account
    mockup-10-1

    Please Note – Social Login is a separate paid feature. It is not included in the base mobile app as visible in the below image:

    Sign Up- Create An Account

    mockup-11-1

    The customer can register for their account by filling in only the email, password, and confirming password fields and then completing the checkout process.

    Sign in

    Post-registration the customer can log in via the mail id and password that was mentioned at the time of registration.
    Here, on this screen, the customer can even select the ‘Forgot Password” option.

    After signing in customers have the option to “add a fingerprint for login” option.

    mockup-12-1
    mockup-13-1

    Post login our navigation drawer will contain- Here the customer can use the feature of All in One drawer. All in one drawer will provide the category view and the account view.

    Category View:

    Access categories by tapping the Category option in the bottom side of the app.

    After clicking on the parent category, the customer can see the list of subcategories. Where the customer can go for the product according to their choices.

    mockup-14-1
    mockup-15-1

    Filter and Sort By: Customers can apply the filter according to their needs on the category page. Also, there is a facility to sort the products. Products can be sort by alphabetically, pricing, popularity, and newest item.

    mockup-16-1
    mockup-17-2

    List and Grid View: Products can be viewed as both grid and list. The customer can change the view of the product after the grid or list button.

    mockup-18-1
    mockup-19-1

    My Dashboard:

    The Customer can access My Address, My Orders & My Wishlist Tabs under “My Dashboard”, or direct from the navigation tab. To access one of these, the Customer has to click on the respective choice.

    mockup-20-1
    mockup-21-1

    My Orders

    Customer can view their orders under the “My Order” tab. The customer can view all the orders created for the store. A single order can also be viewed by the customer.

    mockup-22-1
    mockup-23-1

    The customer can click on Start Communication, to conversate on orders.

    mockup-24-1
    mockup-25-1
    mockup-26-1

    My Wishlist

    The customer can make their wishlist for the product. A Wishlist button will appear on all products. The customer can see their wishlist product under the “My Wishlist” section. The customer can remove the wishlist product from there.

    mockup-27-1

    Track Order

    The customer can track their orders under in “track order” section in the navigation tab, Customers need to enter their order email id or order number and submit.

    mockup-28

    Notifications

    The notification tab can be seen in the navigation drawer, customer can set notifications for selected products by him/her related to any offer, Price reduction on products available in-store.

    mockup-29

    My Account

    My account link can be seen in the navigation drawer. Under my account, the customer can see their account information like billing address, shipping address, and mailing list. The customer can also see their profiles. A user can have multiple profiles like an official profile and a home profile.

    mockup-30
    mockup-31

    My Wallet (paid)

    In this Customer can access his/her e-wallet on the mobile application, in this, he can either see the present wallet amount, add money to the wallet, or can find out his wallet transaction

    wallet1
    wallet2
    Reacharge_wallet-_1__samsung-galaxys20ultra-cosmicblack-portrait

    All Vendor

    The customer can see the All Vendor link under the “Navigation Drawer”. After clicking on this link, the customer can see all vendor list. When the customer clicks on a vendor, can see the contact information of the vendor, the shipping address of the vendor, and the description of the vendor. The customer can also view the products of the selected vendor.

    mockup-32
    mockup-33

    Customers can apply the filter according to their needs on the category page. Also, there is a facility to sort the products. Products can be sort by alphabetically, pricing, popularity, and newest item.

    mockup-34
    mockup-35

    Products can be viewed as both grid and list. The customer can change the view of the product after the grid or list button.

    Language and Currency

    The customer can also change his currency according to the requirement using the CS-Cart Multivendor Mobikul Mobile App. Under the profile icon, they can see the language bar, where they can change language and currency.

    Here, the Others section is also visible with the CMS pages for the customers. Tapping the same brings up the content for the CMS page.

    mockup-36
    mockup-45

    After the change in the language and currency, all data of the app will change with respect to language and currency.

    mockup-1-3
    mockup-2-4
    mockup-37
    mockup-38

    Checkout

    The customer can check out for his purchases. At the checkout page, the customer can apply the coupon code, can remove or update his cart. The checkout process is divided into the following steps.

    Add to Cart:

    The customer can see the Add to Cart button on the product page. After clicking on the “Add to Cart” button, will receive a message “The product was added to your cart”.  

    After that, the customer can proceed to the next step of checkout using the CS-Cart Multivendor Mobikul Mobile App.

    mockup-39
    mockup-40

    Billing and Shipping Address:

    Under this section, customers can select their profile as main, home, and business. They also have the option to select “are shipping and billing address the same?”

    mockup-41

    Shipping Options & Payment Method Selection

    All the shipping methods will show in this section. customers can choose the shipping option here. Shipping guidelines also show in this section. Then after that, select the payment method.

    mockup-42
    mockup-43

    Billing Options:

    Under this section, customers can select the billing method for the order. After Successfully placing the order, they can see a popup on “Congratulations! Your order has been successfully place”.

    The customers can view the order details from here and also continue their shopping.

    mockup-44

    Delete Account

    Under the navigation bar customer have the option to “Delete Account“, if customers want to delete their account they can click the tab and delete information displayed on a screen.

    The customer confirms their password after that popup will ask them to confirm if they press ok customer account is permanently deleted all information.

    mockup-46

    GDPR Compliance

    The app is fully compliant with policies set by the EU under GDPR.

    The following points must be concerned here to make the GDPR compliant-

    • Privacy By Design- The design of the Mobikul app is in such a way that it takes care of app users’ data. It abides by Article 23, that app must only hold and process data that is absolutely necessary.
    • Direct Consent- Under the GDPR it must take user consent for collecting or sharing the data of the user. The terms and conditions are not pre-checked and the app user can read the complete content before agreeing to them.

    These conditions are clearly visible and transparent to the app user.

    The app has GDPR enabled on multiple pages in our application- Register, Submit Reviews, Profile Page, Checkout, and, Order Communication. These pages are the ones having the personal data of the app user which we ensure the app uses the safety of their data.

    The admin can check the box for the above-mentioned page settings to make it visible on the app front end.

    Note- Here, we have integrated the CS-Cart default GDPR extension in the application.

    gdpr_complaince
    settings_gdpr_1
    Setting_GDPR

    Support

    This is all about CS-Cart Multivendor Mobikul Mobile App. Still, have any issues, feel free to contact us at http://webkul.uvdesk.com and let us know your views to make the module better.

    Besides this, you can explore our CS-Cart Development Services and top-quality CS-Cart add-ons.

    Current Product Version - 3.8.5

    Supported Framework Version - 4.3.x, 4.4.x, 4.5.x, 4.6.x,4.7.x,4.8.2.

    . . .

    2 comments

  • Corneliu
    • Prince (Moderator)
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content