Digismoothie brand logo
What is a Shopify application and how to build one

Michal Majsky

|

July 29, 2022

What is a Shopify application and how to build one

How are Shopify apps built and how is it different from web app development? What are the components of a typical Shopify app and what technologies are used for building one? Learn about this process and the tech stack we have at Digismoothie.

What is a Shopify application and how to build one

One of the questions we often get when talking to developers or engineering leaders about what we do is, what is a Shopify application exactly and what tools and technologies are needed to build one? Another frequently asked question is, Is it a problem if I have no experience with building Shopify apps?

Let’s answer these questions by elaborating on various technological aspects of Shopify application development.

How a Shopify app compares to a web app

Our perspective on this topic is that a Shopify application functions pretty much like a standard web application but is heavily connected with the Shopify platform via an API. This has several implications:

  • To build a Shopify app, you can use the same technologies as for web apps. You are not restricted to a specific technology (although using some specific technology can make your life easier—we will get back to that later).
  • Usually, you need to build both backend and frontend.
  • You are responsible for the hosting & operation of the application.
  • Once the application is approved by Shopify, the release process is also fully under your control. 

From the merchant perspective, we can say that Shopify is Software-as-a-Service (SaaS), as well as Shopify apps. It means that a merchant doesn’t need to interact with any type of code to install your application. 

Shopify application components

We identify three logical components that a Shopify application typically has:

  • Merchant admin
  • Webhook processing
  • Customer-facing application (storefront UI)

Out of these three, the last one is not necessarily required. It depends on the functionality that you want to provide to merchants. For instance, our app Candy Rack consists of all three components, while Loyal consists only of the first two parts.

Merchant admin

Merchant admin is a dashboard where a merchant sets up & configures the application. Shopify recommends serving the merchant admin within the Shopify interface (so-called embedded application). This means that you embed the app into the Shopify administration using iframe

Embedded applications come with several limitations:

Merchant admin is also the first touch point between your app and a merchant, and it is the place where the installation process is handled. Installation basically means obtaining the permissions to access the merchant’s store data via OAuth

It is also the part of the application where you deal with billing in case your application isn’t free. 

Merchant admin in the Shopify app Candy App
Merchant admin

Webhook processing

Webhooks are how Shopify informs your application about various events occurring in the stores where it’s installed: for example, new order creation or product update. You decide which events you’re going to subscribe to.

The business logic that needs to be executed based on the received event should be definitely handled by background workers. Otherwise, you can easily overload your application. You can also consider delegating event receiving outside of your application

Customer-facing application (storefront UI)

In case your application extends the Shopify Storefront (which means that it brings new features to store customers), you need to “insert” it into the front store. To do so, you need to tell Shopify via an API to inject your JavaScript resource into the front store. There are two most popular methods for that: Script Tag and App Embed block. There is also a possibility to extend the storefront theme directly with some visual components using App Blocks (also referred to as App sections).

Development of the customer-facing application might be the most challenging part of the whole process. Usually, you extend or even override the default behavior of the front store. When doing this, you need to make sure that it works on different Shopify themes, with various store settings, and in a way that it doesn’t break anything in an unpredicted situation. On top of this, there can always be other third-party applications interfering with your app. 

Front store UI is also where you should pay attention to the performance and size of your app. 

Customer-facing part of the Shopify app Candy Rack
Customer-facing part of a Shopify app

The evolution of Shopify app development

While I told you before that building a Shopify application is basically web application development, this statement is actually only partially true. In 2021, Shopify introduced the concept of checkout extensions. Before that, it wasn’t possible to extend the functionality of the checkout with a Shopify app. In this aspect, the developer experience is different compared to a web app as it happens in a very limited environment (e.g. you can use only a specified set of pre-prepared React components), and the build and release processes are handled by Shopify. 

It is possible that in the future, Shopify will move toward this approach in other areas to have more control over third-party applications. As a result, Shopify app development will shift further away from web app development.

Digismoothie tech stack

Let's see what are the technologies that we use at Digismoothie to build Shopify apps.

Backend

Core technologies:

  • Python
  • Django web framework
  • RQ or Celery
  • PostgreSQL
  • Redis

Sometimes, we also use:

  • Flask
  • FastAPI

Frontend

  • React (sometimes, we use Preact for customer-facing apps for performance reasons)
  • Tailwind + Styled components
  • React Query
  • Polaris UI

Backend-frontend communication

How we communicate depends on the use case and the product. The following technologies are part of our tech stack:

  • GraphQL
  • REST API
  • Web sockets
  • Inertia

Infrastructure

Our strategy here is to use managed solutions

  • Heroku
  • Vercel
  • Cloud Flare
  • AWS

You can learn more about the technologies we use in our knowledge base.

Typical architecture of Shopify applications by Digismoothie
Typical architecture of Shopify applications by Digismoothie

Conclusion

I hope you’ve learned what it means to build a Shopify application from a technical perspective and what technologies can be used. 

Finally, let’s get back to the question asked at the beginning. Is it a problem for an engineer with a background in web development to join a team that works on Shopify applications? I would say definitely not. If an engineer has a good understanding of concepts & technologies used in modern web application development, they can jump in very quickly. Knowledge of Shopify ecosystems and APIs will come along step by step. 

Michal Majsky

Michal is an engineer with expertise in web applications, APIs, and backend development. At Digismoothie, he’s responsible for the engineering team. He’s also a big fan of the remote & async approach to work.

Latest articles

All articles

stop leaving money on the table

Boost your Shopify business with our apps

All our apps are designed to help you grow your Shopify business. Check them out and take advantage of the free trial period.

Boost my Shopify