How To Build A Shopify App

・7 min read
How To Build A Shopify App

Shopify is one of the best eCommerce solution and definitely the most popular one.

That is why it is not a surprise that when you first start researching how to create a Shopify application you can stumble across many articles, videos and tutorials. Each of them has a unique way to approach the development, which might get confusing.

This article will focus on one of the methods I personally find to be the easiest, but feel free to experiment with other ones.

However, before we begin, we should explain what is a Shopify app exactly…

What is a Shopify App

You may think that a Shopify app is native to the Shopify platform and is written it its own language, just like desktop or smartphone applications.

However, a Shopify app is nothing more than a web application that connects to a Shopify store.

Once you let that sink in, you will realize that it is just like any other web app and can be written in several different languages across different stacks. The main difference between a Shopify app and a regular web app is that you use Shopify’s admin API.

There are three important points to keep in mind while developing the first Shopify app:

  1. it must be authorised by a store - before your app can be categorized as a Shopify app it needs to be registered and authorised via the partner account. This process provides you with an API key and API secret key to include in the app for authorisation. For this step, you will need a public address for your app.
  2. it must be hosted somewhere - some may think that having a Shopify Partner account means that Shopify will host the app for you, but that is not the case. You will need a public address which has to be submitted to Shopify via the interface mentioned above.
  3. it must use a Shopify API - you have to use the right Shopify API, which will usually be the Admin API. It allows to write and read data from your store and provides an interface to all the functions. There also is Storefront API, which provides access to data that is publicly available to your storefront.

Why build a Shopify app

The answer to this question is quite straightforward: with the e-commerce market constantly growing developing an application using a fast-growing platform like Shopify will help you respond to the market demand for extending platform possibilities. A Shopify app will allow you to sell your products on multiple channels, give you a great site performance and boost sales in general. Apart from that, using Shopify means your store will support over 100 payments processors and can be integrated with Shopify POS.

If you want to read more about the pros (and cons) of building a Shopify application, go to the article on our blog.

Before you begin

In this article, we will mostly focus on building the Shopify app using Node.js. Before you start developing your application there are a few requirements that you need to meet. First of all, you should have Node.js version 10 or higher installed.

The second step is to be a Shopify Partner. You can sign up using this link.

The last thing to consider before starting your project is creating a development store.

How to create a development store

Development stores include most of the features available on the Advanced Shopify plan. When building and testing a development store you can process an unlimited number of test orders, create up to 10 private apps, create an unlimited number of unique products and assign a custom domain. However, you should keep in mind that you will not be able to install paid applications or process orders through an active payment provider unless you switch to a paid plan.

Generally speaking, there are 2 types of development stores: one for when you are testing an app or theme that is being developed and one when you are building a Shopify store on behalf on a client.

To create a development store for testing apps you have to:

  1. Log in to your Partner Dashboard
  2. Go to Stores
  3. Add store
  4. Choose Development store in the Store type section
  5. Enter all the valid information in the Login information section
  6. Enter the Store address
  7. Save!

To create a development store for a client you should:

  1. Log in to your Partner Dashboard
  2. Go to Stores
  3. Add store
  4. Choose Development store in the Store type section
  5. Enter the valid information in the Login information section
  6. Enter the client’s Store address
  7. Choose Store purpose
  8. Save!

When you are done developing your stores you can archive them or give them to a client (in the case of a Shopify store built for a client).

Now you are finally ready to build your Shopify application! Let’s begin…

How to build a Shopify application

Generate app from CLI

Create a new app project using $ shopify create. You will be asked to choose what type of application you want to create: Node.js + React or Ruby. The CLI will also ask for app’s API key and API secret, which can be found in the Partner Dashboard.

Connect application to Shopify Dev Store

The process of connecting the application is simple. Going through the CLI messages, connect the created app to your Shopify Development store or create a new one (explained above).

Start a development server

Run $ shopify serve command in your app directory. This will start a local development server together with a public tunnel to the local development app. Note: the terminal will display the localhost and port where the app will be visible. It (the app) can be later installed on a development store from the Partner Dashboard. To do so, open the installation URL in the web browser with shopify open. It will be necessary to view and test your app in a live development store since some of the features are only available when the app is embedded in the Shopify admin.

Add / Edit pages in code.

If you are using Node.js instead of Ruby you should be familiar with Next.js in order to make / edit new pages.

Generate new app features with generate

It supports generating :

  • new pages $ shopify generate page PAGE_NAME,
  • new billing models and endpoints $ shopify generate billing
  • new webhooks $ shopify generate webhook WEBHOOK_NAME

You can add dummy data to your development store in order to test your application with shopify populate.

It will add 5 items, but you can change the number with --count eg. $ shopify populate products --count 10.

To update to the latest version, use $ shopify update.

Upload

When you are happy with the results you can upload your application (remember, it must be publicly shared). You will have to wait for the verification from Shopify Team and after that you can add it to the Shopify Site in the App Store Page.

Summary

As you can see, the development process is not too complicated nor time-consuming. If the explanation provided is not enough for you, here are two links worth checking out:

Of course, building the application is only the beginning of your adventure with Shopify. After you do so, you need to start thinking about marketing, customer service and further improvements.

If you crave more information about Shopify, visit our posts ‘Shopify pros and cons’, ‘Why use Shopify for your eCommerce business’ and ‘Headless Shopify - 25 amazing examples

And if you feel like it is too much for you, outsourcing your Shopify app development is a good way to go. Our experienced team would be happy to help, so feel free to reach out!

Related articles