How To Build Shopify Mobile App Using React Native: Shopify Store Into Mobile App

Today, it’s damn easy to convert your Shopify Store into a native app. Kudos to React Native Shopify template. 

In this post, we will describe every step in detail to help you integrate the app template with your Shopify online storefront. 

The best part is the below steps don’t demand any prior coding experience. Even non-coders can transform their Shopify store into a mobile app with no additional hassle. 

Things You Need to Make Your App Publish-Ready on App Stores – Quick Recap

• Change two API keys to link your Shopify online store to the downloaded app template.
• Pick a Checkout Method
• Optional – Create your Stripe account (used for mobile payments) and link it if you choose to follow the native checkout mode.
• Run the app on Android
• Run the app on iOS

Steps to Turn Your Shopify Store Into a Mobile App

Step 1: Link Your Shopify Storefront

The first and foremost step is to set up your mobile app to transform your Shopify Store into a native eCommerce mobile app. 

Here, you need to link your Shopify site to the React Native template. This will help you to categorize your products and display them within the app. 

Step 2.1: Generate an Access Token to Access Your Shopify Storefront

To access your Shopify store from your new mobile app, you will need an access token. You can generate it following the simple steps below:

• Login to the Shopify admin dashboard of the store to which you want to connect.
• In Shopify, create an App to act as a middleware by filling a simple, short form.
• After you create an App, copy the storefront access token (you generated). 

Let’s Describe These Steps in Detail to Get It Clear. 

a) On your Shopify admin dashboard, on the left menu list, click “Apps.” 

b) Near the bottom of the page, click “Manage private apps.” 

c) Click “Create a new private app.” 

d) In the “App Details” section, type a name for your private app along with an email address (for your connection).

Note: Shopify Uses This Email Address to Connect with The Developer if Caught up With an Issue with The Private App).

e) In the “Admin API” section, select the store areas that you want your app to access. 

f) Be sure you tick the checkbox to *Allow* app to access your Shopify Store data. 

g) In the “Storefront API permissions” section, choose which data type you want to show to the app. 

h) Click “Save,” and an access token of your store will be created. 

After the creation of your access token, you will be directed to a page including different sections as below:

• App Details.
• Admin API.
• Storefront API.

Now, scroll down to the bottom of the page to see and copy the newly crafted Storefront access token to your clipboard. 

Step 2.2: 

Update the Shopify Store URL and Storefront Token in the React Native Code

Now, after you have a storefront token, you need to add it to the app. 

Just open the src/ShopertinoConfig.js file and override the Shopify configuration with your storefront data. 

shopifyConfig: {
  domain: 'your_store.myshopify.com',
  storefrontAccessToken: 'accessTokencb72e4222c9b90332662fa39e93f',
  apiKey: 'apiKey123121',
  password: 'your_password',
},

Step 3: Select Your Checkout Method

Shopify app supports two types of checkout:

a) Shopify Webview 

• This is the case when the customer looks to place an order – The app opens your Shopify checkout web page in a web view. After that, they pay and place their order (similar to what they do in your store). Ahead, the payment falls straight into your Shopify storefront, similarly as it does for your website checkouts. 
• This method is not for the one who uses Android Pay and Apple Pay, as the payment is completed through a webview, not natively. 

b) Stripe Payments

• This uses Stripe for payment processing and is natively done directly in React Native (no webview).
• This supports just one-click orders with Android Pay and Apple Pay, as everything is done completely natively. 
• The money falls into your Stripe account, and the orders start being showcased in your Shopify dashboard. 

To choose the right checkout method, just open src/ShopertinoConfig.js and set the “isStripeCheckoutEnabled” flag value to:

• True, which allows native Stripe Payments. (Stripe Setup Required)
• False, Which allows Shopify Webview put off payment processing to your site. 

Step 4: Running on iOS

First, be sure you installed the npm packages (“npm install”). 

Various React Native templates choose advanced npm packages, like Facebook SDKs or Firebase, that need to be linked. 

The app doesn’t work with Expo and can’t just run by executing  “react-native run-ios,” either.

So, to run your app on iOS, a MacOS computer is needed. Windows users are unlucky here, as they will have to get either an Apple computer or install a virtual machine on their laptop. 

Note: To develop an eCommerce app for iOS from Shopify’s premium app template, first, you need to install Xcode and Cocoapods. 

In your project’s directory, open your Terminal, and switch to the “ios” subfolder, to install the pods by executing:

Input:

cd ios && pod install

This will install every dependency on which your iOS mobile app template depends. 

Output: 

Next, below the “ios” folder, you will find a file, “Shopertino.xcworkspace”. You need to open it in Xcode, and then, first, by choosing which simulator or device you want, run the app. 

This will automatically open up a metro bundler instance. 

If it fails to start, just run “npm start” in the Terminal to open it. And after that, only run the app in Xcode again. 

If you are facing any other issues, you can connect with our Shopify experts. 

Step 5: Running on Android

To run your Shopify app template on Android, just open an Android emulator (or just plug in a device) and run:

npm install && react-native run-android

This step will include dev environment setup also if you are doing this first time.  

Shopify Mobile App Implementation From Scratch

1. Installation

1. We will use shopify-buy SDK. 

2. In the terminal, run the following command-

With Yarn:

yarn add shopify-buy

OR

With NPM:

npm install shopify-buy

How to Use the Plugin:

Note- We will create a separate file for Shopify functions, and 

We have named it shopifyServices.js.

2. Initializing the Client:

If your Shopify store supports various languages, Storefront API can return the translated resource types and fields. 

1. Import Library in Your App Code-

import Client from 'shopify-buy';

2. Initializing the Client

// Initializing a client to return content in the store's 
primary language
const client = Client.buildClient({
  domain: 'your-shop-name.myshopify.com',
  storefrontAccessToken: 'your-storefront-access-token'
});

  Note- domain: will be your Shopify domain

storefrontAccessToken: This will be the Storefront access token

3. Fetching Products

1. Fetch All Products in Your Shop

// Fetch all products in your shop
 
export async function fetchAllProducts() {
 
   return client.collection.fetchAll();
}

You can fetch all the products by accessing this function,

var products = await fetchAllProducts(); 

2. Fetch Single Product by Id

// Fetch a single product by ID
 
const productId = 'gid://shopify/Product/7857989384';
 
export async function fetchSingleProduct() {
 
   return client.product.fetch(productId);
}

4. Fetching Collections:

// Fetch all collections, including their products
export async function fetchCollections() {
 
   return client.product.fetchAllWithProducts();
}

Fetch Single Collection by ID

// Fetch a single collection by ID, including its products
export async function fetchCollectionById() {
   //collectId which do you want to fetch
   const collectionId = 'gid://shopify/Collection/369312584';
 
   return client.product.fetchWithProducts(collectionId);
}

5. Creating Empty Checkout:

// Create an empty checkout
export async function createCheckout() {
 
   return  client.checkout.create();;
}

6. Updating Checkout Attributes:

// Updating checkout attributes
export async function updateAttributes() {
   const checkoutId = 'gid://shopify/Checkout/e3bd71f7248c806f33725a53e33931ef?key=47092e448529068d1be52e5051603af8';
   const input = {customAttributes: [{key: "MyKey", value: "MyValue"}]};
   return  client.checkout.updateAttributes(checkoutId, input);
}

7. Adding Line Items:

// Adding Line Items
export async function addLineItems() {
   const checkoutId = 'gid://shopify/Checkout/e3bd71f7248c806f33725a53e33931ef?key=47092e448529068d1be52e5051603af8'; // ID of an existing checkout
   const lineItemsToAdd = [
     {
       variantId: 'gid://shopify/ProductVariant/29106064584',
       quantity: 5,
       customAttributes: [{key: "MyKey", value: "MyValue"}]
     }
   ];
   return  client.checkout.addLineItems(checkoutId, lineItemsToAdd);
}

8. Updating Line Items:

// Updating Line Items
export async function updateLineItems() {
   const checkoutId = 'gid://shopify/Checkout/e3bd71f7248c806f33725a53e33931ef?key=47092e448529068d1be52e5051603af8'; // ID of an existing checkout
   const lineItemsToUpdate = [
       {
           id: 'gid://shopify/CheckoutLineItem/194677729198640?checkout=e3bd71f7248c806f33725a53e33931ef',
           quantity: 2
       }
   ];
 
   return client.checkout.updateLineItems(checkoutId, lineItemsToUpdate);
}

9. Removing Line Items:

// Removing Line Items
 
export async function removeLineItems() {
   const checkoutId = 'gid://shopify/Checkout/e3bd71f7248c806f33725a53e33931ef?key=47092e448529068d1be52e5051603af8'; // ID of an existing checkout
   const lineItemIdsToRemove = [
     'gid://shopify/CheckoutLineItem/194677729198640?checkout=e3bd71f7248c806f33725a53e33931ef',
     'gid://shopify/CheckoutLineItem/194688829198640?checkout=e3bd71f7248c806f33725a53e3345gtd'
   ];
   return client.checkout.removeLineItems(checkoutId, lineItemIdsToRemove);
}

10. Fetching Checkout:

// Fetching a Checkout
 
export async function fetchCheckout() {
   const checkoutId = 'gid://shopify/Checkout/e3bd71f7248c806f33725a53e33931ef?key=47092e448529068d1be52e5051603af8'; // ID of an existing checkout
 
   return client.checkout.fetch(checkoutId);
}

11. Adding a Discount:

// Adding a Discount
 
export async function addDiscount() {
   const checkoutId = 'gid://shopify/Checkout/e3bd71f7248c806f33725a53e33931ef?key=47092e448529068d1be52e5051603af8'; // ID of an existing checkout
   const discountCode = 'best-discount-ever';
   return client.checkout.addDiscount(checkoutId, discountCode);
}

12. Removing a Discount:

// Removing a Discount
export async function removeDiscount() {
   const checkoutId = 'gid://shopify/Checkout/e3bd71f7248c806f33725a53e33931ef?key=47092e448529068d1be52e5051603af8'; // ID of an existing checkout
 
   return client.checkout.removeDiscount(checkoutId);
}

13. Updating a Shipping Address:

// Updating a Shipping Address
export async function updateShippingAddress() {
   const checkoutId = 'gid://shopify/Checkout/e3bd71f7248c806f33725a53e33931ef?key=47092e448529068d1be52e5051603af8'; // ID of an existing checkout
 
const shippingAddress = {
  address1: 'Chestnut Street 92',
  address2: 'Apartment 2',
  city: 'Louisville',
  company: null,
  country: 'United States',
  firstName: 'Bob',
  lastName: 'Norman',
  phone: '555-625-1199',
  province: 'Kentucky',
  zip: '40202'
};
 
   return client.checkout.updateShippingAddress(checkoutId, shippingAddress);
}

14. Completing a Checkout:

You can complete a checkout easily by using the weburl property that’s returned after checkout is created. Also, this URL redirects the customer to the online checkout of Shopify to complete the order. 

After you create a checkout, you will get the checkout webhook URL. 

The web checkout URL will be showcased using the app webview. 

Install react-native-webview

Let’s take an example:

Code Example-

<WebView source={{ uri: 'https://reactnative.dev/' }} />

Replace uri ‘https://reactnative.dev/’ with the checkout webhook url.

Wrapping Lines

We hope we have stated both ways of developing the Shopify mobile app using React Native Shopify Template and from scratch. 

While wrapping up, we hope you find it easy to develop a Shopify app using React Native. Still, if you have any confusion, you can hire a Shopify mobile app development company with a team of experts who can meet your business needs seamlessly.