Shopify Documentation 2017-06-22T16:18:58+00:00

Introduction

Thank you for taking interest in MobileFront!

MobileFront eCommerce App is professionally made cross-platform Ionic template that integrates with Shopify shopping platform. It is built with AngularJS, Ionic and Cordova, works on both iOS and Android and requires minimal effort to produce a ready to deploy app.

Bundle contents

After purchasing MobileFront you will receive the bundle.zip file. Unzip it anywhere on your development machine. Here are the contents of the bundle:

bundle_contents

After the installation is complete, the end result is a new folder containing your app source code, ready to be customized, built and deployed.

bundle_contents_2

Please see this section to learn more about mobile application project structure.

System requirements and dependencies

Before running the installation procedure please go through the checklist below and make sure that you have the following items ready:

  1. Computer with one of the following operating systems: Windows 7/8/10, OS X 10.9+, Ubuntu 14.04
  2. If you are using Mac, make sure you have xCode installed on it.

The following software packages are going to be installed during the setup procedure. You do not have to install these manually:

All platforms

  • NodeJS and NPM
  • Git
  • Cordova
  • Gulp
  • Bower
  • Ionic

Windows

  • Chocolatey

OS X

  • Wget
  • Homebrew
  • ios-sim
  • ios-deploy

Ubuntu

  • build-essential g++

Requirements

  • Android Studio in order to build for Android.
  • Mac computer with xCode installed on it In order to build for iOS.

All app installation aspects are covered in Installation section below.

Installation

We suggest to see the following video which covers all installation aspects of MobileFront Shopify Mobile App:

Configuration

There are just a few quick configuration steps before installing the plugin.

Getting Shopify partners account

MobileFront ships with MobileFront Shopify bridge server side application. This application will be plugged into your Shopify store and will act as a reliable and secure proxy between the mobile app and the store. To make this happen we will need to create a public application using Shopify Partners account, associate this application with MobileFront Shopify bridge and install it on your Shopify store.

In order to create Shopify Partners account:

  1. Go to Shopify Partners sign-up page
  2. Fill out the form. That’s all.

Creating a development store

If you already have a paid Shopify store you do not have to create a development store and can integrate the mobile app with your existing store during the installation. Just skip this section if you already have a Shopify store.

Shopify Partners account gives store developers the ability to create development stores free of charge. When the work on the development store is complete it can be transferred to a paid plan and launched. Development stores are a great way to demonstrate the abilities of MobileFront mobile application.

  1. Sign into your Shopify Partners account.
  2. In the right menu choose Development stores.
    development_stores
  3. Click Create new store button on the top right corner of the screen.create_new_store
  4. Give your store a name and choose a password.
  5. Make sure that Online store checkbox is selected.
    create_new_store_2
  6. Your store can be now accessed at your-shop-name.myshopify.com, where your-shop-name is the name you’ve chosen on the previous step.create_new_store_3
  7. Navigate to https://your-shop-name.myshopify.com/admin/.
    store_admin_1
  8. In the left menu navigate to Online store > Preferences.
    store_admin_2

You can read more about Shopify platform and discover all of its features at Shopify Help Center. To find out more about Shopify Partners program and development stores visit Shopify Partners Docs and Development Store Docs

Disabling password protection

Removing password protection is currently required for the MobileFront application to function correctly. This is true for all store types.

  1. Open your Shopify store admin dashboard and navigate to Online Store > Preferences.
  2. Scroll down to the bottom of the Preferences page and uncheck Password protect your storefront checkboxstore_admin_3
  3. Click Save button.

Getting Heroku account

Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. It comes with a free plan that works great for deploying server application for testing, demonstration or prove of concept purposes. The MobileFront Shopify bridge will be deployed to Heroku during the installation. You can later manage the bridge through Heroku’s rich toolset.

Heroku is one of the server application hosting options available out there, we’ve chosen it as our default service provider because of presence of a free plan and its streamlined approach to application deployment. You are absolutely free to use other means of hosting the bridge and we are actively working on documenting the steps to do so.

In order to create Heroku account:

  1. Go to Heroku sign-up page.
  2. Fill out the form, choosing NodeJS as your primary development language.
  3. Verify your email address.
  4. Once your account is active, login and go to Account Settings
    heroku1
  5. On the bottom of the Account Settings page you will see your API Key. You will need to provide this key during the installation.
    heroku2

Under no circumstances give out your Heroku API Key to a party you do not trust. MobileFront will use it in order to publish the bridge during the installation and will not store it anywhere.

App installation

Once all the configuration steps has been made it’s time to launch installation.

1. Starting installation

Windows

Find install-windows.bat file inside the bundle, right click it and from the context menu choose Run As Administrator. Alternatively, click Start, find Command Prompt application in programs and run it as administrator. By using the cd command, navigate to the extracted bundle directory and execute the following command:

install-windows.bat

OS X

  1. Open the terminal and cd to the extracted bundle directory
  2. Execute the following command:
    . ./install-osx.sh

The script might ask you to enter your password in the process

Ubuntu

  1. Open the terminal and cd to the extracted bundle directory
  2. Execute the following command:
    ./install-ubuntu.sh

Now grab some coffee and sit back. The installation script is downloading all the necessary software packages and setting up your development environment.

2. Installation questions

Once all of the dependencies are downloaded, the installation script will ask you a few questions:

  1. Name your app – pick a display name for your app displayed next to the application icon on the devices.
  2. What is your name – enter your name or the name of your organization.
  3. What is your email address – enter your or your organization’s email address.
  4. Select ecommerce plugin to install – choose shopify by using up and down arrow keys and continue.

Once you choose shopify, installation script will download some more packages within a few minutes. After that you will see a few more questions:

  1. Would you like to setup and deploy Shopify bridge? If this is the first time you install MobileFront Shopify please enter yes. If you have installed MobileFront Shopify before you may choose to skip this step by entering no – if you’re installing the Shopify plugin for the first time type “y” and continue.
  2. What is the name of your Shopify store – this is the name of your Shopify store as in your-shop-name.myshopify.com
  3. Enter Heroku API key – this is the Heroku API Key found on Heroku Account Settings page. See step 4 and 5 of Heroku section.

questions

Please be careful while typing store name and Heroku API key as the accuracy of this data is critical to the success of the installation process. Failure to specify correct store name and Heroku API key will result in installation failure and you will have to start again.

3. Creating Shopify Public app in Shopify Partners account

If everything is ok on step 2 you’ll be presented with several values:

  • App name
  • App URL
  • Redirection URL
  • App proxy – Sub path prefix
  • App proxy – URL
  • App proxy – Proxy URL

public_app_params

These parameters will help you to create Shopify Public app with your Shopify Partners account. Press ENTER in the terminal/command line window and you’ll be taken to Shopify Partners login page. See this section for more information about setting up Shopify Partners account. Next:

  1. Sign into your Shopify Partners account.
  2. On the left hand side menu find Apps item and navigate to it.
    public_app_1
  3. On the right top corner find Create new app button and click it.
    public_app_2
  4. Fill out the presented form using the values shown in your terminal / command line windows. You can leave the rest of the fields untouched.
    public_app_3
  5. Check I have read and agree to the Developer Terms & API Licensing Agreement box and click Create App.
  6. Your public app is ready and you should see a page that looks like the one below:
    public_app_4

4. Install MobileFront Shopify bridge on your Shopify store

Your terminal / command line window is waiting for you to answer two more questions:

  1. Shopify API key – copy it from the app settings page shown on the screenshot above.
  2. Shopify secret – this one is in the input labelled Credential sets.
    public_app_5
  3. Press ENTER to be taken to the MobileFront Shopify bridge installation page. The URL of this page is displayed in green in the installation window.
    install_link
  4. You should see a page that looks like the one below:
    install_shopify_app
  5. Click Install app button.
  6. The next page will display Shopify access token.
    If for any reason you receive an error during this step, copy the link in green (see above), paste it into the browser URL bar and click install app button again.
  7. Copy this token and paste it into the installation window.
    set_token

5. Finalizing the installation

At this point MobileFront installation script has received all the necessary info to complete the installation. Your app development project will reside in a child directory named after your app – remember you’ve specified the name of your app on step 2? You will work in the project to configure, build and release your mobile app.

In a few moments the installation script finishes its job and launches your default browser with the web version of the mobile app in it.

Congratulations you’ve successfully installed MobileFront with Shopify plugin!

Running the app

The following section will show you how to run and test the app in a desktop browser, on Android and iOS platforms.

All the commands below assume that you have terminal or command line open at your project folder – a folder that gets created during the installation and has the name you’ve chosen.

Running in browser

For testing, debugging and developing purposes we recommend using Chrome browser. Safari and Firefox will also work fine.

To test the app in a desktop browser type the following command:
gulp

gulp command builds the project and launches the app in the default browser. It also watches for modifications of JS, HTML and SCSS files and reloads the page when the source code changes.

Running on devices

Before building the app for physical devices and emulator there are a few commands that should be executed before. Move to project folder by using the cd commands in terminal/command line and type the following commands in the order specified:

  1. gulp -b
    this command will build the project into www folder, minifying and concatenating JavaScript files.
  2. cordova prepare
    this will create iOS and Android projects in /platforms directory.

Running in iOS simulator

Running the app in iOS simulator requires Mac computer with xCode installed.

Run the following commands in terminal:

gulp -b

cordova run ios

iOS simulator will be launched with the app running in it.

If after running cordova run ios the simulator does not appear, run the command again. This happens sometimes when running the app for the first time.

Android

If you are going to build the app for Android you’ll need to install the Android Studio.

Running on Android emulator

Android emulators maybe slow. See this Stack Overflow thread on possible options for fast Android emulators or try Genymotion instead.

To run the app on Android emulator follow the steps below:

  1. Launch Android Studio and open any existing project or create new one with any options you want.
  2. Select Tools > Android > AVD Manager.
  3. Create any virtual device and run it.
  4. Run the following command:
    gulp -b && cordova emulate android

The app will be built and run on the emulator.

Running on real Android device

To build the app for Android follow the steps below:

  1. Plug in your Android device to your computer via USB cable. Make sure your device is recognized by the computer.
  2. Turn on the USB debugging mode on the device. See this short video for instructions.
  3. Run the following commands:
    gulp -b && cordova run android

The app will be built and uploaded to the connected device.

Using Crosswalk

If you are aiming for older Android devices (< Android 5.0), it makes sense to use Crosswalk plugin for binary builds. Crosswalk plugin will embed its own webview built on Chromium directly into your app, which will guarantee that most of the modern HTML5 and CSS3 features are supported even on old devices. Performance will be significantly improved as well. However, because of the embedded webview your app bundle size will be increased by ~20 mb.

Learn more about Crosswalk here.

Building with Crosswalk

MobileFront doesn’t recommend using Crosswalk if you are are not targeting old Android devices (older than 5.0), but feel free to try both variants and choose which one is better for you.

Here is how to build the Android binary with Crosswalk:

  1. Go to your app folder via terminal and execute the following command to install Crosswalk Cordova plugin:
    cordova plugin add cordova-plugin-crosswalk-webview
  2. Then you need to cleanup the old builds by executing the following command:
    cordova clean android
  3. Now you can build for android with Crosswalk:
    gulp -b
    cordova run android
Removing Crosswalk
  1. If you want to remove Crosswalk, execute the following command:
    ionic browser remove crosswalk
  2. Before building without Crosswalk, cleanup the old builds, by executing the following command:
    cordova clean android

Features and customization

The section below explain mobile application structure, features and customization options.

Mobile application project

The main project folder has the following structure.

project_structure

Configuration files

MobileFront Shopify Mobile app provides a set of configuration options. Configuration options are separated into two files:

  • Settings.yml – controls configuration options that are common for all eCommerce platforms. It’s located in config folder.
  • Shopify.yml – controls Shopify-specific features. It’s located in plugin subfolder of config folder. Its name depends on what integration plugin is used:
    • Shopify – shopify.yml
    • Static data – staticdata.yml

Settings.yml

Here’s the list of common configuration parameters:

  • plugin – the name of the plugin which is currently used to connect to eCommerce backend.
  • theme – UI theme name. Read more about themes here.
  • home_blocks – defines the home page layout. Read more about home page configuration here.
  • phone, email, website, address– values of these parameters will be display on About Us page. About Us page description is here.
  • display_vendor – whether the vendor name should be displayed for the items on the Products page.
  • cart_badge – calculate amount of items in shopping cart based on distinct item quantity or based on total items quantity. Possible values: distinct_item_count, total_item_count.
  • stripe_key – stripe publishable key. Currently used only for WooCommerce integration.
  • push_enabled – whether the push notifications are enabled. Read how to setup push notifications here.
  • ionic_app_id – Ionic app id to which MobileFront app is linked for sending push notifications.
  • android_sender_id – sender id generated by Google Firebase for push notifications on Android.

Shopify.yml

Here’s the list of Shopify-specific configuration parameters:

  • name – plugin name. Used for installation purposes should always be shopify.Don’t change this field.
  • api_host – URL of the MobileFront Shopify bridge.
  • root_category – name of the root navigation menu. In Shopify this is usually main-menu but you can create navigation hierarchy based on any other menu. The items of the root menu will be displayed on the home page. Defaults to main-menu.
  • sorting_options – used for displaying sorting options in the app. Don’t change this field.

Themes

MobileFront provides a few built-in color themes for the app. Current theme can be configured via theme parameter of settings.yml file. Possible values for this parameters are:

  • evening
  • rainbow
  • blossom

Creating themes of your own is very easy:

  1. Go to app/styles/themes folder, duplicate any of existing theme and give it any name. For instance – mytheme.
  2. Edit the your new theme in a way you want.
  3. Now open settings.yml file and type mytheme as value for theme parameter.
  4. In terminal, execute gulp command. It will rebuild the app with modified settings and launch it in the browser.

Home page

Home page is what users see first after opening MobileFront app. Home page can contain up to 3 promotional blocks and any number of products categories.

Promotional blocks

Promotional blocks can be flexibly configured via settings.yml file. A block can represent a group of products that you’d like to promote on the home page, e.g. “Items on sale”, “New fashion for men” and so on. Each block can have it’s own image, title, subtitle and action button. Clicking a block will take the user to the product list page for a collection associated with the block. All block parameters are described below:

  • title – title of the block. Leave empty value for no title.
  • subtitle – subtitle displayed right below the title. Leave empty value for no subtitle.
  • action – text of the action button displayed below subtitle. Leave empty value for no action button.
  • highlightContent – displays a semi-transparent strip behind title, subtitle and action button. If the image has bright background, it can improve text visibility.
  • storeCategoryId – id of the Shopify collection associated to this block. Clicking the block will take the user to the product list page for that collection. Here is how to find the collection id on the Shopify side:
    • Open your Shopify store.
    • Go to Products > Collections.
    • Open collection you need. The last value in the URL is the collection id. It can look as following:
      https://mobile-front-shop.myshopify.com/admin/collections/217836935
  • image – defines background images of the promotional block. There are two ways to set background images for the block:
    1. Add image to the app by placing it in app/images/homepage and use this path as a value of the image parameter. This option results in faster block loading time but is less flexible, because in order to change the image you will have to rebuild the app.
    2. Use the collection image from your Shopify store – if the value of image parameter is empty, MobileFront will attempt to load category image from the backend based on storeCategoryId parameter value. This way you can dynamically set the images for your promotional blocks without the needs to re-publish the app to the app stores.
  • halign – horizontal alignment of the block content. Possible values are:
    • left
    • right
    • center
  • valign – vertical alignment of the block content. Possible values are:
    • top
    • bottom
    • middle

Navigation

MobileFront home page displays links to Shopify collections. Newly created Shopify stores have no links on the home page since none are defined in Shopify by default.

links_11

Use the following steps to create a collection link on the home page.

  1. Go to your Shopify store admin page.
  2. Navigate to Online Store > Navigation.
    links_2

    links_3
  3. Main menu is the default navigation root of your webstore. By default there are just 4 links there: Home, Catalog, Blog and About us. However none of these are pointing to a collection. Let’s create a new link that will point to a category. Click Edit menu link.
    link_4
  4. On the next page click Add menu item button.
    links_5
  5. Choose a name for the new item, choose Collection for the link type and select which collection this link should point to.
    links_6
  6. Click Save button.
  7. Run the mobile app. You should see the newly created link below promotional section on the home page.
    links_10

This way you can create a list of collection links on the home page.

Side menu

The MobileFront eCommerce app has side menu for quick access to main app pages. There is a default avatar image on top of the menu items. For example, you can change it to your shop logo:

  1. Go to app/images/side_menu.
  2. Replace the default_avatar.png with your image.
  3. Recommended image size is about 257x257 pixels.

Product list

product_list_1

The product list page displays a group of products belonging to the same category.

Tab bar

When the current category has child categories these are displayed in tab bar. Users can refine the product list by these categories by tapping tab bar items. Note: child category will only display in the tab bar if they don’t have child category of their own.

product_list_2

Infinite scroll

When the user reaches the bottom of the product list the application starts loading the next portion of products if there are any available.

Display options

Products can be displayed in two ways: grid view and list view. To switch between the two the user can use the button in the bottom right corner of the page.

product_list_4

Sorting

The users can sort the products using the selector located in the left bottom corner of the page.

product_list_3

Hiding bars

When the user starts scrolling through the list of products tab bar and footer slide away in order to have more space for products. To show the bars again the user should scroll up a little bit.

Hiding vendor

In order to hide the vendor of the product item, go to the setting.yml and set display_vendor to false.

Product details

Product details page serves to display everything about selected product. There is an image slider on the top of the page with all product images. Below the slider, there is a product title, its price and expandable description.

product_details

Selecting variant

In the very bottom of the page, there is product variants selector. It can be used for choosing different product variants – for example, t-shirt sizes or colors. If the image was associated with certain variant on the eCommerce side, image slider will be automatically swiped to this image when choosing this variant.

If the chosen variant is not available (for example, sold out), adding to cart and changing quantity will be replaced by SOLD OUT title.

sold_out

Adding product to cart

ADD TO CART button will add the currently viewing product to the shopping cart. To change the quantity of adding product, click plus or minus buttons.

add_to_cart

Adding to wishlist

Any product can be added to a wishlist by clicking heart icon in the bottom right corner of the image slider. Wishlist can be accessed from the side menu.

Shopping cart

Shopping cart allows to review and manage products before checking out.

cart

Changing quantity

It’s possible to increase or decrease the chosen quantity of each product by clicking plus or minus buttons accordingly.

cart_1

Removing product from cart

Removing product from the cart can be done by clicking delete button. Product will be also removed from the cart, if its quantity equals to 1 and minus button is clicked.

cart_2

Checking out

Total amount of money to pay is displayed in the left bottom corner of the page. When clicking Checkout > button, checkout process will be started.

About us

About us page serves to display information about you or your company and can be reached via side menu. There are few things you can customize on About us page:

  1. Logo – go to app/images and change logo_about.png to yours.
  2. About Us text:
    1. go to resources/languages/en_US folder and open translation.json.
    2. Find about section and change aboutText value to yours.

      For more about translations see Language resources section.

  3. Contact information – go to config/settings.yml, and change phone, email, address and website to your own.

Language resources

MobileFront was build with localization in mind. All of the labels and messages seen in the app are stored in a localization file located at /resources/languages/en_US/translation.json. Values found in this file can be modified to meet your needs. For example, in order to change Whishlist item label to Favorites:

  1. Find the menu object in translation.json.
    "menu": {
    "home": "Home",
    "myCart": "My Cart",
    "wishlist": "Wishlist",
    "about": "About"
    }
  2. Change Wishlist property value to Favorites.
    "menu": {
    "home": "Home",
    "myCart": "My Cart",
    "wishlist": "Favorites",
    "about": "About"
    }
  3. run gulp command and observe the change in the browser.

Other texts can be changed in a similar fashion.

Under the hood MobileFront uses angular-translate to map values from translation.json to UI. You can read more about angular-translate and how it helps you localize your app here.

Push notifications

This section will show you how to configure MobileFront mobile app to send push notifications via free Ionic Push services.

Linking Ionic cloud with MobileFront app

Follow the steps to link Ionic Push service with MobileFront app:

  1. Go to Ionic framework website and create new account. These credentials will be used to link your MobileFront app with Ionic cloud.
  2. Run the terminal inside the mobile app folder. Execute the following command to sign in with Ionic:
    ionic login
    For example:
    ionic login hello@example.com password
  3. Execute the following command and choose app created earlier:
    ionic link
  4. After that, find ionic.config.json file in the root folder of the app, copy app_id and paste it as value for ionic_app_id parameter in settings.yml file that is located in config folder. It may look as following:
    ionic_app_id: 40d6c4d5
  5. Also, change push_enabled flag that is also located in settings.yml to true.

Configuring FCM (Android only)

A Google Firebase Cloud Messaging Sender ID and Server key are needed to send push notifications to Android devices.

  1. Visit the Firebase Console and create a new project.
  2. Enter a name and region for your project, then click Create Project.
  3. Once the project is created, click the gear next to your project’s name in the side menu and then click Project settings.
  4. From the project settings screen, select the Cloud Messaging tab. This will show you your Server key and Sender ID. Write down these credentials, you will need to provide them in next steps.
  5. From the project view, click add Firebase to your Android project. Enter bundle id that can look as following:
    com.myshop. Click Register.
  6. Once the project will be registered click Download google-service.json file. You will need later as well.
  7. Open settings.yml file of your mobile app and paste Sender ID as value for android_sender_id parameter.

Installing push plugins

For proper work of push notification a few plugins should be added to your project.

  1. Open terminal in the app folder and execute the following command:
    cordova plugin add cordova-plugin-device
  2. Next command differs between iOS and Android, so if you are going to build for Android and iOS execute the following:
    cordova plugin add phonegap-plugin-push --variable SENDER_ID=YOUR_FIREBASE_SENDER_ID
    Where SENDER_ID is your Firebase sender id that was obtained earlier.
    If you are going to build for iOS only execute the following commands:
    cordova plugin add phonegap-plugin-push
    and
    sudo gem install cocoapods

Configuring Ionic Cloud

There a few changes should be made on Ionic Cloud to complete the push notifications configuration:

  1. Go to Ionic dashboard, click on your app icon and choose Settings tab.
  2. Click + New Security Profile. Provide any name for profile and click Create.
  3. Click EDIT right to the just created profile.
  4. To configure push notifications for Android:
    1. Switch to Android tab.
    2. Paste your Firebase Server Key that was obtained earlier for FCM Server Key field.
    3. Provide Android Keystore. See how to obtain it here.
  5. To configure push notifications for iOS:
    1. Switch to iOS tab.
    2. Provide APN Certificate and APN Certificate Password. See how to obtain them here.

Building the app

From terminal, execute the following command:

gulp -b && cordova prepare

If you are building for Android, navigate to app folder > platforms > android and paste there google-service.json file.

See Running on device section for further steps to run on the device.

Sending push notification

Once the app is built you can send your push notifications from Ionic dashboard:

  1. From Ionic dashboard click on your app icon and the choose Push tab.
  2. Click Create your first Push. Compose your push notification by following the steps.

Miscellaneous

Changing icons and splash screens

Changing icons and splash screens is a really common task and can be done easily within MobileFront template. There are two ways to replace those assets:

  1. Automatically generate icons and splash screens. Ionic allows to automatically generate all the necessary icons and splash screens based on a single base image. However, this may not work for you, if you want to use different icons for IOS and Android or precisely control the look of the splashscreens in different dimensions.

    Read here for more about Ionic image generation.

  2. Manually replace icons and splash screens. This approach allows you to have absolute of control how splashscreen look in different dimensions.

Changing assets manually

  1. Go to your mobile application project folder (see Bundle contents if you don’t know where it is).
  2. Find resources folder and open it. You will see android and ios folders. Each of them contains platform-specific icons and splash screens.
  3. Replace them with your images (keeping the names and dimensions the same).
  4. Once you are done changing icons and splash screens, open command line, navigate to your app folder and run the following command:
    gulp -b
  5. Now you can check your new icons and splash screens on the device. See here how to run the app on the device.

Generating assets automatically

  1. Go to your mobile application project folder (see Bundle contents if you don’t know where it is).
  2. Find resources folder and open it.
  3. You will see icon.png and splash.png files. Those files will be used to generate multiple assets with different sizes. Replace them with your own images keeping the names and dimensions the same.
  4. Open command line and navigate to your app folder. Type the following command to generate icons and splash screens:
    ionic resources
  5. If you want to generate only icons, execute the following command:
    ionic resources --icon
  6. If you want to generate only splash screens, execute the following command:
    ionic resources --splash
  7. Now run the following command to build the app with new assets:
    gulp -b
  8. You can check your new icons and splash screens on the device. See here how to run the app on the device.

Missing assets on the device issue

Sometimes your new assets can’t deployed to the device. This is a known Cordova issue and it can be easily fixed:

  1. Once you’re done replacing icons and splash screens, go to your app folder > platforms > android (or platforms > ios) and simply delete the build folder.
  2. Now open command line, navigate to your app folder and run the following command:
    ionic clean
  3. Then you can build the app by executing gulp -b and deploy the app to the device after it.

Installing Java SDK

Android SDK requires Java SDK to be installed. follow the steps below on how install it:

  1. Go to Java SE Development Kit 8 Downloads page, accept the license and choose the bundle for your OS. For example, for 64-bit Windows it could be jdk-8u101-windows-x64.exe.
  2. Download the bundle, launch it and proceed with installation.

Once installation is done, you can install the Android SDK.

Installing Android SDK

Sections below will guide you through Android SDK installation steps for your OS.

Before installing Android SDK, make sure you have installed Java SDK as described here.

Windows

  1. Go to Android Studio page and scroll down to the bottom of the page.
  2. In table column SDK tools package download the bundle for Windows with installer, launch and install it.
  3. Once the install is complete, leave Start SDK Manager checkbox checked and click Finish. Android SDK Manager will be launched.
  4. Check Tools folder. Expand the following folders and check SDK Platform in all of them:
    • Android 7.0 (API 24)
    • Android 6.0 (API 23)
    • Android 5.1.1 (API 22)
  5. Click Install packages.
  6. In the next window, accept the license and click Install.

It will take some time to download and install everything. Once it’s done you can build your eCommerce mobile for Android! See here for details.

Mac

  1. Go to Android Studio page and scroll down to the bottom of the page.
  2. In table column SDK tools package download the bundle for Mac.
  3. Extract the downloaded bundle and move it contents to ~/Library. So path to your Android SDK will look like ~/Library/android-sdk-macosx.
  4. Open android-sdk-macosx > tools folder, find android file there and open it via terminal: right mouse click > Open With > Terminal. Android SDK Manager will be opened.
  5. Check Tools folder. Expand the following folders and check SDK Platform in all of them:
    • Android 7.0 (API 24)
    • Android 6.0 (API 23)
    • Android 5.1.1 (API 22)
  6. Click Install packages.
  7. In the next window, accept the license and click Install.
  8. While SDK Manager settings everything up you can add ANDROID_HOME to your environment variables:
    1. Open Terminal and execute the following command:
      touch ~/.bash_profile; open ~/.bash_profile
    2. Add to the opened file the following line:
      export ANDROID_HOME=/Library/android-sdk-macosx
    3. Save file.

It will take some time to download and install everything. Once it’s done you can build your eCommerce mobile for Android! See here for details.

Changing bundle id

The bundle identifier is the unique string that identifies your application. Bundle ID is defined during app creation steps on Google Play or Apple App Store and should be the same in your app descriptor. You should change bundle id to yours before publishing the app. Here is where to find it:

  1. Navigate to your mobile application project folder.
  2. Find config.xml file in the root of this folder. This file is your app descriptor.
  3. On the second line you will see something like that:
    widget id="io.mobilefront.ecommerce" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"
  4. This id is your bundle id. Change it to yours. It should has the following format:
    com|org|io.your_company_name.your_product_name

config.xml has much more options to change. Learn more about it here.

Contact us

MobileFront says thank you for purchasing our product. We are always open for questions and suggestions so don’t hesitate to contact us at support@mobilefront.io. You can also leave your feedback in comments section of our product on CodeCanyon.