Back to Top

User Guide for Bagisto Laravel Mobile App Builder

Updated 20 October 2023

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 Laravel Native Mobile App.

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 and uses Flutter for the Android and iOS applications.

This Laravel mobile app builder will allow the customer to checkout in a convenient form due to its easy accessibility. Thus, this Flutter app has a collection of a feature that makes it an advanced app for customers.

Feature List of Laravel Mobile App Builder

  • Easy management of the orders with the help of the app.
  • Well configured with the backend.
  • The app can work on both tablets and smartphones.
  • Informative and interactive shopping app with a fast and intuitive response.
  • An open-source app that can be customised (paid service) as per business requirements.
  • 24×7 support on Facebook (paid), WhatsApp (paid), and mail.
  • A search suggestion is implemented 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 avoid the abandoned cart.
  • Customers can review products they have recently viewed.
  • The application has the option to be displayed in a dark theme.

Installation of Laravel Mobile App Builder

To install the Laravel Mobile app on your server you need to follow the given steps on the given URL:

Start your headless eCommerce
now.
Find out More

Follow the URL: Installation of Laravel Mobile App.

Step 1:

GitHub-bagisto-headless-ecommerce-step1

Step 2:

GitHub-bagisto-headless-ecommerce-Laravel-Step2

Laravel Mobile App Configuration

The admin can manage the Bagisto Laravel mobile app from the backend in just a few simple sets of steps. Each step of configuration is shown one by one in the below tabs.

For the configuration of the Laravel mobile app, the admin needs to navigate Configure>General>GraphQL API.

Configuration

Server Key: To enter the server key, click the link below the input field and create the project on Firebase.

Android Topic: The admin can set the name for the Android mobile app.

IOS Topic: The admin can set the name for the IOS mobile app.

Push Notifications

The push notification of the Mobikul mobile app can be easily managed from the backend.

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

demo.bagisto.com_mobikul-common_admin_api_notification-1

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

demo.bagisto.com_mobikul-common_admin_api_notification_create

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

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 Simple Type, Category Based, or Product Based.

Channels: The admin can select the channels that are available or added by the admin.

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.

demo.bagisto.com_mobikul-common_admin_api_notification_edit_3

Customer View: Splash Screen

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 with this image as per the requirement via a prerequisite PDF.

Screenshot_20201105-164546_Bagisto-Mobile-App-4-485x1024_google-pixel4-clearlywhite-portrait

Home Page

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

Carousel Sections

The Laravel mobile app builder’s homepage has the option to add different carousel types in the slider as shown below:-

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

Home-page_google-pixel4-clearlywhite-portrait

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:

banners_google-pixel4-clearlywhite-portrait-1

Featured Products

Here, the Laravel Mobile application users will see the featured products set by the app owner.

IMG-0980_google-pixel4-clearlywhite-portrait

New Products

In the new products section, the users can see the newly added products by the app owner.

IMG-1006_google-pixel4-clearlywhite-portrait

Side Drawer

Moreover, the app encourages 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.

IMG-0979_iphone12black_portrait

Sign Up – Create An Account

The Laravel native mobile app builder 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.

IMG-0981_google-pixel4-clearlywhite-portrait

Sign In via Email ID

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

IMG-0982_google-pixel4-clearlywhite-portrait

Forget password:

Users can reset their password by selecting the Forget Password option.

IMG-0997_google-pixel4-clearlywhite-portrait

Categories

There are two types of categories in the Laravel mobile application:

5783_google-pixel4-clearlywhite-portrait-2

  • Parent category: To view the parent category users need to double-click on the category name.
IMG-0983_google-pixel4-clearlywhite-portrait-1

  • Child category: To view the child category users need to one-click on the parent category:
IMG-0984_google-pixel4-clearlywhite-portrait

Now after clicking on the child category, all products will show added by the admin.

Child category will be listed shown in the grid and list view:

List View: In List view products are added to the list as shown in below image.

Child-Category-1

Grid View: The user can also select the button grid to view the products as shown in below image:

Grid-View

Account Information:-

After login to the mobile application users will see the account information in the side drawer:

5783_google-pixel4-clearlywhite-portrait

The account section will save the customer’s personal data, in multiple sub-sections.

Profile

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, last name, gender, DOB, and phone.
  • Users can change their registered mail address.
  • They can also change the password linked with the registered account.
  • Customers can delete their registered account.
  • Users can also change their Email and Password for the application. They can also delete the account.
Account-Information-2
Account-Information-Second-Screen

Address

This contains the information about the Default Billing Address, Default Shipping Address, and Manage Other Addresses.

IMG-0991_google-pixel4-clearlywhite-portrait

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

Add-new-address_google-pixel4-clearlywhite-portrait

Recent Product: The customer can check the recently viewed products in the recent products section as shown below in the snapshot:

mockup-3

Reviews

The app users can view all their reviews given by them to the products.

Reviews-1

Wishlist

The app user can view all the wishlist product from Wishlist option:

Wishlist-1

Compare

The app user can compare the product with each other as shown in image:

Compare-List-1


Product View:-

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

  • 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.
Product-Page-1

Now app users can proceed with the product added to the cart.

screenshot_1685540276_google-pixel4-clearlywhite-portrait-1

Here app users can apply code for their purchases, users have also the option of continue shopping, update cart, and can empty the shopping cart then click to proceed.

screenshot_1685540282_google-pixel4-clearlywhite-portrait

Now the users can select the address with the option of add, change and edit. After selecting the address they can proceed further.

screenshot_1685540287_google-pixel4-clearlywhite-portrait

Here users have to select the shipping method from given options and proceed.

screenshot_1685540509_google-pixel4-clearlywhite-portrait

In next step users need to select the payment method for their order are Cash On Delivery and Money Transfer.

screenshot_1685540615_google-pixel4-clearlywhite-portrait

Now users can view the all the options for Billing Address, Shipping Address, Shipping Methods, Payment Methods, and Order Summary.

screenshot_1685540620_google-pixel4-clearlywhite-portrait

Here users can check the price details of the order and can place the order as shown in image:

screenshot_1685540664_google-pixel4-clearlywhite-portrait

Now the order has been placed and will get a confirmation with order ID and email.

screenshot_1685540674_google-pixel4-clearlywhite-portrait

Order

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.

Order-List-1

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

51547_google-pixel4-clearlywhite-portrait


Language And Currencies

The customer can select the language from side drawer added by the admin as per the requirement.

IMG-0987_google-pixel4-clearlywhite-portrait

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

Currency-1


CMS Pages

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

They can be anything like – About Us, Return Policy, Refund Policy, Contact US and other such pages.

IMG-1004_google-pixel4-clearlywhite-portrait

About Us

The customer can view the section of about us for the mobile app. The content in the section can be anything added by the admin from the admin panel.

about-us-1-479x1024_google-pixel4-clearlywhite-portrait

Dark Theme

The app offers a dark theme option for customers to use. By tapping on the Change theme option, the app’s appearance will change to a dark colour theme, as shown in the snapshot below.

mockup-1-2
mockup-2-2

Contact Us

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.

contact-us-1-477x1024_google-pixel4-clearlywhite-portrait


Support for Laravel Mobile App Builder

Thus, that’s all for the Laravel mobile app builder 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

. . .

Leave a Comment

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


2 comments

  • Dai Software
    • Prachi Chauhan (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