DEV Community

Cover image for Building a Shopify App from Scratch
Pixel Mosaic
Pixel Mosaic

Posted on

Building a Shopify App from Scratch

#ai #productivity #programming #webdev

If you're a web developer looking to extend Shopify beyond themes and templates, building a custom Shopify app is one of the most valuable skills you can learn. Shopify apps allow merchants to automate workflows, integrate third-party services, customise the admin experience, and create entirely new functionality.

In this guide, we'll walk through the architecture, setup, and development process of building your first Shopify app.

What is a Shopify App?

A Shopify app is software that interacts with Shopify stores through the Shopify Admin API, Storefront API, or webhooks.

Apps can be:

  • Public Apps – Distributed through the Shopify App Store.
  • Custom Apps – Built for a single merchant.
  • Private/Internal Apps – Used within your own organisation (legacy use cases).

Most agencies and SaaS companies build custom or public apps.

Tech Stack

A modern Shopify app typically uses:

  • Node.js
  • React
  • Remix or Next.js
  • Shopify App Bridge
  • Polaris Design System
  • Prisma ORM
  • PostgreSQL
  • Shopify Admin GraphQL API

Although Ruby and PHP are still supported, Shopify now recommends modern JavaScript frameworks.

Prerequisites

Before starting, you'll need:

  • A Shopify Partner account
  • A development store
  • Node.js (latest LTS)
  • Git
  • Shopify CLI

Install Shopify CLI:

npm install -g @shopify/cli @shopify/app
Enter fullscreen mode Exit fullscreen mode

Verify installation:

shopify version
Enter fullscreen mode Exit fullscreen mode

Creating the App

Generate a new application using Shopify CLI.

shopify app init
Enter fullscreen mode Exit fullscreen mode

Select:

  • Remix
  • JavaScript or TypeScript
  • Embedded App

Then install dependencies:

npm install
Enter fullscreen mode Exit fullscreen mode

Run the development server:

shopify app dev
Enter fullscreen mode Exit fullscreen mode

The CLI automatically creates secure tunnels for local development.

Understanding the Folder Structure

A typical project looks like this:

app/
routes/
components/
shopify.server.js
package.json
prisma/
public/
Enter fullscreen mode Exit fullscreen mode

The important folders are:

  • routes/ → App pages
  • components/ → React components
  • prisma/ → Database schema
  • shopify.server.js → Authentication and API setup

Authentication

Every embedded app must authenticate merchants using OAuth.

Shopify CLI configures this automatically.

Example:

await authenticate.admin(request);
Enter fullscreen mode Exit fullscreen mode

Once authenticated, your app receives an Admin API client.

Calling the Shopify GraphQL API

Fetching products:

const response = await admin.graphql(`
{
  products(first:5){
    edges{
      node{
        id
        title
      }
    }
  }
}
`);
Enter fullscreen mode Exit fullscreen mode

GraphQL is significantly faster than making multiple REST API requests.

Using Polaris Components

Shopify recommends Polaris for consistent UI.

Example:

<Card>
  <Text variant="headingLg">
    Dashboard
  </Text>
</Card>
Enter fullscreen mode Exit fullscreen mode

Benefits include:

  • Accessibility
  • Native Shopify appearance
  • Responsive layouts
  • Faster development

Handling Webhooks

Webhooks notify your app whenever something changes.

Examples:

  • Product Created
  • Order Paid
  • Customer Updated
  • Inventory Changed

Webhook registration:

await shopify.registerWebhooks();
Enter fullscreen mode Exit fullscreen mode

Example handler:

export async function action({ request }) {
   const payload = await request.json();

   console.log(payload);

   return new Response();
}
Enter fullscreen mode Exit fullscreen mode

Storing Data

Most apps need their own database.

Popular choices:

  • PostgreSQL
  • MySQL
  • PlanetScale
  • Supabase

Prisma is an excellent ORM for Shopify apps.

Example schema:

model Store {

  id String @id

  shop String

  accessToken String
}
Enter fullscreen mode Exit fullscreen mode

Building Admin Features

Useful features include:

  • Product synchronisation
  • Bulk editing
  • Analytics dashboards
  • Customer segmentation
  • Inventory automation
  • Marketing integrations

Each feature interacts with Shopify APIs.

App Bridge

App Bridge lets embedded apps behave like native Shopify admin pages.

Features include:

  • Toast notifications
  • Navigation
  • Loading indicators
  • Resource picker
  • Modal windows

Example:

shopify.toast.show("Saved successfully");
Enter fullscreen mode Exit fullscreen mode

Deployment

Popular hosting platforms:

  • Vercel
  • Railway
  • Fly.io
  • Render
  • DigitalOcean

You'll also need:

  • HTTPS
  • Environment variables
  • Database hosting

Common Beginner Mistakes

Ignoring API rate limits

Always batch requests and use GraphQL efficiently.

Not validating webhooks

Verify webhook signatures before processing requests.

Storing sensitive data insecurely

Never expose access tokens in frontend code.

Overusing REST APIs

Prefer GraphQL whenever possible.

Forgetting webhook retries

Shopify retries failed webhooks. Your endpoints should be idempotent.

Best Practices

  • Use TypeScript.
  • Keep business logic separate from routes.
  • Cache expensive API calls.
  • Log webhook failures.
  • Use background jobs for long-running tasks.
  • Test with multiple development stores.
  • Follow Shopify's API versioning schedule.

Final Thoughts

Building Shopify apps is much more than writing API calls. A well-designed app combines secure authentication, efficient GraphQL queries, responsive interfaces, webhook-driven automation, and scalable infrastructure.

Whether you're creating internal tools for clients or launching a SaaS product on the Shopify App Store, mastering Shopify app development opens the door to a thriving ecosystem with millions of merchants worldwide.

Start with a small feature, iterate based on merchant feedback, and focus on solving real business problems. Great Shopify apps aren't defined by the number of features—they're defined by the value they deliver.

Happy coding!

Top comments (0)