Reading list Switch to dark mode

    CS-Cart Mobikul Mobile App Builder

    Updated 5 February 2024

    CS-Cart Mobile App: In today’s expectancy the plenitude of mobile devices has changed the approach to accessing digital information. Uncertainty customers expect you to reach out to them anytime and anywhere.

    Thus, on account of the needs, the store owner can create an elegant mobile application for their existing store using CS-Cart Mobikul.

    This benefits from having a flutter app for mobile devices well integrated with the store. Hence, allowing customers to have access to real-time store any moment no matter when at one’s 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

    • 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 order, money order, and personal cheque as payment methods.
    • An option of the gift voucher, promotional, and coupon code has been provided.
    • A feature of push notification over the devices has been provided.
    • Well configured and easy to use at the admin end.
    • Allows to search product via text/image

    Features added in CS-Cart Mobikul Mobile App version 2.0

    • The functionality of multiple profile creation is available and can be availed once enabled at the admin end.
    • The application supports multiple currencies.
    • Functionality to support multiple languages.
    • 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.

    Benefits

    • 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

    Find the Best CS-Cart
    Development Company
    Find out More

    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.

    Initial Configuration – Admin End

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

    Screenshot-from-2023-11-06-12-42-41

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

    cs-cart.webkul.in_cscart413_demoadmin.php_dispatchaddons.managesupplierWebkul20Software20Pvt.20Ltd.store-screenshts-1

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

    General:

    initial configuration

    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_cscart413_demoadmin.php_dispatchaddons.updateaddonmobikulasd-2

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

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

    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_cscart413_demoadmin.php_dispatchaddons.updateaddonmobikulasd-4

    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_cscart413_demoadmin.php_dispatchaddons.updateaddonmobikulasd-5

    Here, the admin can make the configurations for – 

    • App Icon View – There are five types of launcher icons available.
      App-Category-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-Icon-View
      Default Category & Tab Category View:

      mockup-5

      mockup-6-1

       
    • App Theme Mode
      App-Theme-Mode

    The admin can also make the settings for – 

    • Light mode Theme Configuration

    cs-cart.webkul.in_cscart413_demoadmin.php_dispatchaddons.updateaddonmobikulasd-6

    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_cscart413_demoadmin.php_dispatchaddons.updateaddonmobikulasd-8

    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 options to configure the mobile app. 

    ManagementThe 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.webkul.in_cscart413_demoadmin.php_dispatchmobikul_banner.managestore-screenshts

    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.webkul.in_cscart413_demoadmin.php_dispatchmobikul_banner.updatestore-screenshts

    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.webkul.in_cscart413_demoadmin.php_dispatchmobikul_banner.updatestore-screenshts-1
    • The option of selecting the category is available when the banner type is set as “category”.
      cs-cart.webkul.in_cscart413_demoadmin.php_dispatchmobikul_banner.updatestore-screenshts-2
    • The option of entering the external link is available when the banner type is set as “External Link”.
      cs-cart.webkul.in_cscart413_demoadmin.php_dispatchmobikul_banner.updatestore-screenshts-3
    • In the case of No Link, only a banner creation option is available.
      cs-cart.webkul.in_cscart413_demoadmin.php_dispatchmobikul_banner.updatestore-screenshts-4
    • 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.

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

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

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

    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.

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

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

    cs-cart.webkul.in_cscart413_demoadmin.php_dispatchmobikul_notification.managestore-screenshts-1

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

    cs-cart.webkul.in_cscart413_demoadmin.php_dispatchmobikul_notification.updatestore-screenshts

    Here, the admin will – 

    • Enter the title of the notification. 
    • Select the type as Product or category. 
      cs-cart.webkul.in_cscart413_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 create the pages for the mobile app that can be accessed by the users. 

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

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

    cs-cart.webkul.in_cscart413_demoadmin.php_dispatchmobikul_pages.updatestore-screenshts

    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.

    cs-cart.webkul.in_cscart413_demoadmin.php_dispatchmobikul_ar.updatestore-screenshts

    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.

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

    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.

    cs-cart.webkul.in_cscart413_demoadmin.php_dispatchmobikul_walkthrough.updatestore-screenshts

    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.

    cs-cart.webkul.in_cscart413_demoadmin.php_dispatchmobikul_walkthrough.updateid1store-screenshts

    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.

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

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

    cs-cart.webkul.in_cscart413_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_cscart413_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-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-Products-1

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

    Latest-Products-1

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

    Best-Products-1

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

    Discounted-Products-1

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

    Brand-Products-1

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

    Special-Products-1

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

    Category-Products-1

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

    FeatureProduct-1

    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.

    Category-Carousel

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

    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.

    Featured-Category-1

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

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

    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.

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

    The customer can see the notification from the top right corner of the home page. Thus, under the notification section, the customer can see the notifications sent by the admin. However, the customer can also view the products of the notified message.

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

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

    mockup-8
    mockup-9
    mockup-10
    mockup-11

    My Wishlist

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

    mockup-12

    My Orders

    The customer can manage orders through the app. Thus, the customer can view the list of all orders, and can view all information regarding the order like shipping address, billing address, product information, and 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.

    mockup-15
    mockup-16

    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.

    mockup-17
    mockup-18

    Product View

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

    mockup-19
    mockup-20

    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

    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

    Hereafter adding the product to the cart, CS-Cart Mobikul Mobile App Builder allows the customer to go to checkout for their purchases. 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.

    mockup-24
    mockup-25
    mockup-26
    mockup-27

    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.14.x, 4.15.x.

    Blog Version - 4.13.x, 4.14.x, 4.15.x.
    • Version 4.7.x, 4.8.x, 4.9.x
    • Version 4.3.x, 4.4.x, 4.5.x, 4.6.x, 4.7.x, 4.8.x, 4.9.x
    • Version 4.13.x, 4.14.x, 4.15.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