Reading list Switch to dark mode

    A Complete Beginner’s Guide to Shopify Mobile App Setup

    Updated 19 April 2023

    Shopify Mobile app converts the Shopify webstore into a Flutter-based mobile app.

    Starting an eCommerce store on Shopify is fairly easy. But as the sales are going multichannel adding a mobile sales channel is highly critical.

    Key Requirements to have a Shopify-based mobile application

    1 – Merchants must have a running website on the Shopify platform.

    2 – Valid account on google play store and apple app store.

    Searching for a Shopify
    Headless solution ?
    Find out More

    3 – The application must use Real-time API so that order synchronization must be there.

    4 – Flutter based apps are critical for User Experience as well as for performance.

    5 – Apple Still does not support hybrid/web apps in the app store. That’s why it is highly advisable to have a Flutter mobile app.

    that’s it. All you need to run a Shopify Android/iOS app.

    Shopify Mobile App has now come up with an updated backend user interface which is much more convenient & concise.

    Introduction to Mobikul

    Give your customers an incredible mobile app experience by seamlessly converting your Shopify store into a flutter Mobile Application using Mobikul.

    Trial: The app comes with a 30-days free trial periodCharges: $25/month (existing users will be charged with the old pricing only).

    About the app: Shopify Mobikul Mobile App is designed with a customer-centric approach. It enables users to have a complete online shopping experience from their smartphone and tablet devices. This app allows real-time synchronization of products, categories, orders, customers, and other relevant data.

    Ahead of this document, we are going to discuss the installation and configuration of this app. Before that, let’s put highlight some of the features.

    Highlights of the Mobikul app

    • A flutter-based hybrid app designed to be customer-centric which enables shoppers to have a complete online shopping experience from their smartphone and tablet devices.
    • Simple configuration with customizable home page and side panels of the mobile application.
    • Moreover, real-time product and order synchronization between the Shopify store and the mobile application.

    Note: We provide support to publish your mobile app on play store and app store.

    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 –

    p3M-OwyVnMY

    Check the Workflow at the mobile end for the Shopify mobile App –

    j22u78mo9nE

    How to Install Shopify Mobile App?

    After you logged into your Shopify account, on the left-hand side panel you have the APPS section Just open it up.
    Now it will take you out on the Apps page.

    STEP-1: Here on the top right corner you will have the SHOP FOR APPS button tap that up. It will bring you over the Shopify apps store itself.

    Shopify Mobile App

    STEP-2: Here you go to your Shopify app store and search Mobikul Mobile App in the search box.

    Shopify Mobile App

    STEP-3: After tapping that up you will see that particular page over here with the details of that Mobile App Builder, Do install this app into your Shopify backend. Here you see that ADD APP button just click it up.

    Shopify Mobile App

    STEP-4: After this, you need to move to your Shopify store and just refresh it and then you will find Mobikul Mobile App under the Sales channel of your store.

    Shopify Mobile App


    Here you got Mobikul Mobile App under the Sales channel in your Store.

    Shopify Mobile App Page Builder

    Once you install the app, it will be listed as a sales channel. Clicking on it will drop you to the landing app of the app, i.e., the Page Builder:

    Shopify Mobile App

    The page builder section lets you drag and drop different cards and allows you to add items to them instantly.
    On the left, you have the list of cards that you can drag onto the middle section, i.e., your mobile app widget, and drop.

    You can change the positions of the added cards in the middle frame by dragging them & dropping them into the desired position. Make sure to click on the save button as shown below to save the changes:

    Shopify Mobile App

    On the right, you have the option to add items to them.

    The type of cards that you can add:

    • Slider
    • Simple Banner
    • Grid
    • Carousel
    • List
    • Product Carousel

    To add an product to a card, simply click on the ‘Add Product’ button:

    Shopify Mobile App

    Further, select the product you want to add & then save the settings.

    s1

    In case the product isn’t available in the listing below, you can type in the name of the product and then choose the option to select a product from the Shopify store:

    This will display a complete list of products in your Shopify store. Select the product from this listing & add:

    image-22

    Further, if you want to edit the display image of the items added, click on edit:

    shopify22

    The item can be edited by adding a Custom Name, Custom Link, and a new image before being saved as per the below image.

    Shopify Mobile App

    Mobile Drawer Menu

    Moving on, we can add side panel menus to the mobile interface from here:

    Shopify Mobile App

    Click on ‘Add menu item to this’. Further, add a title to the side panel menu and click on add.

    m00

    Further, you can either add a category or Sub-category or set a link for this menu & add. Moroever, you can add the image with a height width between 46px to 48px.

    You can set the position of the cards by dragging & dropping them as per your choice. Refer:

    Amm

    Push Notification

    Using the Push Notification featured app you can now send instant push notifications to customers and much more Know more.

    io9

    Here, you can easily configure and manage your push notification messages as mentioned above.

    Moroever, you can edit the Push Notification Details as per the below-attached screenshot.

    aanchal

    Product Review

    In this section, you allow your consumers to provide and get feedback on the particular product and view your customer’s product review data as per the below image.

    uiuio

    You can also view your customer data by filtering up with the Ratings, Status, Type, and searching for a particular product mentioned above.

    Shopify Mobile App Integrations

    In the next tab, you will have different add-ons that you can use to enhance the functionalities.

    ioil

    Multivendor Marketplace :

    You can integrate Multivendor Marketplace App for Shopify with Mobikul Mobile App using Mobikul Multivendor Connector. This way your customers can easily filter products on a seller basis & shop from them.

    nmn

    Push Notification:

    You can easily integrate Push Notification for Shopify with Mobikul Mobile App. This way your customer can easily Book the app.

    The Push Notification & App Settings section will be activated when you will install add-ons.

    push

    Social Login :

    Using Social Login featured app you can sign up on your Shopify store using their social media accounts.

    Check out the complete information on Social login for shopify mobile app.

    Social Login is a single sign-on for end users. That means customers can use social networking services such as Facebook, Twitter, or Google, to sign in to your Shopify website instead of creating a new login account specifically.

    shopify-1

    Booking App Connector :

    You can integrate Booking App Connector App for Shopify with Mobikul Mobile App using Mobikul Booking App Connector. This way your customer can easily Book the app.

    image-6

    Wishlist Connector :

    The Shopify Wishlist Connector allows you to add your loved products to the bucket and store them in your user account for future reference.

    Therefore, Customers can add their favorites to the wishlist to keep track of the things they have in their eyes.

    wishlist

    Likewise, you can have different add-ons that you can use to enhance the functionalities.

    MySizeId Customer Measurements :

    MySizeID app gives personalized size recommendations based on the shopper’s specific details, allowing the customer to have confidence they are buying the correct size the first time.

    s90

    Multilingual Support :

    Translate & manage easily store into multiple languages to reach multilingual markets and drive more sales.

    samm

    Product Reviews :

    Shopify Product reviews allow you to add a customer review feature to your products. This provides a way for your customers to engage with you, as well as each other to encourage sales.

    ioio

    Delivery Slot Management:

    Customers can easily create a Delivery for all of the products they want to purchase from the Shopify Store.

    DSM

    Moroever, you can now deliver items to customers’ choices with the Delivery Slot Management App.

    Product Filter:

    Shopify Mobile App product filter allows shoppers to refine product searches based on multiple attributes like price, color, size, and reviews.

    pf.

    Product Auction For Seller:

    Product Auction App for Shopify enables the bidding feature or auction on products of your eCommerce website.

    ujn

    Shopify Mobikul Mobile – General Configuration

    Through the General configuration section, the client has full control over which type of checkout they want to have within their apps.

    jkjk-1

    As mentioned above through General configuration you can manage your store to customize how your app looks and behavior.

    You can also add an account login setting and the Number of digits after the decimal in the Price

    Note: This configuration setting will not be effective until not configured as the same as the store.

    Product Filter: Through the product filter section, you can manage your store to customize how your app looks and behavior as mentioned below.

    ium

    Additionally, you can customize the price filter to fit your needs in the show price filter section. As shown below, you can set the starting price and ending price.

    Shopify Mobile App

    Push Notification: Here you need to enter your Firebase Sender ID, Server Key, Application Public Server Key, and Application Private Server Key as per the below image.

    aanchal-1

    Theme: Using the Theme setting you can manage your theme to customize how your app looks by just Navigate to Mobikul MobileApp <Configuration < Theme Settings.

    nmn-1

    Google Maps: Here, you can manage your google maps settings to integrate with maps as shown below.

    Google Maps API key: The google API key is a unique identifier that authenticates requests associated with your project.

    Shopify Mobile App

    Auto-Publish Product: If you want to do your Shopify product auto-publish on the mobikul sales channel then this setting is activated.

    Shopify Mobile App

    Product Reviews & Ratings: You can manage your product review app settings to integrate with your Shopify store as mentioned below.

    Shopify Mobile App

    Multilingual Support: By using this feature you can translate your store content across multiple languages on the mobile app as shown below.

    Shopify Mobile App

    Gorgias chat: Gorgias chat configuration allows to integration of Gorgias chat into Mobikul Mobile App as mentioned below.

    Shopify Mobile App

    CMS Pages

    Now, you can add CMS pages that allow store owners to manage goods, variants, collections, tags, and shipping models in a user-friendly admin interface, all while keeping security in mind.

    Add CMS pages by just navigating to Mobikul Mobile App> CMS Pages as mentioned below.

    Shopify Mobile App

    Take an example, such as the contact us and privacy policy mentioned before. You can add any specific page that you wish to build by simply navigating to Add CMS Page as mentioned below.

    Shopify Mobile App

    You can add CMS pages by entering the Page Name and Page URL as mentioned above. Likewise, you can have different add-ons that you can use to enhance the functionalities.

    How to Connect Demo App With Shopify Store?

    Visit this section to get an Android or iOS demo:

    Shopify Mobile App

    Note: Enter the shop name & token provided on the mobile demo page as shown in the image above.

    Image1

    To have the demo, you need to scan the following code and enter your Unique App ID.

    Plans

    Here, you can buy a subscription plan as per the below image.

    Shopify Mobile App

    Need Help

    Use the help section to contact us regarding Mobile App, Configuration, or any other issue. All you’ll need to do is mention your name, email ID, request, and a message. Click on send message & we’ll get back to you as soon as possible.

    Shopify Mobile App

    Shopify Mobile App Frontend Images

    Get in touch

    Drop your query/suggestion at [email protected] or create your ticket at Webkul UV Desk.

    . . .

    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