Talk Shop
Home
Learn More
About Us
Follow Us
Blog
Tools
Newsletter
Join Discord
Join

Community

  • Developers
  • Growth
  • Entrepreneurs
  • Support
  • Experts
  • Tools

Location

123 Mars, Crater City, Red Planet

(WiFi may be spotty)

Hours

Who has time for breaks? We're here 24/7!

Contact

hello@letstalkshop.com

Talk Shop
Talk Shop

Built for real builders. Not affiliated with Shopify Inc.

Home
Privacy
Terms
  1. Home
  2. >Blog
  3. >Shopify Development
  4. >How to Create a Shopify App From Scratch
Shopify Development11 min read

How to Create a Shopify App From Scratch

Build your first Shopify app from scratch using the CLI, Remix, Polaris, and GraphQL. Covers scaffolding, authentication, extensions, billing, and App Store submission.

Talk Shop

Talk Shop

Mar 26, 2026

How to Create a Shopify App From Scratch

In this article

  • Why 2026 Is the Best Time to Create a Shopify App From Scratch
  • Prerequisites and Developer Account Setup
  • Scaffolding and Running Your First App
  • Authentication, Sessions, and API Scopes
  • Building Your App UI With Polaris and App Bridge
  • Working With the GraphQL Admin API
  • Extensions, Webhooks, and Background Processing
  • Monetization and the Billing API
  • Testing, Submission, and App Store Launch
  • Common Mistakes and How to Avoid Them
  • Scaling and Growing Your App Post-Launch

Why 2026 Is the Best Time to Create a Shopify App From Scratch

Shopify powers over 4 million active stores worldwide, and 87% of those merchants rely on apps to run their day-to-day operations. The average store installs six apps. That translates to a massive addressable market for developers who know how to create a Shopify app from scratch in 2026.

The economics are compelling. App developers have collectively earned more than $1.5 billion through the Shopify App Store, with top developers pulling in $167,000+ annually. The platform's partner ecosystem generates over $12.5 billion in collective revenue, and Shopify's own projected CAGR of 29% through 2026 means the merchant base keeps expanding.

What makes right now especially attractive is the maturity of the tooling. Shopify's CLI scaffolds a production-ready Remix app in under two minutes. Authentication, session management, and billing are handled by official packages. The Shopify development ecosystem has never been more accessible for solo developers and small teams ready to build.

Prerequisites and Developer Account Setup

Before writing a single line of code, you need the right accounts and tools in place. Rushing past this step causes headaches later when you hit OAuth errors or can't test against real store data.

Setting Up Your Partner Account and Dev Store

Head to partners.shopify.com and sign up for a free Partner account. This gives you access to the Partner Dashboard, where you manage your apps, track installations, and monitor revenue.

From the Partner Dashboard, create a development store. Development stores are free, fully functional Shopify stores that let you test your app against real data without paying a subscription. You can create up to 50.

  • Navigate to Stores in the Partner Dashboard sidebar
  • Click Add store and select Development store
  • Fill in the store details and click Save

Installing the Shopify CLI and Node.js

Your local environment needs three things:

ToolVersionPurpose
Node.js18+ (LTS recommended)JavaScript runtime for the app server
pnpm / npm / yarnLatestPackage management
Shopify CLI3.x+Scaffolding, dev server, deployment, extension management

Install the Shopify CLI globally:

bashbash
npm install -g @shopify/cli @shopify/app

Shopify supports three app types: public apps (listed on the App Store, available to any merchant), custom apps (built for a single store), and draft apps (in-progress public apps for testing). For this guide, we're building a public app from scratch using the modern Remix stack.

Scaffolding and Running Your First App

Smartphone showing a dark GraphQL API interface.

The Shopify CLI eliminates boilerplate. One command generates a working app with authentication, session management, database setup, and a Polaris-based UI already wired together.

Running the Init Command

bashbash
shopify app init

The CLI prompts you for an app name, template (select remix or reactRouter for the newer React Router-based template), and package manager. It generates the full project structure, installs dependencies, and configures the app to run against your Partner account.

After scaffolding, your project includes route files for the main app page, OAuth callback, and webhook handling, plus a Prisma schema for session storage and a shopify.app.toml config that connects your local code to the Partner Dashboard.

Starting the Dev Server

bashbash
shopify app dev

This command starts the Remix development server, creates a Cloudflare tunnel so Shopify can reach your local machine, opens the app in your development store's admin panel, and hot-reloads on code changes. You should see your app embedded inside the Shopify Admin within seconds.

According to freeCodeCamp's beginner guide to Shopify app development, the scaffolded template gives you a production-ready foundation that handles the most complex parts of app infrastructure automatically.

Authentication, Sessions, and API Scopes

Authentication is the part of Shopify app development that trips up most beginners. The good news: the scaffolded Remix template handles OAuth automatically through @shopify/shopify-app-remix.

How OAuth Works in Shopify Apps

When a merchant installs your app, Shopify initiates an OAuth 2.0 flow. The merchant approves permissions, Shopify sends an authorization code, and your app exchanges that code for an access token stored in your database for future API calls.

In shopify.app.toml, define the scopes your app needs:

tomltoml
[access_scopes]
scopes = "read_products,write_products,read_orders"

Request only the scopes you actually need. Excessive scope requests reduce merchant trust and can trigger additional scrutiny during App Store review.

Session Storage With Prisma

The scaffolded template uses Prisma with SQLite for local development. Sessions are stored in a Session table that maps shop domains to access tokens. For production, switch to PostgreSQL by updating prisma/schema.prisma:

prismaprisma
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}
EnvironmentDatabaseWhy
Local devSQLiteZero config, instant setup
StagingPostgreSQLMatches production behavior
ProductionPostgreSQL / PlanetScaleScalable, reliable, managed

If you're exploring Shopify app development for the first time, the authentication layer is the one piece you should understand deeply -- even though the template handles it for you.

Building Your App UI With Polaris and App Bridge

Polaris is Shopify's design system. Using it ensures your app looks native inside the Shopify Admin and follows the same interaction patterns merchants already understand.

Polaris Web Components

Shopify has unified Polaris into web components that work across any framework. In the Remix template, Polaris components are imported directly:

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

export default function Index() {
  return (
    <Page title="Dashboard">
      <Layout>
        <Layout.Section>
          <Card>
            <Text as="h2" variant="headingMd">Welcome to your app</Text>
            <Button variant="primary">Get started</Button>
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
}

The most-used components include Page (top-level wrapper), Layout (responsive grid), Card (content container), DataTable (tabular data), ResourceList (item lists with bulk actions), Modal (overlay dialogs), and Banner (status messages).

App Bridge Integration

App Bridge handles communication between your embedded app and the Shopify Admin shell. It provides navigation, toast notifications, and shop context. In the Remix template, App Bridge is automatically initialized and handles authentication headers -- you don't manually attach access tokens to API requests from the frontend.

As Shopify's Polaris documentation explains, the unified web component architecture means Polaris components work like native HTML elements and can be used in any framework.

Working With the GraphQL Admin API

The GraphQL Admin API is how your app reads and writes store data. Shopify strongly recommends GraphQL over REST for new apps because it lets you request exactly the data you need in a single round trip.

Making Authenticated Requests

In your Remix loader or action functions, use the authenticated admin client:

tsxtsx
import { authenticate } from "../shopify.server";

export const loader = async ({ request }) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(`
    {
      products(first: 10) {
        edges {
          node { id, title, status }
        }
      }
    }
  `);
  const data = await response.json();
  return data;
};

Rate Limiting and Query Cost

Shopify uses a leaky bucket algorithm for rate limiting. GraphQL apps get a cost-based budget of 1,000 points (2,000 for Shopify Plus), leaking at 50 points per second.

  • Use requestedQueryCost and actualQueryCost from the response extensions to monitor usage
  • Paginate with cursors, not offsets
  • Batch related queries into a single request
  • Cache responses that don't change frequently

The 2026-01 API version introduced productSet for bulk operations and advanced metafield querying with boolean operators.

Extensions, Webhooks, and Background Processing

Connected dark modules representing background processes.

Extensions let your app surface UI beyond the admin -- on the storefront, at checkout, and at point-of-sale. Webhooks push event notifications in real time so your app doesn't need to poll the API constantly.

Theme App Extensions

Theme app extensions inject content directly into a merchant's storefront theme. App blocks render inline content on any JSON template page. Merchants add and position them through the theme editor, just like native sections. App embed blocks inject scripts or floating elements (chat widgets, notification bars, analytics pixels) into the <head> or <body> without a visible block in the editor.

Generate a theme extension with the CLI:

bashbash
shopify app generate extension --type theme_app_extension

This creates a directory under extensions/ with Liquid templates and a schema file defining the block's settings. Keep extensions lightweight -- under 50KB of JavaScript -- and test across multiple themes since different themes handle app blocks differently.

Understanding how theme sections and app blocks interact is essential for building extensions that work reliably across the theme ecosystem. Gadget's guide to theme app extensions provides an excellent technical deep-dive on the block architecture and configuration patterns.

Webhooks and GDPR Compliance

Register webhooks in shopify.server.ts for events like PRODUCTS_UPDATE and APP_UNINSTALLED. Webhooks push event notifications to your app in real time, so you don't need to poll the API constantly to detect changes.

Every production app must handle three mandatory GDPR webhooks: CUSTOMERS_DATA_REQUEST, CUSTOMERS_REDACT, and SHOP_REDACT. Missing these is one of the most common reasons for App Store rejection. Implement all three endpoints even if your app doesn't store customer data -- Shopify still requires them as a compliance safeguard.

Extension TypeUse CaseGenerated With
Theme app extensionStorefront UI blocks--type theme_app_extension
Admin UI extensionCustom admin interfaces--type ui_extension
Checkout extensionCheckout customization--type checkout_ui

Monetization and the Billing API

Tablet displaying stylized Shopify App Store listings.

If merchants pay anything to use your app, Shopify requires you to process payments through their Billing API. No external payment processors allowed for App Store apps.

Pricing Models and Managed Pricing

Managed pricing is now the default for new apps. You define pricing plans directly in the Partner Dashboard, and Shopify handles plan selection, free trials, proration, and price updates.

ModelBest ForHow It Works
Recurring subscriptionMost appsMonthly or annual charge billed through Shopify
Usage-basedAPI-heavy appsPer-action charges within a 30-day billing cycle
One-time chargeSetup feesSingle payment, no recurring billing
FreemiumGrowth-stage appsFree tier with paid upgrades

Pricing Strategy Tips

  • Always offer a free plan or trial. Merchants won't commit without testing. A 14-day trial is standard.
  • Price based on merchant plan tier. A store doing $10M/year can pay more than a startup.
  • Don't undercut your value. The average Shopify app developer earns $93,000/year. Price accordingly.

Shopify takes a revenue share from App Store earnings -- currently 0% on your first $1M in annual revenue, then 15% after that.

Testing, Submission, and App Store Launch

Shipping a buggy app means rejected submissions and one-star reviews. Invest in testing before you submit. The App Store review process takes 5-10 business days.

Testing Across Store Configurations

Your app needs to work on stores with zero products and stores with 10,000+, on Basic plans through Shopify Plus, with different currencies and languages. Supplement shopify app dev with unit tests (Vitest or Jest), integration tests for API interactions, and end-to-end tests for critical flows (Playwright or Cypress).

Pre-Submission Checklist and Common Rejection Reasons

Before submitting, verify all requirements are met. eSEOspace's guide to App Store approval documents the most common rejection reasons:

IssueHow to Fix
Missing GDPR webhook handlersImplement all three mandatory endpoints
App reduces Lighthouse score by 10+ pointsOptimize theme extension bundle size
Session token errors on reinstallClear stale sessions in APP_UNINSTALLED handler
Third-party cookies for sessionsUse Shopify session tokens instead
Missing security headersAdd frame-ancestors and CSP headers

Your listing needs an app name (under 30 characters), tagline, detailed description, minimum 3 screenshots, and transparent pricing. For tools that can complement your app's functionality, explore the ecommerce tools available to Shopify merchants.

Common Mistakes and How to Avoid Them

Responsive Shopify admin interface across three dark devices.

Learning from others' failures saves weeks of debugging and rejected submissions. These are the most frequent pitfalls when building a Shopify app from scratch.

Over-Requesting Scopes and Hardcoding Values

Every scope you request shows up on the merchant's permission screen. Requesting write_customers when you only need read_products erodes trust. Audit your scopes quarterly and remove any you don't actively use.

Never hardcode shop domains, API versions, or currency codes. Use the session's shop context and Shopify's locale APIs instead.

Ignoring Error Boundaries and Plus Edge Cases

When an API call fails or a webhook payload is malformed, your app should fail gracefully -- not crash the merchant's admin experience. Implement error boundaries in your Remix routes.

Plus merchants have different checkout configurations, multiple staff accounts with granular permissions, and higher API rate limits. If your app only works on standard plans, you're leaving revenue on the table. Test against a Plus development store (available through your Partner Dashboard) to catch compatibility issues early.

Not Planning for Scale From Day One

Building a Shopify app from scratch that handles 10 installs is different from handling 10,000. Design your database queries to scale, implement background job processing for heavy operations, and use connection pooling for your database. Redis-backed job queues (like BullMQ) prevent API timeouts when processing bulk operations.

MistakeImpactPrevention
Over-requesting scopesLower install ratesMinimal scope principle
No error boundariesApp crashes in adminRemix ErrorBoundary components
Hardcoded valuesBreaks on different storesDynamic context from session
Skipping webhook validationSecurity vulnerabilityAlways verify HMAC signatures

For developers building their first Shopify project, our guide on theme development for beginners provides complementary context on how the storefront side works.

Scaling and Growing Your App Post-Launch

Isometric network nodes with glowing growth data.

Building the app is only half the battle. Maintaining it as Shopify evolves and your merchant base grows requires ongoing attention.

Shopify releases new API versions quarterly and deprecates old ones on a rolling 12-month cycle. Set up monitoring for webhook delivery failures, API error rates, app load times, and billing sync issues.

Once your app is live, growth depends on:

  • App Store SEO -- optimize your listing title and description with keywords merchants actually search for
  • Merchant reviews -- prompt satisfied users to leave reviews after they experience core value (not immediately after install)
  • Content marketing -- publish guides about the problem your app solves to drive organic discovery
  • Partner referrals -- join the Talk Shop community and connect with agencies that recommend apps to their clients

Shopify releases new API versions quarterly and deprecates old ones on a rolling 12-month cycle. Subscribe to the Shopify Changelog and update your API version string in shopify.app.toml before the deprecation date hits. Set up monitoring for webhook delivery failures, API error rates by endpoint, app load times in the admin panel, and billing sync issues.

The Shopify app ecosystem rewards developers who solve specific problems well. The infrastructure to create a Shopify app from scratch is mature, the market keeps expanding, and the tooling handles the hard parts. Start with a focused feature set, validate with real merchants on development stores, and iterate based on their feedback before scaling.

Shopify DevelopmentApps & Integrations
Talk Shop

About Talk Shop

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

Related Insights

Related

Best Shopify SEO Apps: 10 Tools Ranked for 2026

Related

Shopify Admin API: A Developer's Guide to Building Custom Integrations

The ecommerce newsletter that's actually useful.

Daily trends, teardowns, and tactics from the top 1% of ecommerce brands. Delivered every morning.

No spam. Unsubscribe anytime. · Learn more

New

Business Name Generator

Generate unique, brandable business names with AI. Check domain availability instantly.

Generate Names

Talk Shop Daily

Daily ecommerce news, teardowns, and tactics.

No spam. Unsubscribe anytime. · Learn more

Try our Business Name Generator