How to Create a Shopify App

BTown Web was reviewing a design mockup for a product detail page from a client and we saw that they were looking for tabbed content. With a strong WordPress and PHP background we assumed that Shopify would allow us to create tabs quite easily. We started looking around the Shopify app ecosystem to see if there was an app that allowed us to do this. Unable to find anything that would achieve the functionality that our client wanted, we decided to create our very first Shopify app.

Why Would You Need to Build a Shopify App?

There is a huge Shopify app ecosystem and for many of the problems you want to solve, there will be a readily available public app that works for your store. However you may learn that not all public apps will be perfectly designed to meet 100% of your custom needs. For example we had a client approach us about connecting more than one Shopify store to their one instance of Quickbooks online. Easy problem right? You’d think you could install a Quickbooks Online app in each of the stores and connect them to Quickbooks no problem. Well the short answer is no you can’t do that because the official Shopify developed Quickbooks app only allows one store connection (ever) so this approach won’t work. We ended up creating a partial workaround solution for the client using ShipStation, but it didn’t fully address their problem. Creating an app for the client would have been the ideal solution to fully solve their integration issue.

Plan out your Shopify App

The very first thing you need to do is create a plan for what the app does, how it looks, etc and that will take time to do it right. Use whatever comes naturally, some clients use KeyNote (for Macs), other’s create PDF’s and others jot notes on a piece of paper. Conceptually you will need to know what you want the app to accomplish and then you can set out building it. Our client wanted to create tabbed content and here is the app in our client’s store:

If you look under the picture of the EV charger you will see the “Features”, “Specifications” and “Downloads” tabs that we created for this product. Those 3 tabs are all powered by the Shopify app.

Mock up the Admin Look

Now that you know what your app does and how it should look in your store, you need to design the admin interface in the Shopify dashboard. For the app we created there was a simple interface, the first page you see when clicking on the app is the list of products that are currently in your store:

 

 

Here you can edit products and once you click on a product you get taken to the page where you can create the content and add each of the tabs (per product).

 

 

Do your Homework

Shopify has tons and tons of documentation about creating apps (almost too much!) and it will take some time to sort the proverbial wheat from the chaff. We found these 3 pages to be the most effective in setting up our first Shopify app along with some hunting through the forums for clarification.

Understand the Shopify API

Shopify’s API uses JSON for both private and public apps. The Shopify app that you build will use the Shopify API to gain access to the store’s data, in essence the app is giving you permission the call that data from the store.

You are going to need to use an authentication mechanism to install your app, Shopify uses OAuth 2.0 as the main authentication process.

What to Watch for When Creating Your Shopify App

Confusion over URLs for the app: In the app’s settings, the note under the App URL says “When a merchant clicks on the app banner from their store admin, we will redirect them to this URL”.  In practice, that URL is actually used for both loading the app after it’s installed in a store and running the installation itself when a user clicks the GET button in the app store.

How to Embed Your App in the Shopify Dashboard

A design choice has to be made when building a Shopify app. Apps can either be accessed directly, or embedded into the Shopify dashboard. When you use the Embedded App SDK, it displays your app right in the dashboard, and lets you put your own menus and buttons in the top bar, like Shopify uses on its own pages. Since it’s embedded into Shopify it’s a more consistent user experience, and they don’t have to log in to a separate service, since authentication is handled automatically between Shopify and the app.

Shopify Styling

To save yourself some time consider using the Uptown CSS framework to match Shopify’s styles without having to recreate it on your own. Might as well leverage the work they have done!

Hopefully that helps you get started building out your private Shopify app, any questions don’t hesitate to contact us!