Back to Top

CS-Cart Mobikul Mobile App Builder

Updated 4 September 2024

Cart Mobile App is a flutter-based app for mobile devices that seamlessly integrates with your store. It provides customers with real-time access anytime, anywhere, at their convenience.

Check a brief overview of the backend configuration of the mobile app – 

Wes8dAkweZ4
 
Check a brief overview of the cs-cart mobile app – 
0_RFva1AHwA

Features of CS-Cart Mobikul Mobile App Builder

  • Well integrated with the existing CS-Cart store.
  • Informative and interacting shopping app with a fast and intuitive response.
  • Supports default CS-Cart shipping methods.
  • Supports phone orders, cash on delivery, fax orders, money orders, and personal cheques as payment methods.
  • An option of the gift voucher, promotional, and coupon code has been provided.
  • A feature of push notifications over the devices has been provided.
  • Well configured and easy to use at the admin end.
  • Allows to search products via text/image

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

  • At first, the functionality of multiple profile creation is available. It can be availed once enabled at the admin end.
  • The application supports multiple currencies.
  • Functionality to support multiple languages.
  • In particular, email should be validated when entered by the user.
  • Front-end validation on each page should be equivalent to server-end validation. For example, if CS-Cart only allows 5 characters, the app should also validate those 5 characters.
  • Each page’s cart total should be updated.
  • Augmented Reality feature added.
  • Provide a dominant color for all the images.
  • Every offline payment method, including checks, bank transfers, and COD, would function in the default application.
  • Add featured categories to the mobile app. 
  • Add CMS pages to the mobile app. 
  • Set a 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.
  • Customer and admin can communicate through messages within the order details.
  • A “New” tag will automatically appear on the top corner of newly added products.
  • The mobile app wallet offers customers multiple options for online transactions.
  • Customers can revisit their last viewed products in the “Recently Viewed” section.
  • The admin can manage the number of search results displayed on the search page.

Benefits of CS-Cart Mobikul Mobile App Builder 

  • Increases relationships and loyalty by reinforcing the store.
  • Benefits sell through exposures across mobile devices.
  • Strengthen the connectivity with on-the-go customers.
  • Well-supportive in terms of accessibility, immediacy, and reachability.

CS-Cart Mobikul Mobile App Builder

After downloading the CS-Cart Mobikul Mobile App Builder, you’ll get one zip

file and install.text. Read the blog carefully and configure it accordingly.

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

CS-Cart Mobikul Mobile App Builder Configuration – Admin End

After installing the add-on, navigate through Add on->Downloaded add-ons-> Mobikul.

addon list

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

addon setting

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

General:

settings

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:

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), 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 link.
  • 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: 

payment setting

Here, the admin will – 

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

Shipping Methods: 

shipping setting

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

appconfiguration

Here, the admin can make the configurations for – 

  • App Icon View – There are five types of launcher icons available.

    appiconview

    App Icon Type 1&2 View:

    mockup

    mockup-1

    App Icon Type 3,4 & 5 View:

    CS-Cart Mobikul Mobile App Builder

    CS-Cart Mobikul Mobile App Builder

    CS-Cart Mobikul Mobile App Builder

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

    categoryview

    Default Category & Tab Category View:

    mockup-5

    mockup-6-1

     
  • App Theme Mode

    thememode

The admin can also make the settings for – 

  • Light mode Theme Configuration

lightmode

Here, the admin can set the –  

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

Light Theme:

CS-Cart Mobikul Mobile App Builder

 

Apart from that the admin can make the settings for – 

  • Dark Mode Theme Configuration

darkmode

Here, the admin can set the –  

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

Dark Mode:

CS-Cart Mobikul Mobile App Builder

 

Catalog search configuration:

Catalog search configuration

Here, the admin can configure the number of search results displayed on the search page when the customer is searching product.

Display tag in search:  Admin can enable or disable displaying the tag on the search page. 

Number of tags to display in search: Admin can set the count of tag displays that can appear on the search page. 

enable or disable displaying the product on the search page.

tag searchpage

product on  searchpage

Product settings : 

The admin will navigate to Product > Product Settings > Add-ons > Mobikul.

Set Product As New product

Here, the admin will set up the product setting for Mobikul: 

CS-Cart Mobikul Mobile App Builder : Wallet

Customers can money into their store wallets and use them to purchase products. They can now add money to their wallet, and check out with wallet funds. Also, customers can transfer money to others.

Admin can set the wallet setting from Add-ons > Downloaded add-ons > Wallet System.

After that, the admin can tap on the Wallet System and navigate to the Settings->General section or other settings.

General 

general-setting

Here, admin can :

  • Allow cash back in wallet for new user registration:  The admin can enable cashback in the wallet for new user registrations, allowing new users to receive a cashback reward. 
  • Cash back Amount of Wallet when a new User gets registered: The admin can specify the cashback amount for the wallet when a new user registers.

Wallet Recharge Configuration

wallet-recharge-configuration-setting

Here, the admin can set a minimum and maximum recharge amount which can be added to the store wallet.

Wallet Money Transfer

wallet-money-transfer-setting

Here, the admin can set a minimum or maximum amount for money transfer from the wallet.

Wallet Refund Configuration : 

wallet-refund-configuration-setting

Here, the admin can set a minimum or maximum amount that can be refunded to the wallet.

Payment Restrictions

Payment Restrictions

Here, the admin can restrict the payment options for the store wallet. 

Reward Points

Reward Points

Here, the admin enable the Reward Points Status and sets the points for rewards with each of new registration.  

  • Min Points: Set the minimum points that can be rewarded after new registration. 
  • Max Points:  Set the maximum points that can be rewarded after new registration. 
  • Commission: Set the commission points for each new registration. 

Wallet userGroup : 

wallet-usergroup-setting

Note: This UserGroup Access works only for customers, not for vendors and admins.

Send Report Configuration

Send Report Configuration

Another key point, the admin can set the report that can be shown in the wallet to the customer. It shows both type and Monthly selected in default. 

Send Report 

The admin can choose to display wallet reports for a selected period, such as monthly, quarterly, half-yearly, or yearly.

send report

Type

In the type , the admin can select to include credit, debit, or both payment types in the report.

type

Transfer Wallet to Bank

After that, the admin can set the minimum and maximum amounts that can be transferred from the store wallet to a bank.

transfer-walletto-bank-setting

The admin can also add a customer by clicking on “Add Customer,”. Thus, it will trigger a pop-up with a list of customers. The admin can then select the desired customer from the list. As shown in the image below.

add custmoer

After that, the added customer will be visible.

Workflow of the wallet

Customers can use online transactions through their wallets for online purchases, and money transfers. 

CS-Cart Mobikul Mobile App Builder seeting

CS-Cart Mobikul Mobile App Builder wallet

Add Money to Wallet.

Customers can add money from the “Add money” section to their wallet. 

CS-Cart Mobikul Mobile App Builder

CS-Cart Mobikul Mobile App Builder wallet

 

 
 

Money Transfer Amount

The customer can transfer the amount to another customer using the wallet transfer amount. Also, customers can view transaction details using the Wallet transaction option.  

CS-Cart Mobikul Mobile App Builder transfer amount

CS-Cart Mobikul Mobile App Builder

CS-Cart Mobikul Mobile App Builder

CS-Cart Mobikul Mobile App Builder

Hence, customers can use the CS-Cart Mobikul Mobile App Builder wallet for online transactions with multiple options.

CS-Cart Mobikul Mobile App Builder – Management Options

Navigate to Mobikul and find the options to configure the mobile app here. 

dashboards

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.

CS Cart mobile app banner

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. 

CS Cart mobile app 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”.

      CS Cart mobile app banner

    • The option of selecting the category is available when the banner type is set as “category”.

      CS Cart mobile app banner

    • The option of entering the external link is available when the banner type is set as “External Link”.

      CS Cart mobile app banner

    • In the case of No Link, only a banner creation option is available.

CS Cart mobile app banner

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

Featured Category

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

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

Featured Category

Here, enter the –  

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

The admin can also edit the featured category.

Featured Category

Mobikul Notification: 

Here, the admin can create three types of Mobikul Notification – product, category and other.

Notification

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

Mobikul Notification

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

Mobikul Notification

Here, the admin will – 

  • Enter the title of the notification. 
  • Select the type as Product or category or other. 
    Mobikul Notification
  • Choose the image for the notification. 
  • Choose the product or category or other 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 create the pages for the mobile app that can be accessed by the users. 

pages

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

new pages

Set the parameters as shown below in the snapshot-

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

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.

Augmented Reality

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

Augmented Reality

Here, the admin will –

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

Upload Android 3D model: To upload a media file (image) for Android, use the Android File section. Also, the image is in GLB format.

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.

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.

Walkthrough

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.

Walkthrough

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

mockup-1
mockup-1-1

Carousel:

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

Carousel

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

Carousel

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.
Carousel
  • 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-2-2
mockup-3-1

In the case of the type chosen as Product:

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

popular product

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

newest-products

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

  trending on the app.

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.

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

feature-products

In the case of the type chosen as Image:

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.

all-parent-categories

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

banners

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

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

feature-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

Home Page Configurator:

Navigate through Mobikul->Homepage Configurator.

Here, the admin can change the layout of the different sections of the mobile app home page.

homepage

Clear Cache Memory

CS-Cart caches scripts, styles, templates, and more to boost page loading speed. If your recent changes aren’t visible on the page, try clearing the cache to resolve the issue.

To clear the cache, navigate through Mobikul>>Clear Cache.

cache

Homepage

On the front page, the customer can see the image slider and many carousels. However, the admin can add multiple carousels for the home page.

mockup
mockup-2

The best products and the top brand section will display on the front page.

mockup-2-1
mockup-3

Notifications

Customers can access notifications from the top right corner of the home page. In the notification section, they can view messages sent by the admin.

Also, they can view directly the products mentioned in those notifications.

mockup
mockup-4

Customers can search for the product directly from the home page. Thus, the customer can enter a keyword for the product search.

Voice search is also included in this app. So, it means customers can search for any product with the help of a 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 the product in the app.
  • Text Detection – 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.
CS-Cart Mobikul Mobile App Builder
CS-Cart Mobikul Mobile App Builder
CS-Cart Mobikul Mobile App Builder

Login and SignUp

The customer will get the login and signup link in the right drawer using the CS-Cart Mobikul Mobile App Builder.

So, the customer can log in or signup for the account after filling in the email ID and the password. However, they can even reset the password after, clicking on the “Forgot Password” link.

CS-Cart Mobikul Mobile App Builder
CS-Cart Mobikul Mobile App Builder
CS-Cart Mobikul Mobile App Builder
CS-Cart Mobikul Mobile App Builder

My Wishlist

Now, the customer can add the products to their wishlist from the product page. After that, the customer can view the wishlist products in their account.

CS-Cart Mobikul Mobile App Builder

My Orders

Customers can manage orders directly through the app, allowing them to view a complete list of their orders.

They can access detailed information about each order, including the shipping and billing addresses, product details, and an order summary.

mockup-13
mockup-14

Account Information

The account information of the user can be accessed from the profile section on the homepage. Moreover, the user can change the account information from here.

CS-Cart Mobikul Mobile App Builder
CS-Cart Mobikul Mobile App Builder

Product and Category Pages

Categories of the stores can be viewed on the front page using the CS-Cart Mobikul Mobile App Builder. The customers can access it from the left drawer and category slider.

Thus, after clicking on the main category, the sub-categories of that category will appear. After clicking on the sub-categories, the product will appear.

v
CS-Cart Mobikul Mobile App Builder

Product View

On the product page, the customer can view product information like description, features, reviews, product price, and product image.

CS-Cart Mobikul Mobile App Builder
CS-Cart Mobikul Mobile App Builder

With the help of your mobile camera, customers can view the product in your actual space using the Augmented Reality feature.

mockup-21-2
mockup-22-2

Customers can check highlights of the latest additions to the store. As newly added products have “New” tag will prominently display in the top corner.

product-page
new product-page

Recent viewed product

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

CS-Cart Mobikul Mobile App Builder

Cart View

The customer can add the product to their cart. However, they can view the product by clicking on the cart page. The customer can update their cart, and apply the coupon code to the cart.

mockup-22
mockup-23

Easy Checkout Process

Customers can add the product to the cart. After that, CS-Cart Mobikul Mobile App Builder allows customers to go to product checkout.

The customer needs to click on proceed to checkout button.

Thus, it will ask for billing and shipping addresses. After filling these things, have to choose shipping options and billing options.

CS-Cart Mobikul Mobile App Builder
CS-Cart Mobikul Mobile App Builder
CS-Cart Mobikul Mobile App Builder
CS-Cart Mobikul Mobile App Builder

CS-Cart Mobikul Mobile App Builder- 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.

CS-Cart Mobikul Mobile App Builder
CS-Cart Mobikul Mobile App Builder

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

CS-Cart Mobikul Mobile App Builder

Support

Hence, that was much about the CS-Cart Mobikul Mobile App Builder. For any query feel free to contact us at https://webkul.uvdesk.com/en/customer/create-ticket/

Please explore our cs-cart Development Services and Quality cs-cart add-ons.

Current Product Version - 6.0.2

Supported Framework Version - (4.13.x - 4.18.x)

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

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