Back to Top

Mobile App for Shopify

Updated 9 February 2021

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
Headless solution ?
Find out More

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

AwesomeScreenshot-mobikul-mobile-app-myshopify-admin-api-auth-2019-07-31_11_36

Further, click on start free trial

AwesomeScreenshot-mobikul-mobile-app-myshopify-admin-charges-6289522742-request_recurring_application_charge-2019-07-31_11_38-2

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.

AwesomeScreenshot-mobikul-mobile-app-myshopify-admin-apps-14302e8ae4ebd26de4861464b28348d7-mobikul-admin-2019-07-31_11_53

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:

screencapture-mobikul-mobile-app-myshopify-admin-apps-14302e8ae4ebd26de4861464b28348d7-mobikul-admin-new-card-2019-07-31-12_01_54

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.

AwesomeScreenshot-mobikul-mobile-app-myshopify-admin-apps-14302e8ae4ebd26de4861464b28348d7-mobikul-admin-new-card-2019-07-31_12_06

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.

AwesomeScreenshot-nlipoenfbbikpbjkfpfillcgkoblgpmj-upload.html-2019-07-31_12_12

Once you add a slide, it will be displayed in the slide listing section. Refer:

AwesomeScreenshot-mobikul-mobile-app-myshopify-admin-apps-14302e8ae4ebd26de4861464b28348d7-mobikul-admin-new-card-2019-07-31_12_18

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:

AwesomeScreenshot-mobikul-mobile-app-myshopify-admin-apps-14302e8ae4ebd26de4861464b28348d7-mobikul-admin-2019-07-31_12_25

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.

AwesomeScreenshot-mobikul-mobile-app-myshopify-admin-apps-14302e8ae4ebd26de4861464b28348d7-mobikul-admin-2019-07-31_12_27

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.

AwesomeScreenshot-mobikul-mobile-app-myshopify-admin-apps-14302e8ae4ebd26de4861464b28348d7-mobikul-admin-2019-07-31_12_30

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:

AwesomeScreenshot-mobikul-mobile-app-myshopify-admin-apps-14302e8ae4ebd26de4861464b28348d7-mobikul-admin-side-panel-2019-07-31_12_34

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.

AwesomeScreenshot-mobikul-mobile-app-myshopify-admin-apps-14302e8ae4ebd26de4861464b28348d7-mobikul-admin-side-panel-2019-07-31_12_37

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:

AwesomeScreenshot-mobikul-mobile-app-myshopify-admin-apps-14302e8ae4ebd26de4861464b28348d7-mobikul-admin-side-panel-2019-07-31_12_42
Step 1
AwesomeScreenshot-mobikul-mobile-app-myshopify-admin-apps-14302e8ae4ebd26de4861464b28348d7-mobikul-admin-side-panel-2019-07-31_12_43
Step 2

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.

AwesomeScreenshot-mobikul-mobile-app-myshopify-admin-apps-14302e8ae4ebd26de4861464b28348d7-mobikul-admin-side-panel-2019-07-31_12_45

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.

AwesomeScreenshot-mobikul-mobile-app-myshopify-admin-apps-14302e8ae4ebd26de4861464b28348d7-mobikul-admin-side-panel-2019-07-31_12_51

Need Help?

When you’ll click on the Need Help button, you’ll be redirected to the following page:

AwesomeScreenshot-mobikul-mobile-app-myshopify-admin-apps-14302e8ae4ebd26de4861464b28348d7-mobikul-admin-need-help-2019-07-31_12_53

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 that is systematically divided into sections.

These sections give the e-Commerce customers an effective user experience.

The section referred to here are known as cards in Mobikul Backend configuration on the Shopify Admin end.

homepage_Shopify Native Mobile App
homepage_1
  • 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.

homepage_2

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

notifications

 

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.

multi-lingual

 

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.

left_navigation_drawer

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.

sign_up

  • Login- Once registered the customer can login the app along with registered mail id.
sign_in

Once Logged in the customer will be able to see the registered name, which will have the information about the account holder.

webkul_Mobile_App_for_Shopify_my-profile_2

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.

Account

    • My Orders- This will information about the Orders of the account holder.

my_orders

order_details

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

Addresses

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

New-Address

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

categories

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.

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.

mockup-1

mockup-2

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.

categories_homepage

categories_left_navigation

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.

collection_page

The app user can tap on any desired product to know the details of the product.

product_page

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.

enhanced_layered_navigation

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.

product

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.

checkout_1

Then the customer will click on the Proceed button to go to the next step. Wherein, payment method selection takes place.

checkout_2_shipping-1

checkout_payment_3

Finally, once all the selections are done the user will receive a success message.

Thus, indicating the accomplishment of the order placement.

order_confirmation

Then the customer will go to the Order section to finally review the Order details.

customer_order

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.

RTL

 

CMS Page

To make the customer familiar with the companies policies, details, and much more Mobikul mobile app builder supports CMS pages.

CMS page

 

Firebase Analytics

Shopify Mobile App supports Firebase Analytics. With the help of firebase analytics, the admin can track various events of the mobile app users. Some of them are the Active users on the app, Total app installs, Total app uninstalls, Most viewed products, Best Selling Products, and many more.

For that, you need to login into your Google Firebase account. And after that, need to navigate through Analytics > Dashboard to view all the data in Google Analytics.

navigation

ECommerce purchase:

ECommerce-purchase-event

Form the ECommerce purchase event, you can view the Add-to-Cart, Cart-to-View rate, Ecommerce Purchase, Purchase-to-View rate, Item Purchase, and Item Revenue.

For reference, you can check the below image:

ECommerce-purchase

App Uninstalled:

removed-app

In the above image, you can check the removed app chart as per the location.

App Installed:

Most-installed

In the above image, you can check the app installed chart as per the location.

Active Users

Active-User

With the help of the Active Users event, you can track the currently active user’s number in the graph.

Thus, 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

. . .

Leave a Comment

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


Be the first to comment.

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