Shopify Native Mobile App
Live Demo
Introduction
Shopify Native Mobile App is a perfect solution for the SAAS-Based e-Commerce platform. This app provides store-front features.
The app will be synchronized in real-time with the website. That is the data will remain the same in both apps as well as the website.
So, any change in product details, orders and more at one end will reflect at the other.
Note:
Shopify Mobile App has now come up with an updated backend user interface that is much more convenient & concise. If you want to check out the latest theme configuration, please check this blog.
Video Tutorial
Check the Shopify mobile app configuration of the home page from the admin SAAS store and how the changes reflect within the Shopify mobile app and how to view the changes made –
Check the Workflow at the mobile end for the Shopify mobile App –
Features of Shopify Native Mobile App
- Easy management of the orders with the help of the app.
- Quick and Effective Tax implementation in the app.
- Well configured with the backend.
- It is a lightweight app based on Flutter, which is having a single code for both the devices (Android and iOS).
- The app can work on both tablets and smartphones.
- Informative and interacting shopping app with a fast and intuitive response.
- 24×7 support on Facebook, Whatsapp, and Mail.
- The app allows easy browsing even in no -internet connection for the Pre-loaded page to support Offline mode(coming soon).
- An open-source app that can be customized(paid service) as per business requirement.
- A responsive app that works easily on mobile and tablet.
- To improvise the app performance and save system resources we have a supports lazy loading in the app.
- A search suggestion is implemented to allow customers to get the required product more easily.
Extended features of App
- Home Page configurator to modulate the homepage outlook.
- Third-party integration of Wishlist(coming soon).
- Support RTL layout to make the app personalized for RTL language users.
- Multi-Lingual functionality support for localization of the app.
- Easy Social sharing for more marketing of the products.
- Auto location detection for the customer to save the address easily in the address book (coming soon).
- Unlimited Push Notifications for the store owner to easily share updates on the store.
- Product comparison to allow customers to purchase the product easily (coming soon).
- Customers can manage the orders and returns easily using the app(coming soon).
- The store owner can enable multiple currencies in the app to attract customers all across the Globe.
- Downloadable Products support for customers(coming soon).
- Notification history creation for the customer(coming soon).
- Firebase Analytics for the store owner to know the engagement of the users with the application.
- No additional cost for the app installation and .apk/.ipa creation.
- Real-time synchronization between the app and the website.
- Interactive UI/UX with Modern Material Design standards.
- Easy addition of offer and Coupons to engage maximum customers(coming soon).
- One Step Checkout for more conversions on the store with customer saved data.
- The virtual try-on facility in the app implemented via Machine Learning(coming soon).
- Quick product search again via machine learning.
- Supports full white labeling on website front-end and append.
- Flexible payment plans to suit your economical requirements.
- CMS page support which is manageable by the store owner.
- Allow the app user to cut short login processes by implementing a faster and easier Social Login Facility.
- Local Notification to the customer that avoids the abundant cart(coming soon).
- Free of cost first update post app delivery.
How to view the demo App?
The demo app can be seen by clicking on the demo URL, present in the demo section. Once the installation of the app is complete. The app owner needs to enter two details in the app-
- Shop URL- The admin needs to enter the website URL for which the app creation needs to take place.
- Token- This is the access token as per the requirement of default Shopify. The admin needs to create the token for the respective web store in the admin panel of that web store. For more details on Create JS SDK Token in SHOPIFY, refer here, https://webkul.com/blog/how-to-create-js-sdk-token/
Note- If one needs to try on multiple website URL, then kindly uninstall the application and reinstall it from scratch.
How to install Mobikul app?
The app can be easily installed by visiting the landing page. All you need to do is enter your store name & click on the Get This App button.
You can also install this application from Webkul Store.
Once you click on the Get This App button, you’ll land on this following page:
Click on Continue setup
Further, click on start free trial
Once done with the installation, the mobile sales channel application will be listed under Online Store menu on the left-hand side panel.
From the Dashboard, you can add mobile cards.
The card is a preview of detailed content a user sees on your mobile app. This can include text, links, multimedia, graphs, and captions.
Types Of Cards:
- Slider
- Banner
- Grid
- Carousel
- List
- Product Slider
How to add cards?
To add cards, click on the Add Card button as highlighted in the image above. This is the page you’ll be redirected to:
Card Configuration:
You can select the type of card that you want to display, i.e., Slider, Banner, Grid, Carousel, List, Product Slider. Further, enter a card title, you can hide card title if you don’t want to show it on the frontend.
Slide Configuration
You can add one slide at a time. To add one, you need to select either one product or one category at a time. Further, you can upload an image that will be shown on the frontend.
Below this, you’ll have a section to add a link to view all button (this is optional: uncheck the box to hide). In other words, when your customers will click on the view all button, they will be redirected to the collection/category that you have selected from here.
Once you add a slide, it will be displayed in the slide listing section. Refer:
Similarly, you can add multiple slides to a card.
The added cards will be listed on the dashboard. You can set the position of the cards by dragging & dropping them as per your choice. Refer:
You can edit the cards by either clicking on the customize menu or by clicking on the edit button. Similarly, it can be removed by clicking on the delete button.
When you’ll hover over the configuration menu, the card config button will take you to the same add card page. You can use this to add a new card as explained above.
Side Panel Configuration
When you’ll click on the Slide Panel Config button from the configuration drop-down, you’ll be redirected to the following page:
Use this section to add side panels on the mobile app. To add a section, click on the Add Section button. This action will give you a pop-up as shown below. Here, you’ll need to enter the section title.
Now after adding a section title, you’ll need to add items under this section.
Example: If you have added a product listing section, further you can add items in it like Men’s Catalog, Women Catalog & Kids Catalog.
To add an item under this section, click on the > icon. Refer:
Clicking on the Add Item menu will give you a pop-up. Here, you’ll need to enter a title for the item, select a category and click on add. You can also enable/disable the item.
Furthermore, you can add multiple items to a section by clicking on Add Items button. Also, multiple child items can be added to a parent item by clicking on Add Child Item button.
Need Help?
When you’ll click on the Need Help button, you’ll be redirected to the following page:
Use this section to request us regarding Mobile App, Configuration or any other issue. All you’ll need to do is mention your name, email ID, request for and a message. Click on send message & we’ll get back to you as soon as possible.
Use-Case
Shopify Native Mobile App is a revolution in the E-commerce industry. With this app, the customer can easily access the store.
The customer can purchase the product just like in any other e-commerce app- Amazon, Flipkart, Alibaba and many more.
This app allows the customer to look for the products that admin is selling.
HomePage
The Shopify Native Mobile App is having a homepage which is systematically divided into sections.
These sections give the e-Commerce customers effective user experience.
The section referred here are known as cards in Mobikul Backend configuration on the Shopify Admin end.
- Category Carousel/Collection– This section contains a set of categories that are linked to the collection on the store.
- Slider- After this, in the demo, the user can view the banner slider. These banner sliders will contain Collection Of Products or a Category.
- Grid- This grid-like section will contain a set of products that are the best choice of the customer in this demo.
- Static Banner – Now the app user will view a banner that will contain a product(s) or category associated with it.
The app user can click on the banner to directly view the product details. Thus, allowing effective marketing of the product.
- List- This section will contain a set of products in the form of a list. Here, in the app, we have shown the best offers.
- Product Slider- This will contain the products in the form of a slider.
Notifications
The app allows the customer to share notifications with the customers. This will update the customer about new offers, discounts, products, and much more.
Multi-Lingual Support
The app offers the users to convert the app into the desired language. It allows app localization and an increase in customer interest in the app.
Left Navigation Drawer
The App user can view multiple options for app functionality.
From this section, the app user can manage the account related details and view the list of categories.
No, let’s individually visualize each section-
- Sign-Up- This will make the registration process of the e-commerce customer easy. So, they will be quickly adding the personal detail for the Sign-up Form.
- Login- Once registered the customer can login the app along with registered mail id.
Once Logged in the customer will be able to see the registered name, which will have the information about the account holder.
Thus, the app user can click on the name menu to view the My Profile section which will contain-
-
- Update Info- This contains the registered name detail along with the registered mail id.
However, the app user will get the functionality to edit the following details.
-
- My Orders- This will information about the Orders of the account holder.
-
- Address- The personal address detail of the account holder. Thus, allowing the auto-selection of address at the time of checkout for Billing and Shipping Address.
Here the customer has the facility to Add new Address(by clicking on plus sign), edit the address(by clicking on Edit Address) or delete the existing address(by clicking on delete button).
-
- Logout.
- List Of Categories- The customer can view the collection of categories in this section. Thus, the categories in this list are connected to the collection of products.
Search Product
Any e-Commerce app needs to work in an optimized manner. It enhances the utility of the app. Thus, allowing more user to attract on the store.
The app user just needs to type in the keywords related to the products. Thus, allowing the quick search of the desired product.
Machine Learning Search
The app gives the facility to the user to search the products via ML Kit’s ready to use API in Google’s Firebase. This will enable to make the app smart by enabling the machine to learn and respond accordingly. The app supports two cases for now-
- Text Detection– Reads the text on an object via camera and show the related result in the app. Currently, the text detection works for English language only.
- Product (Object) Detection– This will detect the object via camera and through machine learning the result related to the object will be displayed to be selected by the user. This will help the user to search the product more efficiently.
Categories and Products
The app user can view categories of product in left navigation drawer and category carousel.
The category present in the app is the division of the products as per similarities. This help in the E-commerce customer to acquire maximum benefit.
The categories in the left navigation include- Parents and sub-categories.
Thus, the Parent or root category is divided among the subcategory or child category for the precise division.
On clicking a particular category the app user is lead to category collection.
Thus, allowing the app user to purchase from multiple products of the same category.
The app user can tap on any desired product to know the details of the product.
Additionally, here the customer can even share the product with there friends and family if desired.
Enhanced Layered Navigation- On the collection page the app user can easily sort the product to fetch out the desired products.
Thus, allowing the customer to remain engaged in the store.
Add To Cart and Checkout
This app will also offer an efficient purchase process with an effective one-page checkout process. Here, the checkout will take place in multiple steps.
Wherein, the app user will check out by clicking on Add To Cart.
Thus, allowing the addition of the product to the cart from where the checkout process accomplishes.
After this, the customer will select the desired shipping address and the shipping method.
However, the customer can even confirm the product details on this page.
Then the customer will click on the Proceed button to go to the next step. Wherein, payment method selection takes place.
Finally, once all the selections are done the user will receive a success message.
Thus, indicating the accomplishment of the order placement.
Then the customer will go to the Order section to finally review the Order details.
RTL Support
The app allows the RLT format language users to easily use the app with this feature. Herein, as soon as the user changes the languages like Arabic, Urdu, Persian, or any else the app layout changes as below.
CMS Page
To make the customer familiar with the companies policies, details, and much more Mobikul mobile app builder supports CMS pages.
So, that’s all for the MOBIKUL still, have any issue feel free to add a ticket and let us know your views to make the module better https://webkul.uvdesk.com.