CS-Cart Multivendor Mobikul Mobile App

CS-Cart Multivendor Mobile App enables businesses of all sizes to thrive and expand in the mobile market.

Built using Flutter, this native mobile app is a must-have for any e-commerce business.

Developing a mobile application can often be costly and time-consuming.

However, this app offers a cost-effective solution, providing a fully functional and visually appealing mobile application tailored to meet user needs.

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

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

• 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 product collections 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 orders, money orders, and personal cheques as payment methods.
• The options of gift vouchers, 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.
• A “New” tag automatically appears on the top corner of newly added products.
• The mobile app wallet provides customers with multiple online transaction options.
• Customers can easily revisit items in the “Recently Viewed” section.
• Admins can set the number of search results displayed on the search page.
• Customers and admins can communicate directly through messages within the order details section.

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

• 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 direct marketing channels.
• Helps in improving customer involvement.
• Besides this, it ensures ease of accessing e-commerce sites via mobile.

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.

Here, Go to the both locations on the terminal:

1. app/addons/mobikul/lib/googleOauth

2. app/addons/mobikul/lib/phpFastCache

 Run the command “composer update”.

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

General:

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.
  
• Enter the Google FCM Private Key.

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

  

• Enter the email address. 
• Enter the API Key. 
  
• 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:

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:

Payment Methods: 

Here, the admin will – 

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

Shipping Methods: 

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:

Here, the admin can set the –  

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

Dark Mode:

Catalog search configuration:

Here, the admin can configure the search page settings for product searches:

Display tag in search: Enable or disable the visibility of tags on the search page.

Number of tag to display in search: Set the maximum number of tags appearing in the search results.

Display product in search: Enable or disable the display of products in the search results.

Number of product to display in search: Configure the search results displayed when a customer searches for a product. 

Product settings : 

Wallet

The admin can configure the wallet settings by navigating to Add-ons > Downloaded Add-ons > Wallet System.

From there, the admin can select the Wallet System and proceed to the Settings > General section or other relevant settings.

Here, admin can :

• Allow cash back in wallet for new user registration:  The admin can activate cashback for new user registrations, allowing new users to receive a reward in their wallet. 

• Cash back Amount of Wallet when a new User gets registered: The admin can also define the specific cashback amount that will be credited upon registration.

Send Report 

The admin can select the period for displaying wallet reports, including options such as monthly, quarterly, half-yearly, or yearly.

Type

In the “Type” section, the admin can choose to include credit, debit, or both payment types in the report.

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

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

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. 

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”.
  
• The option of selecting the category is available when the banner type is set as “category”.
  
• The option of entering the external link is available when the banner type is set as “External Link”.
  
• In the case of No Link, only a banner creation option is available.
  
• 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. 

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.

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

Here, enter the –  

• Featured Category name. 
• Tap the add categories option to add categories as featured.
  
• Check the Visible Name on the App checkbox.
  
• Set the status as enabled.

The admin can also edit the featured category.

Notification: 

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

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

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

Here, the admin will – 

• Enter the title of the notification. 
• Select the type as Product, category, or other. 
  
• 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. 

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

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.

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.

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

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

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.

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.

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

Carousel:

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

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

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.

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

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.

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

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

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

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

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

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

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

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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

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

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

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.

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.

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.

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.

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.

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.

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.

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

After that, the admin can check customer messages in the order details in the admin panel.

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.

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.

The notification tab can be seen in the navigation drawer. Customers can set notifications for selected products related to any offer and price reductions on products available in-store.

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.

The customer’s last viewed product is saved and can be easily accessed in the “Recently Viewed” section.

Message Communication section

Customers can initiate communication directly from the Order Details page. As can be seen in the chat icon in the right corner of the order detail, the customer can initiate a chat.

After that, the admin can check customer messages in the order details in the admin panel.

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.

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.

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

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.

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

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 addresses the same?”

Shipping Options & Payment Method Selection

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

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.

Under the navigation bar customers 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 information.

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.

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.