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.

If you're looking for custom Shopify development, you can reach out to our Shopify experts as well as search for Shopify specialists on freelance platforms.

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:

• Because of how authentication works, you’re more or less limited to the single-page application architecture (although partial workarounds are possible with the help of Turbolinks or Inertia.js).
• It might be efficient to use React for writing frontend as there are libraries provided by Shopify: Polaris UI library makes sure your UX is consistent with the rest of the Shopify admin and App Bridge acts as a frontend bridge that provides Shopify context data to your application running in the iframe. 

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. 

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. 

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.

‍

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

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.