Shopify has one of the most mature and well-documented app ecosystems in e-commerce. There are over 13,000 apps in the Shopify App Store, and new ones are published every week.
But building an app from scratch is not something most tutorials explain clearly. They cover the happy path but skip authentication flows, deployment gotchas, and production considerations.
This guide walks you through the full process of how to build a Shopify app from local setup to production deployment. It covers app types, authentication, API integration, webhooks, and how to deploy your app so merchants can actually install and use it.
Step 1: Understand the Types of Shopify Apps
Before writing a single line of code, choose the right app type for your use case.
| App Type | Where It Installs | Who Can Use It | Listed in App Store? |
|---|---|---|---|
| Public app | Any Shopify store | All merchants | Yes (optional) |
| Custom app | One specific store | One merchant | No |
| Embedded app | Shopify Admin sidebar | Merchant admin | Yes or custom install |
| Theme app extension | Storefront (theme layer) | Customers | No (part of another app) |
| Checkout UI extension | Checkout flow | Customers at checkout | No (part of another app) |
| Shopify Functions | Backend logic (Shopify-hosted) | Shopify core infrastructure | No |
Most full-featured apps are embedded apps, meaning they appear inside the Shopify Admin as a sidebar panel. They authenticate via OAuth and communicate with Shopify through the Admin API.
Understanding which type you need upfront prevents significant rework later.
Step 2: Set Up Your Development Environment
You need the following before creating your first app:
- Node.js (v18 or higher) installed on your machine
- npm or yarn for package management
- A Shopify Partner account at partners.shopify.com
- A Shopify development store (free through your Partner account)
- The Shopify CLI is installed globally
Install the Shopify CLI using npm:
npm install -g @shopify/cli @shopify/theme
Verify your installation:
shopify version
Your development store is a sandbox where you install and test your app without affecting a live merchant’s data. Always use a development store during the build phase.
Step 3: Create Your Shopify App with the CLI
Shopify’s CLI scaffolds a complete app with authentication, session storage, and a React frontend pre-configured.
Run the following command to create a new app:
shopify app init
You will be prompted to:
- Name your app
- Choose a template (Node.js with Remix is the current recommended stack)
- Log in to your Partner account through the browser
The CLI generates a project with the following structure:
| Folder/File | Purpose |
|---|---|
/app |
Frontend React app powered by Remix |
/extensions |
Theme extensions, checkout extensions, or functions |
shopify.app.toml |
App configuration file |
prisma/schema.prisma |
Database schema for session storage |
The generated app already handles OAuth authentication, session tokens, and App Bridge (the framework that embeds your app into the Shopify Admin). You do not need to build these from scratch.
Step 4: Understand OAuth and App Authentication
Shopify uses OAuth 2.0 for app authentication. Every time a merchant installs your app, Shopify walks them through an authorization flow that grants your app an access token.
The OAuth flow:
- Merchant clicks “Install” on your app listing or install URL
- Shopify redirects to your app’s authorization callback URL
- Your app redirects the merchant to Shopify’s permission grant screen
- Merchant approves the requested scopes
- Shopify sends an authorization code to your callback URL
- Your app exchanges the code for an access token
- Your app stores the token securely and uses it for future API calls
The Shopify CLI template handles this entire flow automatically. You configure which scopes you need in shopify.app.toml and the boilerplate manages the rest.
Scopes define what your app can access. Only request the scopes you actually need. Unnecessary scopes reduce merchant trust and can cause App Store rejection.
| Common Scope | What It Accesses |
|---|---|
read_products |
Read product data |
write_products |
Create and update products |
read_orders |
Read order data |
write_orders |
Update orders |
read_customers |
Access customer records |
unauthenticated_read_product_listings |
Storefront product access |
Step 5: Build Your App’s Core Functionality with the API
Most Shopify app functionality depends on the Admin API. Shopify supports both REST and GraphQL, but GraphQL is the modern standard and the direction of all new Shopify development.
Our deep dive into the Shopify GraphQL API covers how to structure queries, handle pagination, and use mutations to write data. Read it before you start building your data layer.
Example: Fetching products using GraphQL
const response = await admin.graphql(` { products(first: 10) { edges { node { id title variants(first: 5) { edges { node { id price } } } } } } } `);
In the Remix-based Shopify app template, the admin object is automatically available in your loader and action functions with the merchant’s access token already attached. You do not need to manage authentication headers manually.
Step 6: Handle Webhooks for Real-Time Events
Most useful apps need to respond to events in a merchant’s store in real time. When an order is placed, a product is updated, or a customer subscribes, your app needs to know.
Shopify delivers these events through webhooks: HTTP POST requests sent to a URL your app registers.
Common webhooks for Shopify apps:
| Webhook Topic | When It Fires |
|---|---|
orders/create |
A new order is placed |
orders/paid |
An order payment is confirmed |
products/update |
A product is edited |
customers/create |
A new customer account is created |
app/uninstalled |
The merchant uninstalls your app |
Our guide on Shopify webhooks explains how to register, verify, and handle each webhook type securely. Webhook verification using HMAC signatures is mandatory. Never process a webhook payload without verifying it first.
For apps that handle high volumes of webhook events, a queue-based processing approach prevents timeouts and data loss. Our post on fault-tolerant Shopify integrations covers the architecture patterns that keep your app stable under load.
Step 7: Build Your App’s Frontend with App Bridge
App Bridge is Shopify’s JavaScript library that connects your embedded app UI to the Shopify admin. It handles navigation, modals, toast notifications, resource pickers, and session token management.
The Remix-based app template comes with App Bridge preintegrated. You use standard React components @shopify/polaris to build your UI, and they automatically match the Shopify Admin’s visual design.
Key Polaris components to know:
| Component | What It Renders |
|---|---|
Page |
A full admin page with a title and actions |
Card |
A content container with an optional header |
DataTable |
A sortable, paginated data grid |
ResourceList |
A list of Shopify resources (orders, products) |
Modal |
A dialog overlay |
Toast |
A temporary success or error notification |
Keep your UI focused and functional. Polaris exists to make your app feel native inside Shopify Admin. Use standard patterns rather than building custom UI components from scratch.
Step 8: Add App Extensions (Optional but Powerful)
Extensions let your app add functionality directly to the Shopify storefront or checkout without requiring merchants to manually edit their theme.
Types of extensions available:
| Extension Type | What It Does | Where It Appears |
|---|---|---|
| Theme app extension | Adds blocks to the storefront theme | Product pages, homepage, collection pages |
| Checkout UI extension | Adds custom content to checkout | Checkout flow |
| Shopify Functions | Overrides backend logic (discounts, shipping) | Shopify infrastructure |
| Web pixel | Tracks storefront events | Storefront JS layer |
If your app needs to show a widget on product pages or add a custom section to checkout, extensions are the right approach. Our guide on Shopify checkout UI extensions explains how to build, test, and deploy checkout-specific extension components.
For apps that need to customize discount or delivery logic, Shopify Hydrogen and Shopify Functions open up the backend layer that was previously locked. Our post on serverless functions in Shopify Hydrogen explains how serverless patterns fit into the modern Shopify app architecture.
Step 9: Test Your App on a Development Store
Run your app locally during development using:
shopify app dev
This command:
- Starts your local development server
- Opens a tunnel using Cloudflare (so Shopify can reach your localhost)
- Installs the app on your development store
- Opens the admin with your app embedded
Test everything before deployment:
- Install and uninstall flows
- OAuth token exchange
- All API queries and mutations
- Webhook receipt and processing
- Every page and action in your app UI
- Error states and edge cases
Test on a development store that contains real-looking data. Create test products, orders, and customers manually or use Shopify’s development store seeder tools.
Step 10: Deploy Your Shopify App to Production
When your app is ready for merchant use, you need to deploy it to a production server.
Recommended hosting platforms for Shopify apps:
| Platform | Best For | Starting Cost |
|---|---|---|
| Fly.io | Low-latency global deployment | Free tier available |
| Railway | Simple Node.js and PostgreSQL hosting | From $5/month |
| Render | Auto-scaling web services | Free tier available |
| Heroku | Established Node.js hosting | From $7/month |
| AWS / GCP / Azure | Enterprise-scale apps | Usage-based |
Your app must run on HTTPS. All platforms above provide this automatically.
Deployment checklist:
- Set all environment variables (Shopify API key, secret, database URL)
- Run database migrations for session storage
- Configure your production app URL in your Partner Dashboard
- Update allowed redirect URLs to your production domain
- Set up error monitoring (Sentry or similar)
- Test the full install flow on a development store using your production URL
For apps that expect high traffic or burst loads, think about architecture from the start. Our post on scaling Shopify apps to millions of requests covers the infrastructure patterns that prevent your app from becoming a bottleneck for merchants at scale.
Step 11: Submit to the Shopify App Store (Public Apps Only)
If you want merchants to discover your app organically, submit it to the Shopify App Store.
Key App Store submission requirements:
- App must follow all Shopify Partner Program policies
- Listing requires a clear description, screenshots, and a demo video
- App must pass Shopify’s technical review (functionality, security, performance)
- Billing must use Shopify’s native billing API (no external payment collection)
- Support contact and privacy policy must be provided
The review process typically takes 1 to 4 weeks, depending on app complexity. Shopify reviewers install your app on a test store and evaluate every feature you document.
Before submitting, review the Shopify built-in SEO features that affect how your app listing ranks inside the App Store search results. Your app title and description follow similar optimization principles to standard SEO.
Common Shopify App Development Mistakes
| Mistake | Consequence | Prevention |
|---|---|---|
| Not verifying webhook signatures | Security vulnerability | Always verify HMAC on every webhook |
| Requesting too many API scopes | Merchant distrust, App Store rejection | Only request what you need |
| Storing access tokens insecurely | Data breach risk | Use encrypted session storage |
| Not handling API rate limits | The app crashes under load | Implement retry logic with exponential backoff |
| Missing uninstall webhook handler | Orphaned data, billing issues | Always register and handle apps/uninstalls. |
| Testing only on the desktop Admin | Mobile Admin bugs go undetected | Test Polaris UI on mobile Admin view |
For a broader view of what goes wrong technically in Shopify development, our post on Shopify technical mistakes covers the patterns that create the most ongoing maintenance headaches.
Get Professional Shopify App Development Support
Building a production-ready Shopify app requires a combination of OAuth knowledge, API architecture, webhook processing, UI development, and deployment expertise. It is not a small project.
If you need a custom Shopify app built to a professional standard, our team at KolachiTech offers dedicated Shopify app development services and Shopify API development services for merchants and businesses with specific functionality requirements.
For stores that need custom functionality beyond what existing apps offer, our Shopify custom development service covers bespoke solutions built to your exact specifications.
Book a free consultation to discuss your app idea and get a clear development roadmap.
Conclusion
Building a Shopify app from scratch is a multi-step process that spans environment setup, OAuth authentication, API integration, UI development, webhook handling, and production deployment.
Use the Shopify CLI to scaffold your app, build with GraphQL for future-proof API access, handle webhooks securely, and deploy on a reliable HTTPS host before inviting merchants to install.
Every step in this guide prepares you to ship an app that merchants can trust and that Shopify will accept.
Frequently Asked Questions
Q: Do I need to know coding to build a Shopify app? A: Yes. Shopify app development requires programming experience. The recommended stack is Node.js with Remix on the backend and React with Polaris on the frontend. Shopify’s CLI templates reduce boilerplate significantly, but coding knowledge is essential.
Q: What is the Shopify CLI, and why do I need it? A: The Shopify CLI scaffolds new apps, manages OAuth authentication, handles local tunneling for development, and deploys apps to production. It is the fastest and most reliable starting point for any new Shopify app project.
Q: What is the difference between a public Shopify app and a custom app? A: A public app is listed in the Shopify App Store and can be installed by any merchant. A custom app is built for a single specific store and is installed via a private link. Custom apps skip the App Store review process entirely.
Q: How long does it take to build a Shopify app? A: A simple app with basic API functionality takes one to two weeks. A full-featured app with webhooks, extensions, billing, and App Store listing typically takes four to twelve weeks, depending on complexity and team size.
Q: What hosting is required to deploy a Shopify app? A: Your app needs a server that handles OAuth callbacks and API requests over HTTPS. Popular options include Fly.io, Railway, Render, and Heroku. Cloud platforms like AWS and GCP work well for enterprise-scale apps.
Q: Does Shopify charge a fee for apps listed in the App Store? A: Shopify takes 0% revenue share on your first $1 million USD in annual app revenue, then 15% beyond that. There are no upfront listing or review fees.
Q: What APIs does Shopify provide for app development? A: Shopify provides the Admin API (REST and GraphQL), Storefront API, Customer Account API, Checkout UI Extensions API, and Shopify Functions. Most apps use the Admin GraphQL API as their primary data access layer.
