In this article, we are going to walk you through how to make your brand new e-commerce mobile app template in Swift, by leveraging our flagship shopping app template for iOS. Our mission at iosapptemplates.com is to significantly reduce friction and cost for ecommerce mobile app development, by providing high-quality templates, with full source code.

While there’s no coding required to get the app up and running, you will need a few iOS development tools, such as Xcode and Cocoapods. In this tutorial, we are going to assume this is the first time you make an iOS app, so we provide links with detailed resources on each step.

If you are an iOS developer, you’ll probably skip most of the detailed steps, since it will feel like basic iOS knowledge. For people like you, we provide high-level guidance, to save you time.

Regardless of your expertize level, you’ll be able to navigate through the ecommerce mobile app development process since all is left to be done is the non-coding part, such as wiring your own Stripe & Firebase accounts.

Here’s an overview of the steps you need to follow to make your own e-commerce app:

• Install the Cocoapods dependencies
• Run the project in Xcode
• Link the project to your own Firebase account
• Add your own categories & products to your own Firebase database (Firestore)
• Link the project to your own Stripe account, to accept payments
• (Optional) Link to your own Apple Pay Merchant ID
• (Optional) Link your own Facebook developer app (for Facebook Login)
• (Optional) Customize the UI, such as colors, branding, fonts, icons, app icon, etc.
• Submit the app to the App Store

Without further ado, let’s jump right into it, by starting our ecommerce mobile app development process. Time to build your own shopping app.

1. Run the e-commerce app template in Xcode

If you’re an expert, you can just install the pods and open the .xcworkspace in Xcode. If you’re a newbie like many of us, follow our detailed tutorial on how to run an Xcode project that has 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. Link the Swift project to your own Firebase account

Again, if you’re an expert, you can just replace the GoogleService-Info.plist file with your own. You can download that file from your own Firebase Console after you added a new iOS app. Make sure the Bundle ID matches the bundle ID specified in the Xcode project. By default, you can use “io.instamobile.swift.Shopertino1“.

Follow this detailed guide for a step by step tutorial on how to add a new iOS app in Firebase and how to obtain the .plist configuration file.

(Optional) If you want to use your own bundle identifier (which we recommend, since submitting to the App Store requires unique bundle identifiers), you can change that in Xcode, under the General Settings tab of the Shopertino target:

Once you complete this step, you can run the Xcode project on the simulator or on your device (iPhone or iPad), to see your e-commerce app in action. Your current database is empty, so there won’t be any products or categories. But you’ll be able to register new users and edit their profiles. The users will show up in the “Authentication’ tab in Firebase console, as well as in the “users” table in Database -> Firestore.

3. Add Your E-commerce Categories & Products to Firebase Firestore

Now that your mobile app is running in Xcode and you’ve linked it to your own Firebase backend, you need to specify which products you want to sell within the app and what are their categories.

The products and categories are dynamically fetched from the Firebase Firestore database and displayed within the app. So you need to add all the data for products and categories to your Firebase account, such as title, names, image URLs, price, available colors & sizes, etc.

You have two options on how to populate your database:

1. Automatically –  Download these data seed files and import them in Firestore with a script. We recommend using this script, as that’s what we usually use, but any other script that uploads a JSON to Firestore should work. Once you have the data into Firestore, you can edit category & product names, photo URLs, prices, etc. to match your own data.
   We recommend using this method, since it’s faster – you already get all the fields, you only need to edit the names, photos and prices.
2. Manually – Simply look at the data structure & format of the tables below, and add all the data manually:

In Firebase Console, head over to Database -> Cloud Firestore and add a new collection called “shopertino_categories“. In this collection, add as many entries (categories) as you want, with auto-generated IDs, which will represent the categories. Follow this exact structure to specify your categories:

As you can see in the image above, we have 6 categories, and each category has 4 fields: color, id, name, and photo. Notice how the “id” field (in the third column) matches the auto-generated ID in the second column. Please make sure your IDs match as well.

Now that you have added all the categories, it’s time to add your products, which will be available for purchase in the app. Similarly, create a new collection named “shopertino_products“, which will contain all the products. For a given product, you need to specify the required fields:

• id: A unique identifier, matching the value from the second column (see picture below)
• name: The name of the product, which will be displayed everywhere in the app
• photo: The URL to the main photo of the product
• price: The price, which should be a number (so don’t add the currency).
• category: this is the ID of the category where the product lives in. You can this ID from the Firebase categories table you created before.
• colors: This is an array of all the colors that this product comes with. The colors are provided in the HEX format. This field is optional, so if the color concept doesn’t apply to your product, don’t add the field.
• sizes: This is an array of all the sizes that this product comes in. This field is optional, so if the size concept doesn’t apply to your product, don’t add the field.
• description: the description of the e-commerce product
• details: this is an array containing all the photo URLs

Important: Make sure all the field names are exactly as described below. Any typo will cause bugs in the app.

Add a few products and run your app. The home screen will display only the categories on top, and if you go to the “Shop” page, you’ll be able to see all the categories there as well. Tap on a category, and you’ll see all the products in that category.

To display the products on the home screen, you need to specify the correct category IDs for the main 3 product sections: the main carousel, the featured carousel, and the grid view. Open ShopertinoDataSourceProvider.swift, and replace the three category IDs with your own:

Now run your app again, and you should see absolutely all the screens and units that are advertised on our shopping app product page. Play around with the app, add a few products to the shopping bag. Place an order, with a test credit card: 4242 4242 4242 4242, any future date and any CVC.

Congratulations! You’ve just completed the ecommerce mobile app development process, by making your own shopping app.

4. Link Your Own Stripe Account to Accept Payments

Now that you have a fully working app, integrated with your own Firebase server, it’s time to update the payment details as well. By default, our e-commerce app template uses our test Stripe account to process payments. You can place orders, but all the money will go to our test account, which is not something you want for your shopping app on the App Store.

If you’re not already familiar with it, Stripe is an online payment processor for Internet businesses. They have an amazing SDK, that works well with native iOS apps. Alternatively, you can use PayPal or Braintree, but our app template doesn’t support them at the moment (if you really want something else, just let us know and we’ll prioritize it accordingly).

So head over to Stripe and create a free account and a new app associated with it. Once you have your own Stripe dashboard, go to Developers -> API Keys to find two keys: publishable key and secret key.

In order to accept payments with Stripe, you need your own secure server for processing payment requests. Fortunately, you can build this for free and within a few minutes, with Heroku. Create a free Heroku account if you don’t have one already. Then go to this Github repo, and Press on the “Deploy to Heroku” button:

Fill in the form, with any name you want, and your API Secret key, from the Stripe dashboard. The press “Deploy app“:

This will deploy your own payment processing server, with a Heroku app URL, similar with “https://apptemplatesios.herokuapp.com“.

In the template, open Core/Stripe/CheckoutViewController.swift file and replace the API Key & Heroku URL with your own:

Now run the app again, and make a payment, with the test credit card. Once successful, the transaction will show up in the Stripe Dashboard, under Developers -> Logs.

Congratulations. Now your customers can pay you directly, via Stripe SDK.

5. Enable Apple Pay with Stripe

To enable Apple Pay, you need to create an Apple Merchant ID first, on Apple’s Developer Portal. Once you have a Merchant ID, you can download a certificate generated by Apple and upload it to your Stripe dashboard. Follow these detailed instructions to enable Apple Pay with Stripe.

Once you have uploaded the Apple Pay certificate to Stripe, go to Core/Stripe/CheckoutViewController.swift and update the appleMerchantID value with your own Apple Merchant ID.

6. Enable Facebook Login

By default, our e-commerce app template uses one of our own Facebook Developer apps, for the Facebook Login feature. If you’re looking to submit the purchased app template to the App Store, you’ll want to make the switch to your own Facebook account.

Head over to Facebook Developers Portal, and create an iOS app, if you don’t have one already. Once created, you’ll get a Facebook App ID, that looks like this: 285315185217069.

Open Shopertino/Info.plist file (in Xcode: Right-click -> Open as Source code) and replace our existing Facebook ID (285315185217069) with your own. Boom, you’re done. Now your users with Login with your own Facebook app.

7. Making Further Customizations

In the ecommerce mobile app development process, you want your app to be unique and align with your brand. That’s why we built this app template to be highly customizable. Our code is well-organized to make changes simple and efficient. Even changing the backend entirely, from Firebase to Shopify or WooCommerce only requires a couple of methods and can be done effortlessly.

In this section, we are going to discuss a few common customizations. If there’s anything missing, just let us know and we’ll be able to provide you with guidance on how to achieve certain things.

7.1. How to Customize the App UI Theme?

In order to adapt the e-commerce app template to your own brand, our app template allows you to customize colors, fonts, and icons seamlessly. Open ShopertinoUIConfiguration.swift and modify its UI parameters as you wish.

7.2. How to Change the Walkthrough Screens?

Take a look at ShopertinoDataSourceProvider.swift. It has several configuration data, such as the names of the Firebase tables, the walkthrough screens, the login & registration view models, and the home screen categories.

To customize the walkthrough screens, you only need to edit the “walkthrough” array. You can add new screens, remove existing screens or edit anything you want.

7.3. How to Disable Firebase Backend or Stripe?

If you don’t want to use Firebase as backend, you can simply turn off a boolean flag and you’re done. Same goes for turning off Stripe. Open ShopertinoServerConfig.swift file and tweak the flags:

Note: If you turn off the Firebase database, the app will display mock products and categories, hardcoded in Shopertino/MockStore.swift.

Note: If you only turn off Stripe, the payments won’t happen anymore, but the orders will still go through, into the “shopertino_orders” Firestore collection.

7.4. How do I Customize the Menu Items?

The menu items are being set in ShopertinoHostViewController.swift. By changing the menuItems array, you get full control on menu customizations. You can change the order, the fonts & copy, add/remove items, etc.

7.5. How to Change the Launch Screen?

In iOS development (and implicitly in ecommerce mobile app development), the launch screen (also known as the splash screen) is managed by a storyboard. Click on LaunchScreen.storyboard and start editing the UI elements using Xcode’s Interface Builder.

These are the most important Ecommerce mobile app development steps to follow in order to have your own shopping app ready to be published to the App Store. If you encounter any setup issues, please contact us. We’re here to help!