How To Build a Shopify App From Scratch

The Shopify ecosystem comprises the Shopify Partner Program, merchants, and the Shopify App Store. The Shopify Partner Program, also known as Shopify Experts, is a network of approved designers, agencies, app developers, etc. A Shopify merchant has access to this Expert network.

The other side of the ecosystem is the Shopify App Store, stocked with thousands of cataloged apps that merchants can integrate into their stores. These Shopify apps are built by various developers, freelancers, large development companies, etc., and tailored to improve the Shopify experience for customers. 

The Shopify ecosystem connects merchants with these Partners and app developers to help enrich their stores and enhance the efficiency of their business.

In this article, you’ll learn about the Shopify app ecosystem, the steps to build a Shopify app, and how to monitor the app.

Understanding Shopify’s App Ecosystem

Source

Shopify’s e-commerce ecosystem makes it incredibly easy for anyone to start an online business. However, Shopify can’t build all functionalities or anticipate the requirements of every shop owner.

The Shopify app ecosystem fills this gap. It’s a platform where developers can build Shopify apps to offer further functionality.

You can create a Shopify app and connect it with one or more of the Shopify APIs, extending the ecosystem’s capabilities to the benefit of shop owners and customers.

App Types

There are two different levels of accessibility that your Shopify app can have, and they both can be created in the Shopify Partner Dashboard: 

Public apps: Apps are available to all merchants and can be listed in the Shopify App Store (see below). 

Custom apps: Apps made for a specific merchant and cannot be listed in the Shopify App Store. 

Note: Shopify also offered a Private apps option, but it has been discontinued since January 2022.

The Shopify App Store

Source

The Shopify App Store is the easiest way for users to find apps to increase the functionality of their online store. The app store is organized by categories and has a robust recommendation algorithm and search feature that helps to quickly find apps that match the merchant’s requirement.

However, unlisted apps such as custom-made applications will have limited visibility in the app store. Shopify App Store has a plethora of apps ranging in categories from fulfillment, up-selling and cross-selling, reviews, customer service, the conversion rate of optimization, SEO, and much more.

Tools and Resources To Consider for Shopify App Development

Polaris

Source

Polaris is Shopify’s design system that helps external and internal developers build and design apps. Developers can use this platform regardless of whether the app will operate outside or inside the Shopify admin. Polaris provides custom UI elements such as colors, icons, spacing, typography, and illustrations that developers can directly add to their app design. 

Polaris ensures your app fits seamlessly into a merchant’s store. You can review the Polaris documentation, covering everything from accessibility considerations, internationalization, design guidelines, and information architecture. It comes with React components, GraphQL API, and a Figma UI kit that helps developers to learn, design, and build apps for Shopify.

Shopify App APIs

Developers can choose between two technologies: REST and GraphQL, to fetch and manipulate data from another application. Shopify supports both APIs to optimize your app performance. Developers can not only decide the preferred programming language but can also choose which API they can use to build and integrate their app.

Steps To Build a Shopify App

Here are three things to keep in mind while developing the first Shopify app:

• Authorized by store: before your app can be listed on the Shopify app store, it needs to be registered and authorized by the partner account.
• Hosted somewhere: most developers assume that having a Shopify partner account implies that the company will host the app for you. However, that is not the case, and you have to submit a public address to Shopify. 
• Use a Shopify API: Shopify has Admin and Storefront APIs with specific functions. You have to use the right API. The former allows you to read and write data from the store, whereas the former provides access to publicly available data for your storefront. 

With these three points in mind, the following are the steps for building a Shopify app. To make it easier, we will build a command-line app to find repeat customers with the Customer API. The app will first tag repeat customers for easy identification in the Shopify admin panel. We’re also going to use Node.js for this Shopify app. However, you can use any language that supports HTTP REST calls. 

Choose a Tech Stack

Requirements:

You’ve created a Partner account and a test development store.

You understand the different types of apps you can build (public and custom).

You’ve installed the latest versions of Node.js and npm.

Do you remember we mentioned Shopify apps are self-hosted and that the APIs you need are programming language agnostic? This is why you will need to decide what tech stack you will use to develop the Shopify app. You can choose between JavaScript or Node.js because these are the two languages that the Shopify ecosystem supports the most. 

Authenticate Your App

Before starting the development process, you will have to ensure that you can successfully connect a Shopify store with your app. Shopify authentication can be tricky, but it’s a one-time setup. 

To authenticate your Shopify app, you’ll need

• A tunneling address to register in your Shopify partners account, and
• An API key and API secret key to submit in your request to authenticate

Build Your App

You have your first Shopify app!!

But wait, it doesn’t do anything yet. 

Now you need to write queries, routes, and mutations into your app. Inside the server folder, you will find four files: apiClient.js, routes.js, queries.js, and mutations.js. Bring in some store data and start writing your API queries and routes. 

Install Shopify CLI

Start by installing Shopify Command Line Interface (CLI) on your system. You can install Shopify CLI on macOS, Windows, or Linux. You can use your system’s command line to install Shopify CLI from a supported package manager. You will need Git and Ruby 2.7 or higher to run Shopify CLI.

You can run the following code by navigating to the home directory on your window’s terminal:

Next, you should verify that Shopify CLI has been properly installed by running the following command:

Create a New Project

We will use Shopify CLI to design a Node.js app so merchants can access it in Shopify admin. 

After installing Shopify CLI, you can now create a new project.

• Navigate to the directory
• Run shopify login to authenticate you with Shopify CLI.
• Run shopify app create node to scaffold a new Node.js app in a subdirectory. This will also create your app in the Partner Dashboard.

Source

Start a Local Development Server

After creating your app you should start a local development server. Run the following commands to start a local development server:

Authenticate with ngrok:

Start the server:

Source

Install Your App on Your Development Store

Open the URL that the terminal printed out in the previous step, and ensure that your server is still running. You’ll be prompted to install the app on your development store after opening the URL.

Submit Your App to the Shopify App Store

Once you have a functional app, it’s time to submit it to the Shopify App Store to go live, and merchants can benefit from it. However, you will have to get your app reviewed by the Shopify review team. The app review and approval steps are crucial since merchants rely on these apps to run their day-to-day business. 

Before submitting your app, ensure the following things:

• Your app meets Shopify’s app requirements.
• You have sufficient support documentation and app listing. Your docs should include screenshots, visuals, detailed descriptions, pricing details, privacy policy, FAQs, and support links that will help users who may struggle with technical terms.
• Your app has been tested and has test credentials.

The Shopify review team will ensure that your app’s core functionality, authentication, and billing API function correctly. Reviews will also check your app listing to ensure that the required minimum fields have been filled correctly. 

Monitoring Your Shopify App

Once your app has been approved, it will go live in the Shopify app store. However, ‌ consider the following steps before launching your app to ensure the health, security, performance, and speed of your app:

App Performance Management and Monitoring

Performance monitoring tools such as Datadog, Sentry, or Bugsnag monitor the stability of your app. These tools also make it easy to pinpoint errors in your application and provide solutions. Your app usage might spike during certain times, and you want to ensure no downtime, as it will damage the user experience. Apps performance with these tools helps you understand the underlying systems causing errors and how they will perform during surges. 

Encryption and Security

Ensuring data safety and code security is crucial to building a useful and scalable app. Developers will have to build firewalls in their apps to prevent data breaches. Data security is essential since apps sometimes require access to customers’ and merchants’ identifiable information. Regular security checks can help minimize risks, and adding two-factor authentication (2FA) or multifactor authentication (MFA) can protect both your customers’ data and your own. 

Developers should also adhere to General Data Protection Regulation (GDPR) if they are providing services to EU citizens. You can find all security requirements on Shopify’s Developer help docs.

API Versioning

Developers have to stay in the loop with Shopify updates and changes, so their app stays secure and up-to-date. Periodically check developer changelog, Partner Dashboard, and developer documentation to stay informed of upcoming changes. Shopify also has an API health report that shows any deprecated calls and the deadline for updating those calls in your app. 

Tracking Metrics

Within the AARRR framework, you can track the following business metrics:

• Total users visiting app listing and public website 
• Installs from the Shopify Partner Dashboard 
• Reviews on the app listing
• Conversion rate of Free trial users to paid users
• YoY revenue growth 
• Percentage of merchants who churned in a given period

Build E-Commerce Apps 10x Faster With Common Ninja

Time is money, and the less time you spend on building e-commerce apps, the more time you have to focus on app monetization, marketing and building your next great app.

One of the biggest issues for app developers out there is that to make their app available on other e-commerce platforms, they have to rebuild it, using different tools and adhering to the different requirements of every platform.

With Common Ninja, however, you don’t have to focus on Shopify or any one platform, for that matter. When you build apps with Common Ninja, you can easily integrate them with other e-commerce platforms and save yourself a ton of time. So why not give it a try?

Conclusion

Merchants often have to integrate some apps to increase the functionality of their online e-commerce stores. As you can see, the Shopify app development process is not complicated or time-consuming. You can check out the detailed documentation on Shopify and Github. Of course, building a Shopify application is only the beginning of your adventure with Shopify. You have to work on marketing, customer service, and updates.