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.
Features of Shopify Native Mobile App
- Interactive theme to attract the maximum customer in the store.
- 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.
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:
- 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:
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.
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.
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.
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.
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 which 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 which are the best choice of the customer in this demo.
- Static Banner – Now the app user will view a banner which 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.
Left Navigation Drawer
The App user can view multiple options for the 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.
Just enter your email below to subscribe and receive weekly updates about the most interesting similar articles.
Share article viaSignUp Again
- 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).
- 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.
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.
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- Parent 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.
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 on 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.
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.
Current Product Version - 1.4