Bagisto Native Mobile App — Flutter

Mobikul as a mobile app developer has dedicated its time and effort to creating an app for various famous Open Source platforms. However, this time after acquiring years of regress experience. Webkul together with Mobikul has created an app for their in-house platform that is Bagisto.

As a matter of fact with the advancement in technology just having a website for a business will restrain growth. Henceforth, the requirement of the hour is a mobile app.

However, the Mobile app build is on Bagisto uses Flutter for the Android and iOS applications.

This app will allow the customer to checkout in a convenient form due to its easy accessibility. Thus, this native app is having a collection of a feature that makes it an advanced app for the customers.

Check a brief overview of the backend configuration settings -

• Easy management of the orders with the help of the app.
• Well configured with the back-end.
• The app can work on both tablets and smartphones.
• Informative and interacting shopping app with a fast and intuitive response.
• An open-source app that can customize (paid service) as per business requirements.
• 24×7 support on Facebook (Paid), Whatsapp (Paid), and Mail.
• A search suggestion is implement to allow customers to get the required product more easily.
• Wishlist to save products for future purchases.
• Multi-Lingual functionality (RTL) support for localization of the app.
• The store owner can enable multiple currencies in the app to attract customers all across the Globe.
• Real-time synchronization between the app and the website.
• Interactive UI/UX with Modern Material Design standards.
• Easy addition of offers and Coupons to engage maximum customers.
• Allow the app user to cut short login processes by implementing a faster and easier Social Login Facility. (available on customization)
• Local Notification to the customer that avoids the abandoned cart.

The admin can manage the Bagisto Mobile App from the back-end in just a few simple sets of steps. Each step of configuration is showing one by one in the below tabs.

The admin can amend the app as per the business requirement from Mobikul Configuration. For that, the admin needs to navigate through Configure > Mobikul > Mobikul Basic Configuration as per the below image:

Username — Admin needs to provide the username for the Mobikul and it is used for connecting to the respective server.

The username is require to mention in the code end as well.

Password — Here you will provide the password for the Mobikul. This will use with the above username for connecting to the server. The password requires to mention in the code end as well.

Collection Page Size- As the label name of the field is self-explainable. Here you need to set the number of products that you want to display on the collection page of your Mobikul application at a time.

Enable random featured product on the homepage? — To enable the module you need to opt “yes”, and then featured image will be displayed on your Mobikul application.

Allowed CMS Pages — Form here the admin can select the CMS pages which they want to show in the mobile app.

If an admin needs to set up the push notification feature for Mobikul mobile application then you must require this section’s fields to be set up.

API key: Admin needs to provide the Server API key which you will get after the firebase console registration.

Android Topic: It is used for sending the notification on a group basis on android devices.

The topic name which you will provide in this field will be the name of the group. This will include all the mobile devices which have installed your application.

iOS Topic: It is used for sending notifications on a group basis on iOS devices.

Meanwhile, the topic name which you will provide in this field will be the name of the group. This will include all the mobile devices which have installed your application.

Note -

The android and iOS topics will add to the application code by the mobikul developers and then saved in your admin panel.

So kindly do not change this part after the application is configured as this might hamper the working of the notifications.

Moreover, the Mobikul Mobile App builder supports displaying and configuring featured categories. The feature categories are easily configurable from the admin panel.

For that, the admin needs to navigate through Mobikul > Featured Categories.

Also, for adding a new Featured Categories, the admin can click on Add Features Category button.

Thus, the featured category can configure with information such as-

• Image: Upload the featured category image from this field.
• Sort Order: This is the sort order of the featured category among other featured categories.
• Store View: The featured category is visible store view wise. “All Store Views” can select for displaying the featured category in all the store views.
• Featured Category Status: Set the featured category as enable or disable according to the requirement.
• Categories: The admin here chooses the category which will redirect when the featured category image will be clicked.

Moreover, the admin can edit or delete the created Featured Categories.

The admin can configure the banner of the mobile app from the banner section of the admin panel.

For that, the admin needs to navigate through Mobikul > Banner Image.

Also, for adding a new banner image the admin needs to click on the Add Image button.

Title — The admin can enter the title of the banner.

Banner Image — The admin can upload the banner image from this field which will be a part of the homepage.

• Sort Order — This section determines the sequence of banner or at which number the banner will be found on the app homepage.
• Banner Type — The admin can specify the type of banner in this section by specifying it as a category or product.
• Product/Category Id — The admin can state the id of the product or category as chosen in the above option.
• Store View — The admin can select the store view where the banner will be visible.
• Banner Status — The admin can enable the status of the banner to make it visible on the homepage.

Further, the admin can edit or delete the created banner images.

The Push Notification of the Mobikul Mobile App can be easily managed from back-end.

For that, the admin needs to navigate through Mobikul > Notifications.

Also, for adding the new notification the admin can click on the Add Notification button.

New Notification:

Notification Title — The admin can enter the title of the notification.

Content — The admin can describe the notification under content.

Image — Add an image for the notification.

Notification Type — Here the admin can select the notification type from the drop-down as Product Type, Category Type, Other Type, Custom Collection.

Notification Status — For here, the admin can enable or disable the notification.

Further, the admin can edit or delete the existing notification as per the business requirement.

The applications homepage is divided into multiple carousels which can be managed from the back-end.

For that, the admin needs to navigate towards Mobikul > Carousel.

Also, the admin can add a new carousel by clicking on Add Carousel button.

Wherein, the admin can enter the information in the carousel from here to be displayed on the homepage.

New Carousel:

• Title- Enter the title or name of the carousel here.
• Type- In this field the admin can enter the type of carousel as image or product type.
• Background Image- The background of the carousel can be set in this section in the form of the image.
• Background Color code- The admin can set a solid color for the image by mentioning the color code in this section for the background.
• Sort Order- The admin can enter the order of the carousel in this section.
• Store View- The admin can set different carousels for different views.
• Carousel Image Status- The admin can make the status of the carousel as enable or disable.

Moreover, the admin can edit or delete the created carousels. Also, can check the product associated with a particular carousels.

The admin can add/edit carousel images of the mobile app.

For that, admin needs to navigate towards Mobikul > Carousel Image as per below image:

Also, the admin add a new Carousel image, by clicking on Add Image button.

New Carousel Image:

• Carousel image- The admin can upload an image in this section.
• Title- Set the title of the Carousel.
• Carousel Image Type- The admin can decide the Carousel Image Type in this section. Wherein the admin can define if the image is linked to a category or product.
• Product/Category Id- The admin can state the id of the product or category as chosen in the above option.
• Carousel Image status- The admin can enable or disable the status of Carousel Image.

Moreover, the admin can also edit or delete the existing carousel image.

The admin can define the custom collection for the mobile application.

For that, the admin needs to navigate through Mobikul > Custom Collection.

Also, the admin can add different collection as per their requirement. For that they need to click on Add Collection button.

Add Collection:

Collection Name — Enter the collection name here.

Status — Define the status of the collection as enable or disable.

Choose Product Collection — For here, the admin can choose

Further, the admin can also delete the created custom collection as per requirement.

From the back-end, the admin can check all the mobikul orders.

Also, the admin can view the order details from action.

Additionally, can also generate invoice and shipment for the order. Moreover, the admin can cancel the order if required.

This is an introductory screen that customer encounters as soon as they open the Application. Moreover, this screen is added to the app from the code end.

The business owner will provide us this image as per the requirement via prerequisite PDF.

The homepage of the app is having multiple sections to divide it into usable sections.

Banner Section

Here the application users will see the banner set by the admin. The banner will be moving one by one as shown below:

Featured Categories

Here the Laravel native mobile app users will see the features categories set by the app owner.

Carousel Sections

The Laravel eCommerce Mobile application’s homepage has the option to add different carousel types as shown below:-

Image type: You can choose the Image type carousel and through this you can create different sort of images and assign products to them.

Summer Tees: It is one of the carousels and if you click on there you can see the list of the products which are being assigned to it as shown below:

Moreover, the app encourages the customers to get registered using the application. It gives them a simple form to fill in the details. Thus, allowing an easy sign-in whenever accessed.

However, this section has three options associated-

• Sign in with the Email address
• Create An Account

Sign Up- Create An Account

The Laravel eCommerce Mobile App user can simply register the application by filling the registration form. Thus, the app user can fill in the basic details to become a customer.

Sign in Via mail id

If the customer accomplishes the registration process then they can log in via the mail id and password that was mentioned at the time of registration.

The page will display the details related to the products which the app user can scan through. Thus, the page has the following details-

• Edit quantity- The app user can append the quantity to purchase of the product from here.
• Add to Cart- The app user can click on the Add To Cart button to add the product to the cart for checkout.
• Cart Button: The product will be added to the cart and from the cart it can be purchased
• Back Arrow: The back button will redirect from the product detailed page to the main homepage

The account section will save the customer’s personal data, in multiple sub-sections. This section as mentioned above will only display to the logged-in users.

Thus, the app user can click on any corresponding order and get the details of the complete order.

The app user can click on any address to edit the details on the address from the edit button or else can add the new address as shown below:-

Here the app user can click on Manage Other Addresses to change the details of other addresses.

The app gives its user an easy way to view the orders from this section also. Thus, allowing a quick way to access orders.

The customer for this section examines the details of the order and perform the action on the orders like-

It is just like a directory wherein we save all the addresses. Here, we will save the-

• Default addresses of Billing and Shipping.
• List of other addresses.

Thus, from this section, the customer can ‘Add New Address’, edit the present address or delete the addresses.

The customer can click on the button of ‘Add New Address’ to open a form asking the details of the address.

Here, the customer has got the location detection facility also wherein the customer can fill the details with the help of GRPS.

This section is meant for the app user to save personal information related to the account. For, this section the app user can update-

• Their first and last name,
• Registered mail address for the login purpose, and
• Password linked with the registered account.

The customer can select the desired currency as per the requirement.

Now customers can see the change in currency

You can also find a link as “CMS Pages” here. Where you can see all the CMS Pages that admin creates.

They can be anything like- Privacy policy, About Us page, and other such pages.

The customer can communicate with the store owner or admin by sharing a message from this section.

Thus helping the customer to build a strong relationship with the store owner.

Thus, that’s all for the Laravel Mobile App still, have any issues feel free to add a ticket and let us know your views to make the module better https://webkul.uvdesk.com.

Current Product Version — 1.3.3

Supported Framework Version — 1.1.2

Originally published at https://webkul.com on November 24, 2020.