Turning any Shopify Store into a mobile native app is extremely easy with your gorgeous React Native Shopify template. In this article, we are going to describe in details, each step that’s required to get the app template integrated with your own Shopify online storefront.
On a high-level, here’s an overview of what you need to do in order to have your app ready to be published to App Store (iOS) and Google Play Store (Android):
- Set up a free Firebase Account (used for secure Customer authentication)
- Link your Shopify store to the downloaded app template (by changing two API Keys)
- Create & link your own Stripe account (used for mobile payments, including Credit Cards, Apple Pay and Android Pay)
- Run the app on Android
- Run the app on iOS
- (Optional) Configure Push Notifications permissions with Apple
None of the steps above require any coding experience. Everything is fully explained in details, in order to help non-coders convert their Shopify store into a mobile app without difficulties.
1. Set up a free Firebase Account & link it to the app template
In order to manage customer accounts created via the mobile app, we need to set up Firebase, that takes care of all the security aspects of the authentication & registration process. Simply head over to Firebase, create an account, a project and two apps within that project – one for iOS, one for Android.
- Create an iOS and an Android project in Firebase
- Enable Firebase Authentication, Firebase Storage, and Firestore
- Set the write and read rules of Cloud Firestore to public
- Download and override the configuration files (GoogleService-Info.plist for iOS and google-service.json for Android) in ios/Shopertino and android/app folders.
Here’s a detailed tutorial on how to achieve all these steps, in case you never did this before.
2. Link your own Shopify store
This is the most important step of setting up the mobile app to convert your Shopify store into a native e-commerce mobile app. In this step, you need to link your Shopify website to the React Native app template, so that your categories & products get displayed within the app. To achieve this, you need to do a couple of different things.
3.1 Generate an access token for your Shopify storefront
You will need an access token to access your Shopify store from your new mobile app. Generating an access token for your Shopify storefront can be simplified into three simple steps:
1. Login to your Shopify admin dashboard of the store you want to connect.
2. Create an App in Shopify to serve as a middleware by filling a simple short form.
3. Copy the generated storefront access token after successfully creating an App.
To achieve these simple steps, follow the detailed steps bellow:
3.1.1 From your Shopify admin dashboard, at the left menu list, go to Apps.
3.1.2 Click Manage private apps, near the bottom of the page.
3.1.3 Click Create a new private app.
3.1.4 In the App Details section, enter a name for the private app and a contact email address. (Shopify uses the email address to contact the developer if there is an issue with the private app, such as when an API change might break it).
3.1.5 In the Admin API section, select the areas of your store that you want the app to be able to access.
3.1.6 Make sure you select **ALLOW** app to access your Storefront data.
3.1.7 In the Storefront API permissions section, select which types of data you want to expose to the app.
3.1.8 Now click Save, and your storefront access token will be created.
After your access token has been created successfully, you will be routed to a page with different sections:
- App Details.
- Admin API.
- Storefront API.
Scroll to the bottom to see and copy the newly created Storefront access token. Copy this token to your clipboard.
3.2 Update the Storefront Token & Shopify Store URL in the React Native code
Now that you have a storefront token, we need to add it into the app. Simply open the src/constant.js file and override the Shopify configuration with your own store data:
4. Running on Android
All you need to do to run our app templates on Android, is simply open an Android emulator (or plug in a device) and run
npm install && react-native run-android
If this is the first time you are running an app, check out our detailed tutorial on how to run React Native apps on Android, which includes dev environment setup too.
5. Running on iOS
Make sure you installed the npm packages first (“npm install“). Most of our React Native templates use advanced npm packages, such as Firebase or Facebook SDKs, which need to be linked – that’s to say the app is ejected, which means it doesn’t work with Expo nor can it simply be run by executing “react-native run-ios“.
To run apps on iOS, you need a MacOS computer. Unfortunately, for Windows users, you’ll have to either get an Apple computer, or install a virtual machine on your laptop.
Open up your Terminal in the project’s directory, and switch to the ios subfolder to install the pods by executing:
cd ios && pod install
This will install all the dependencies our iOS mobile app template relies on. Your output should look like this:
Now, under the ios folder, there’s a file named Shopertino.xcworkspace. Open it in Xcode, and then run the app, by first choosing which device or simulator you want
This would open up a metro bundler instance automatically. If it doesn’t start, simply run “npm start” in the Terminal to open it, and only after that, run the app in Xcode again. If you’re running into any other issues, you can debug them by using our React Native Errors documentation.
5. Set up Stripe Payments
To accept payments in your newly created e-commerce app, for both iOS and Android, you need a payment processor. At Instamobile, our favorite payment processor is Stripe, which is why we integrated it in all of our app templates.
First of all, create a Stripe account. This will give you two API keys – a publishable key and a secret key.
- Open “src/constant.js” and update it with your Stripe publishable key.
- Open “stripeServer/.env” and update it with your Stripe secret key
To actually accept payments, you also need a server to process credit card & payment information from your customers securely. Follow our comprehensive step-by-step documentation on how to integrate Stripe in React Native apps.