Mobile App for Shopify — Mobikul

6 min readJul 31, 2019

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:

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

Searching for a Shopify Searching for a Shopify Headless solution ? Read More

Video Tutorial

Check the Shopify mobile app configuration of the home page from the admin SAAS store and how the chan ges 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:

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.

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.

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.

Current Product Version — 1.4

Originally published at https://webkul.com on July 31, 2019.