Turn Or Convert Any Shopify Store to a Mobile App
Mobile apps offer a personalized shopping experience. All the product-related details and comparisons can be easily done online and offline.
In this article, we are going to describe in details, the simple steps required to turn any Shopify store to a mobile app using this Shopify template, built with React Native.
All you really need to do to have your app ready to be published to App Store(ios) or Google Play Store(Android) can be summarised to the steps below.
Generate necessary Shopify API keys.
Create a Stripe account
Link the created Stripe account.
Support Apple pay, Google pay and card payment
You should note that the listed steps above require no coding knowledge. Everything is fully explained in details and literally, anyone can apply and turn their Shopify store into a mobile app with ease.
Check out the template here
Generate necessary Shopify API keys; Storefront access token, API key and password.
To generate a Storefront access token, Login to the Shopify admin dashboard of your chosen store to connect
From the dashboard, at the left menu list, go to Apps.
You should find Manage private apps, at the bottom right of the page, click on it.
Click on Create a new private app.
Find the App Details section, input a name for the private app you are about to create and your 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).
Find the Admin API section, select the areas of your store you will like the app to have access to.
Make sure you tick "Allow this app to access your storefront data..." like in the picture below.
In the Storefront API permissions section, select which types of data you want to expose to the app.
Now click Save, and your storefront access token will be created.
After your Storefront access token has been created successfully, you will be routed to a page with different sections:
Locate the Admin API, section, where you will find the API key and password, note this, as you will need this later. Also, make sure read and write permissions are set for all bellow.
Also, Scroll to the bottom to locate the Storefront API section, note the Storefront access token you will find there.
Update the Shopify keys in the React Native code
Now, the noted keys should be used to update the config file on your project.
Open src/config.js file and paste the keys where specified.
You should note that details on getting started and linking stripe to your mobile app is added to the template folder.
Getting your mobile app to Run
First, make sure you have Node install.
We have chosen yarn to manage dependencies; since things are quite fast with yarn.
Install yarn here If you do not currently have it installed.
To install dependencies, run command:
Make sure you have metro bundler started on a different tab by running the command :
For Android - Running on a Device.
Visit here and click on the android tab to get a detailed description on how to run on an android device.
For IOS - Running on a Simulator
Make sure you have Xcode installed.
Navigate or Change directory to the iOS folder.
Come back to the project directory and
npx react-native run-ios