Shopify App Development: Build Your First App in 2026

Why Build Shopify Apps in 2026

Shopify powers over 4 million active stores, and 87% of those merchants use apps to run their businesses. The average store installs six apps. That creates a massive, growing market — and Shopify app developers have collectively earned over $1.5 billion through the App Store, with top developers pulling in $167,000+ annually.

Shopify app development isn't just for agencies. Solo developers, freelancers, and small teams are building profitable apps that solve specific merchant problems. The ecosystem now includes over 11,000 apps from 7,000+ vendors, but the best opportunities aren't in building another generic SEO tool — they're in solving niche pain points that existing apps ignore.

This guide takes you from zero to a working Shopify app, covering the modern stack (Remix, Polaris, App Bridge), the APIs, and what it takes to get listed on the Shopify App Store. Whether you're exploring the Shopify development ecosystem for the first time or migrating from an older stack, this is your starting point.

The Modern Shopify App Stack

Shopify's recommended app architecture has evolved significantly. If you last looked at Shopify app development in 2022 or earlier, the stack has changed.

2026 Standard Stack

Why Remix?

Shopify adopted Remix (now React Router) as the default app framework because it provides server-side rendering out of the box, nested routing that maps cleanly to Shopify's admin navigation, built-in form handling and data mutations, and strong performance without client-side JavaScript overhead.

You can still build apps with other frameworks (Next.js, plain Node.js, PHP, Ruby), but the Remix template gives you the most complete starting point with authentication, session management, and Polaris pre-configured.

Prerequisites and Environment Setup

Before writing any code, you need these tools installed and accounts created.

Required Tools

• Node.js 18+ — download from nodejs.org
• A package manager — npm (bundled with Node), pnpm, or yarn
• Git — for version control and CLI operations
• A code editor — VS Code with the Shopify Liquid extension is the most common setup

Required Accounts

• Shopify Partner Account — free at partners.shopify.com. This gives you access to the Partner Dashboard, development stores, and the ability to submit apps
• Development Store — create one from your Partner Dashboard. This is a free, fully functional Shopify store for testing your app

Verify Your Setup

Open your terminal and confirm everything is installed:

node --version    # Should be 18.x or higher
npm --version     # Should be 8.x or higher
git --version     # Any recent version

Scaffolding Your First App

The Shopify CLI generates a complete app project with authentication, routing, and UI components pre-configured. One command gets you started.

Create the App

npm init @shopify/app@latest

The CLI will prompt you for:

1. App name — choose something descriptive (e.g., "inventory-alerts")
2. Template — select "Build a Remix app" (the recommended option)
3. Package manager — npm, pnpm, or yarn

This generates a project directory with the full Remix template, including:

my-app/
├── app/
│   ├── routes/          # Your app's pages
│   ├── shopify.server.ts # Shopify authentication config
│   └── root.tsx         # Root layout
├── prisma/
│   └── schema.prisma    # Database schema for sessions
├── extensions/          # Theme app extensions, checkout extensions
├── shopify.app.toml     # App configuration
├── package.json
└── README.md

Start the Dev Server

cd my-app
npm run dev

The CLI handles everything automatically:

1. Logs you into your Partner account
2. Creates an app record in the Partner Dashboard (or links to an existing one)
3. Sets up a Cloudflare tunnel for HTTPS access
4. Opens your development store with the app installed

You should see your app running inside the Shopify Admin. The default template includes a sample page with Polaris components and an API call example.

Understanding the App Architecture

A Shopify Remix app has three key layers that work together. Understanding how they connect is essential for productive Shopify app development.

App Bridge: The Admin Integration Layer

App Bridge embeds your app inside the Shopify Admin as an iframe and provides JavaScript APIs for interacting with the admin UI. It handles:

• Navigation — your app appears in the admin sidebar
• Toast notifications — show success/error messages in Shopify's native toast style
• Modal dialogs — open resource pickers (products, collections, customers)
• Contextual save bar — the save/discard bar that appears when a merchant edits data

App Bridge is configured automatically in the Remix template through the shopify.app.toml file. You interact with it using the @shopify/app-bridge-react hooks:

import { useAppBridge } from "@shopify/app-bridge-react";

function MyComponent() {
  const shopify = useAppBridge();

  const showToast = () => {
    shopify.toast.show("Product updated successfully");
  };

  return <button onClick={showToast}>Save</button>;
}

Polaris: The UI Component Library

Polaris is Shopify's design system. Using Polaris components ensures your app looks and feels native inside the Shopify Admin, which is a requirement for App Store approval.

Key components you'll use frequently:

• Page and Layout — page structure and responsive grid
• Card — content containers
• DataTable — tabular data display
• Form, TextField, Select — form inputs
• Banner — informational and error messages
• ResourceList and IndexTable — lists of products, orders, customers

import { Page, Layout, Card, Text } from "@shopify/polaris";

export default function SettingsPage() {
  return (
    <Page title="App Settings">
      <Layout>
        <Layout.Section>
          <Card>
            <Text as="p">Configure your app preferences here.</Text>
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
}

The Shopify APIs

Shopify exposes two API types for accessing store data:

Shopify strongly recommends GraphQL for new apps. It's more efficient (fetch exactly the data you need), better rate-limited, and supports webhooks natively.

// Example: Fetch 10 products using the GraphQL Admin API
export async function loader({ request }) {
  const { admin } = await authenticate.admin(request);

  const response = await admin.graphql(`
    {
      products(first: 10) {
        edges {
          node {
            id
            title
            status
            totalInventory
          }
        }
      }
    }
  `);

  const data = await response.json();
  return json({ products: data.data.products.edges });
}

Building a Real Feature: Low Stock Alerts

Theory only goes so far. Let's build a practical feature — a low stock alert system that notifies merchants when products fall below a threshold.

Step 1: Create the Settings Page

Create a new route at app/routes/app.settings.tsx:

import { json } from "@remix-run/node";
import { useLoaderData, useSubmit } from "@remix-run/react";
import {
  Page, Layout, Card, FormLayout, TextField, Button,
} from "@shopify/polaris";
import { useState } from "react";
import { authenticate } from "../shopify.server";

export async function loader({ request }) {
  await authenticate.admin(request);
  // Load saved threshold from your database
  return json({ threshold: 10 }); // default value
}

export async function action({ request }) {
  const { admin } = await authenticate.admin(request);
  const formData = await request.formData();
  const threshold = Number(formData.get("threshold"));

  // Save threshold to your database via Prisma
  // await db.settings.upsert({ ... });

  return json({ success: true, threshold });
}

export default function Settings() {
  const { threshold } = useLoaderData();
  const [value, setValue] = useState(String(threshold));
  const submit = useSubmit();

  const handleSave = () => {
    const formData = new FormData();
    formData.set("threshold", value);
    submit(formData, { method: "post" });
  };

  return (
    <Page title="Low Stock Alert Settings">
      <Layout>
        <Layout.AnnotatedSection
          title="Alert Threshold"
          description="Get notified when product inventory falls below this number."
        >
          <Card>
            <FormLayout>
              <TextField
                label="Minimum stock level"
                type="number"
                value={value}
                onChange={setValue}
                autoComplete="off"
              />
              <Button variant="primary" onClick={handleSave}>
                Save
              </Button>
            </FormLayout>
          </Card>
        </Layout.AnnotatedSection>
      </Layout>
    </Page>
  );
}

Step 2: Query Inventory Data

Create a route at app/routes/app._index.tsx to display low-stock products:

export async function loader({ request }) {
  const { admin } = await authenticate.admin(request);
  const threshold = 10; // Load from your database

  const response = await admin.graphql(`
    {
      products(first: 50, query: "inventory_total:<${threshold}") {
        edges {
          node {
            id
            title
            totalInventory
            featuredMedia {
              preview { image { url } }
            }
          }
        }
      }
    }
  `);

  const data = await response.json();
  return json({
    products: data.data.products.edges.map(({ node }) => node),
    threshold,
  });
}

This pattern — loader fetches data, action handles mutations, component renders UI — is the core of Remix and maps perfectly to how Shopify apps work.

App Extensions: Extending Beyond the Admin

Shopify app development goes beyond the admin panel. App Extensions let you inject functionality into the storefront, checkout, and other surfaces.

Types of Extensions

Creating a Theme App Extension

npm run shopify app generate extension

Select "Theme App Extension" when prompted. This creates an extensions/ directory with Liquid templates and JavaScript that merchants can add to their theme through the theme editor.

Theme app extensions are the modern replacement for ScriptTag-based storefront modifications. They're safer, faster, and give merchants control over placement through the theme editor. Our guide to Shopify app blocks vs theme sections explains the architecture in detail.

Testing Your App

Thorough testing is essential before submitting to the App Store. Shopify reviews apps rigorously, and bugs will get your submission rejected.

Development Store Testing

Your development store is your primary testing environment. Test every flow:

• Fresh install — does the OAuth flow work cleanly?
• Re-install — does the app handle re-authentication without errors?
• Uninstall/reinstall — is session data cleaned up properly?
• Different plans — test on Basic, Shopify, and Plus development stores if your app behaves differently per plan

Automated Testing

The Remix template includes a testing setup. Add tests for:

• Loader functions — verify API calls return expected data shapes
• Action functions — test form submissions and mutations
• Authentication — confirm unauthorized requests are redirected

npm run test

Performance Testing

Shopify enforces performance standards for App Store apps. Your app should:

• Load within 3 seconds on initial render
• Not block the admin UI thread
• Use efficient GraphQL queries (avoid over-fetching)
• Handle pagination for large data sets

Submitting to the Shopify App Store

Getting listed on the App Store is a multi-step process. Shopify's submission requirements are detailed, and the review team is thorough.

Pre-Submission Checklist

• App uses HTTPS for all requests
• OAuth flow handles install, re-install, and uninstall correctly
• All UI uses Polaris components (or closely matches Polaris style)
• App responds to mandatory webhooks (APP_UNINSTALLED, SHOP_REDACT, CUSTOMERS_REDACT)
• Privacy policy and terms of service URLs are set
• App listing includes screenshots, description, and pricing
• Performance meets Shopify's loading time requirements
• No deprecated API calls (check for REST endpoints being removed)

The Review Process

1. Submit through the Partner Dashboard — upload your app listing details, screenshots, and demo store credentials
2. Automated checks — Shopify's tooling scans for security issues, deprecated APIs, and missing webhooks
3. Manual review — a Shopify reviewer installs your app on a test store and verifies functionality
4. Feedback or approval — expect 5–10 business days. Most first submissions receive feedback requesting changes

Common Rejection Reasons

• Not handling the APP_UNINSTALLED webhook (you must clean up merchant data)
• Using custom UI elements instead of Polaris components
• Missing GDPR webhook handlers (CUSTOMERS_DATA_REQUEST, CUSTOMERS_REDACT, SHOP_REDACT)
• Broken OAuth flow on re-installation
• App crashes or shows errors in the admin

Monetization Models for Shopify Apps

Shopify app development can generate real revenue. According to MageComp's 2026 statistics, top app developers earn $167,000+ annually, while the average sits around $93,000.

Revenue Models

Using the Shopify Billing API

Shopify handles all billing through the Billing API. You never touch merchant payment information — Shopify charges the merchant through their existing Shopify account and pays you monthly (minus Shopify's 20% revenue share for App Store apps, or 0% for the first $1M/year).

// Create a recurring subscription charge
const response = await admin.graphql(`
  mutation {
    appSubscriptionCreate(
      name: "Pro Plan"
      lineItems: [{
        plan: {
          appRecurringPricingDetails: {
            price: { amount: 19.99, currencyCode: USD }
          }
        }
      }]
      returnUrl: "https://your-app.com/billing/callback"
    ) {
      appSubscription { id }
      confirmationUrl
    }
  }
`);

Mistakes That Derail New Shopify App Developers

Shopify app development has a learning curve. These are the pitfalls that catch developers most often.

• Building before validating — spend time in Shopify communities and the Shopify Community forums to confirm merchants actually need your app. Many developers build solutions for problems that don't exist.
• Ignoring the Polaris design system — custom-styled admin UIs feel foreign inside Shopify and will be flagged during app review. Use Polaris for everything.
• Not handling edge cases in OAuth — token expiration, re-installation after uninstall, and multi-store scenarios cause the most production bugs.
• Over-using the REST API — GraphQL is Shopify's primary API going forward. REST endpoints are being deprecated on a rolling basis. Build on GraphQL from the start.
• Skipping webhook implementation — webhooks aren't optional. Mandatory GDPR webhooks and APP_UNINSTALLED are required for App Store listing.
• Underestimating the review process — plan for 2–3 rounds of feedback before approval. Budget 4–6 weeks from submission to listing.

Start Building Your Shopify App

Shopify app development in 2026 is more accessible than ever. The Remix template gives you a production-ready starting point, the CLI handles infrastructure, and Polaris provides a complete UI toolkit. The opportunity is real — over 700,000 developers are in the Shopify partner ecosystem, and merchants continue to install more apps as their businesses grow.

Your next steps:

1. Create a Shopify Partner account and set up a development store
2. Run npm init @shopify/app@latest and explore the generated code
3. Build a simple feature (like the low-stock alert example above)
4. Read the official Shopify dev docs for API reference
5. Join the Talk Shop community to connect with other Shopify developers and get feedback on your app idea

What kind of app are you thinking of building? The best apps solve a real merchant pain point — and the Shopify development resources on our blog can help you refine your concept.

About Talk Shop

The Talk Shop team — insights from our community of Shopify developers, merchants, and experts.