In order to convert your Shopify store into a mobile app for iOS in Swift, we are going to leverage our complete iOS Shopify App Template. In this tutorial, we are taking a detailed look into what are the exact steps to launch a native mobile app for any Shopify store to the App Store.
On a high-level, here are the steps that you need to follow to get your app out into the wild:
- Run the app template in Xcode
- Link your own Firebase account
- Link your own Shopify store
- Set up Stripe dashboard to accept payments
- (Optional) Customize the branding, colors, assets, etc.
- Submit your app to the App Store
1. Run the Shopify App Template in Xcode
Once you downloaded our iOS app template, you need to run the app locally, on your laptop or computer. In order to do that, you need to install the pods (with CocoaPods) and then run the app in Xcode.
For a detailed guide on how to run Xcode projects, check out our specific documentation.
2. Link your own Firebase account
Our Shopify app template uses Firebase for customer account management – registration, login, Facebook Login, etc. Firebase is a secure and scalable backend service provided by Google, for free.
You need to create a free Firebase account, set up a new project in it, and then download the Google configuration file and place it in the iOS project.
Follow this detailed tutorial on how to link your Firebase account to the downloaded iOS app template.
3. Link your own Shopify store
This is the most important step of setting up the iOS 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 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 Xcode
In Xcode, open ShopertinoServerConfig.swift file and paste the Storefront token from the previous step as the shopifyAPIKey field. You should also update the shopifyShopDomain to your Shopify website URL:
That’s it. Run the app again in Xcode. It should be displaying your own Shopify collections and products. Yay!