Turn any Shopify store into an iOS app

TThere here has always been something interesting about selling t-shirts to university students. Screen print 50 t-shirts, set up out of the back of your car in the main courtyard, sell them for $20, and don’t get caught. What could be better than that?

What if you could sell them through an app? Better than that - what if you could sell all of the universities branded merchandise through an app? This was the basis for one of the most interesting and challenging projects I worked on.

I began playing around with Shopify’s API a few months earlier and it seemed extremely capable and exactly suited for my needs. In fact - one of the most exciting parts of this idea was its ability to scale beyond custom apps that I would create - it could be built in a way that anyone with a Shopify store could quickly and seamlessly turn their web store into a mobile app.




What also excited me was the fact that this idea wasn’t entirely new or innovative by any stretch of the imagination. There were plenty of apps and resources available that I could research and validate before applying myself fully.

I began by downloading the Zara app, OVO store app, the Supreme app, Apple store, H&M, and many more. These seemed to be the most polished and useful apps on the market. At the time this wasn’t really saying much - for example Zara’s was just a web view with a few native overrides. OVO was poorly polished but worked with a shopify backend.



I also took a look at the offerings from the Shopify app store. Tapcart seems to be the only noteworthy app offering a simple and intuitive interface for turning your existing Shopify store into a mobile app. They also currently have over 7000 customers - and lead the niche by far. At the time they struggled with poor design but have come a long way and offer a great product. I couldn’t any of these apps for this idea because they didn’t offer the relatively extensive but important features such as checking out with Apple Pay, storing an address, or editing orders - let alone any app layouts with a modicum of good design acumen.

After designing and testing a few t-shirt and sweatshirt designs (not the focus of this blog post) I inputted them into the Shopify store system, set up the customary server/app/database workspace and began looking into the Shopify documentation. Shopify was just in the midst of porting all of their API’s to a the new GraphQL interface. A bold and slightly questionable move, but once they made their decision they went all the way. I wasn’t going to play around with a beta API at the time and decided it was a better use of my time to work with their REST API which I predicted would be around for a long time.

Main Parts of the App

Home: Using the Apple mobile store as a north star for this project I had originally wanted to create a custom scrollview that would advertise the products being sold with the use of bold text and nice pictures - however this ended up being unfeasible as this route wouldn't scale without a strong marketing team at each Shopify store. I opted for a simple collection view that displayed top products, top categories, favourites, and recommended items.

Browse: The browse view was also a relatively simple collection of collection views. The main work I did was on the paging scrollview with titles that added a nice native feel and look to the app while giving the added feature of collection batching - something that isn’t really a problem on web but is important in a mobile app context. Shopify already had a search query endpoint and it was just a matter of matching the request from the search bar to shopify’s servers and updating the collection view.

Product View: Again, this was a design heavy portion of the app where user experience was the most important. The result was extremely elegant and functional.

Account: Profile, Addresses, Payment Methods, Orders, Subscriptions, Favourites, Perks, Share Codes

Bag: Editing CollectionView, Cart total, One click checkout The Apple store checkout page provided the inspiration for this design - implementing it was just a matter of setting up the proper provisioning profiles for Apple Pay, displaying the universal cart items - their prices and quantity - and displaying the cart total. Should the user decide to use Apple Pay to checkout - then the infrastructure was already taken care of by Apple and Shopify - a nice caveat of working with public companies API’s.



Checkout/Payment: Address Selection/Input, Shipping, Shipping Costs, Payment Method Should the user not want to use Apple Pay I had to create all the sub-systems that would support manual payments. Some of the variables that were taken into account are things like guest accounts vs user accounts, address verification and saving, shipping cost estimation (shopify offers an api for this already), and payment method saving/updating. I decided to use a Stripe integration which granted me the additional features of being able to add subscriptions (for monthly subscription boxes) and pre-made input and privacy screens. All I had to do was coordinate the Stripe user to the Shopify account. Obviously it was a lot more arduous an undertaking than that but in theory that was all it took.

This ecosystem ended up being a very complex undertaking - and I’m extremely proud of the hard work it took to create this platform. It was amazing to extend the functionality of the app to include any Shopify store with the confidence that the entire ecosystem would work under the stress of customers.