In this tutorial, we are describing step by step how to run our WooCommerce App Template in order to launch your own WooCommerce Native app for your WordPress e-commerce store today. Our app template is written in Swift, which is the iOS programming language of choice. It automatically connects to any WooCommerce store, listing products, categories, and taking orders, which will show up in your WooCommerce dashboard.

On a high-level, here are the steps that we need to follow in order to get the app ready:

1. Run the iOS app template in Xcode
2. Modify the URL to point to your WooCommerce website
3. Enable Firebase Auth to manage your mobile customers
4. Set up your own Stripe accounts to accept payments
5. (Optional) Customize colors, branding elements, featured categories, etc.
6. Submit your app to the App Store

1. Run the iOS app template in Xcode

If you’re an expert, you can just install the pods and open the .xcworkspace in Xcode. Otherwise, you can follow our detailed tutorial on how to run an Xcode project that has its dependencies managed via Cocoapods.

The main pod dependencies that we are using in this iOS shopping app template are:

• Facebook SDK – used for Login and Sign Up with Facebook
• Firebase – used for Firebase Auth, Firestore and Notifications
• Stripe – for Stripe Payments integration
• Alamofire – used for networking
• Kingfisher – for performant image download management

2. Modify the URL to point to your WooCommerce website

Now that you were able to successfully run the Swift project, you probably have noticed that it points to our default WooCommerce Store (Instakotlin.com). In order to make it point to your store, you’ll need your store URL as well as two API Keys.

Open your Admin Dashboard in WordPress, go to WooCommerce -> Settings -> Advanced -> REST API -> Add Key. Choose “Read/Write” for the permissions.

This will generate two API keys: consumer public and consumer secret.

In Xcode, open the ShopertinoServerConfig.swift file and update the three WooCommerce variables with your own store link and API keys:

Now run the app again in Xcode, and you’ll be able to see that the WooCommerce native app template is successfully hooked to your online storefront. Play around with it, by placing an order and the checking that the order shows up in our WooCommerce dashboard.

3. Enable Firebase Auth to manage your mobile customers

You’ll notice that in order to use the app, users need to log in or register first. The app template is using Firebase for user management (login, registration, forgot password, SMS auth, etc.). By default, the app is using our default test Firebase account. You’ll need to switch it to your own Firebase account, so that your customers register on your Firebase Console.

If you already have a Firebase app, simply replace the GoogleService-Info.plist file with your own. Re-run the app, and you’re done.

If you don’t have a Firebase app yet, follow these detailed instructions on how to hook up your Firebase project with the iOS app.

Create a few user accounts, and make sure they show up in Firebase -> Auth and Firebase -> Database -> Firestore, under the “users” table.

4. Set up your own Stripe accounts to accept payments

Accepting payments in iOS apps is pretty straightforward with our template. You’ll need a Stripe account though, since it’s our preferred payment processor.

Follow step 4. from this tutorial in order to set up Stripe for your WooCommerce native app.

5. Custom Modifications

The source code for our WooCommerce native app is highly modularized, to make it extremely easy for our customers to make further modifications. In fact, things like strings, colors and assets can be changed even by someone with zero coding experience.

To change the theme colors, simply modify the ShopertinoUIConfiguration.swift file as you wish.

Another important file is ShopertinoDataSourceProvider.swift, where you can modify the walkthrough onboarding screens, registration & login screens, as well as what are the categories features on the home screen:

To change the AppIcon (logo) of the app, you can simply open Assets.xcassets folder in Xcode, and override the icon variants for AppIcon.

If you are trying to make further modifications and get stuck, we are happy to help you out. Please contact us if you hit any roadblock in your journey of shipping this WooCommerce native app to the App Store. Cheers!