Building a Shopify app starts with the Shopify CLI, which scaffolds a full project using Remix (a React-based framework) and Node.js in a single command. From there, you connect to Shopify’s APIs to read and write store data, build your interface with Shopify’s component library, and either distribute through the Shopify App Store or install directly on a specific store. The process is approachable if you have basic web development experience, though the Shopify ecosystem has its own patterns worth understanding before you start.
Choose Your App Type First
Shopify recognizes two distribution models, and the one you pick affects how you build, host, and monetize your app.
Public apps can be installed on multiple Shopify stores and are listed on the Shopify App Store. They require approval through Shopify’s review process before they go live. If you want to charge merchants for your app, this is the path you need.
Custom apps are built for a single store, or for multiple stores within the same Shopify Plus organization. They skip the review process entirely, which makes them faster to deploy. The tradeoff: custom apps can’t use Shopify’s Billing API to charge merchants, so they’re best suited for in-house tools or client work where you’re billing separately.
Both types use the same underlying technology. You can start with a custom app for development and testing, then convert to public distribution later if you decide to list on the App Store.
Set Up Your Development Environment
You need three things installed before writing any code: Node.js (version 18 or higher), a package manager like npm or yarn, and the Shopify CLI. Install the CLI globally with npm install -g @shopify/cli.
You also need a Shopify Partner account, which is free. Sign up at partners.shopify.com. Through your Partner dashboard, create a development store, a sandboxed Shopify store with dummy data where you can test your app without affecting a real merchant’s shop. Development stores don’t require a paid Shopify plan.
Once the CLI is installed, run shopify app init in your terminal. The CLI walks you through naming your app, selecting a template, and connecting it to your Partner account. The default template uses Remix with React on the frontend and Node.js on the backend. This is Shopify’s recommended stack, and it comes preconfigured with authentication, API access, and the admin embedding setup.
Understand the Core Tech Stack
The scaffolded project includes several packages that handle the heavy lifting.
The @shopify/shopify-app-remix package manages authentication and API calls. It handles the OAuth flow that lets merchants authorize your app to access their store data, so you don’t need to build that from scratch. It also integrates with App Bridge, which is the layer that lets your app embed directly inside the Shopify admin rather than opening in a separate browser tab.
For the user interface, you’ll use Polaris, Shopify’s open-source React component library. Polaris provides buttons, forms, data tables, modals, navigation elements, and layout components that match the look and feel of the Shopify admin. Using Polaris is effectively required for embedded apps because it ensures your app feels native to merchants who are already familiar with the admin interface.
To set up both App Bridge and Polaris, you wrap your app’s routes in an AppProvider component. This single wrapper initializes the embedded environment and loads the design system, keeping your app in sync with Shopify’s current requirements.
On the data side, you’ll interact with Shopify’s APIs. The Admin API (available in both REST and GraphQL versions) lets you read and write products, orders, customers, inventory, and other store data. GraphQL is the preferred option because it lets you request exactly the fields you need in a single call. The Storefront API is available if your app needs to interact with the customer-facing side of a store.
Build Your App’s Core Functionality
With the scaffolded project running, development follows a typical web app workflow. Run shopify app dev to start a local development server. The CLI creates a secure tunnel so Shopify’s servers can communicate with your local machine, and it opens your app inside the Shopify admin of your development store.
From here, the specifics depend on what your app does. A few patterns show up in nearly every Shopify app:
- Authenticated API calls: Use the session token provided by the Remix package to make server-side requests to the Admin API. The scaffolded code includes loader and action functions (Remix conventions for fetching and mutating data) that already handle authentication.
- Webhooks: Register webhooks to get notified when something changes in a merchant’s store, like a new order being placed or a product being updated. The CLI template includes webhook registration helpers. Define which events you care about and write handler functions for each.
- Database storage: Most apps need to store their own data beyond what Shopify provides. The template includes a basic SQLite setup for development. For production, you’ll swap this for a hosted database like PostgreSQL or MySQL.
- App extensions: If your app needs to appear in specific parts of the Shopify admin or checkout flow, you can build app extensions. These are declared through the CLI and render in designated slots within the Shopify interface, like the product page or the checkout.
Hot reloading works during development, so changes to your code appear immediately in the embedded admin view without restarting the server.
Design for the Shopify Admin
Shopify expects embedded apps to feel like a natural extension of the admin, not a separate product bolted on. Polaris handles most of this if you use its components consistently, but there are design principles worth keeping in mind.
Polaris is built around what Shopify calls a “pro design language,” prioritizing efficiency, data-rich views, and action-driven interfaces. In practice, this means your app should surface the most important information upfront, use clear visual hierarchy through typography and color, and make primary actions obvious. Don’t bury key functionality behind multiple clicks.
Use Polaris layout components (Page, Card, Layout) to structure your views. Use its form components for inputs. Use its feedback patterns (banners, toasts, modals) for communicating status. The more consistently you use Polaris, the less friction merchants experience and the smoother the App Store review process goes.
Host Your App
Shopify apps are web applications that you host yourself. Shopify doesn’t provide hosting. When a merchant uses your app, their browser loads it from your server and displays it inside the Shopify admin via an iframe.
For a Remix/Node.js app, common hosting options include platforms like Render, Railway, Fly.io, or any cloud provider that supports Node.js. You need HTTPS (required for embedded apps), reasonable uptime, and enough capacity to handle requests from all the stores that install your app.
Keep response times fast. Merchants interact with your app while managing their business, and slow-loading pages create a poor experience that can lead to uninstalls or negative reviews. Shopify’s review team also evaluates performance.
Revenue Share and Pricing
If you distribute through the Shopify App Store and charge merchants, Shopify’s Billing API handles subscriptions and one-time charges. You set prices, and Shopify collects payment from merchants, then pays you after deducting its share.
The revenue share model is generous for new developers. You keep 100% of your first $1,000,000 in lifetime gross app revenue. Above that threshold, Shopify takes a 15% cut. This means most independent developers and small teams will pay zero revenue share for a long time.
All billing is subject to a 2.9% payment processing fee and applicable sales tax, charged separately from the revenue share. So even while you’re in the zero-percent tier, you’ll see the processing fee deducted from each transaction.
Developers who earned $20,000,000 or more through the App Store in the prior calendar year, or whose company grosses $100,000,000 or more overall, pay the 15% rate on all revenue with no zero-percent tier on the first million.
Submit to the App Store
When your public app is ready, you submit it through your Shopify Partner dashboard. The submission includes your app listing (name, description, screenshots, pricing), and Shopify’s review team tests the app manually.
Reviewers check for functional correctness, security practices, performance, and compliance with Shopify’s design and API usage guidelines. Common reasons apps get rejected include broken authentication flows, poor error handling, slow load times, inconsistent UI that doesn’t match the admin, and requesting API scopes your app doesn’t actually use. Request only the minimum permissions your app needs.
Review times vary. Plan for at least a few business days, though it can take longer during busy periods. If your app is rejected, you’ll receive specific feedback on what to fix and can resubmit.
Write your app listing carefully. The title, description, and screenshots are what convince merchants to install. Highlight the specific problem your app solves, show the interface in your screenshots, and be transparent about pricing. Merchants comparison-shop heavily on the App Store, so clarity and professionalism in your listing matter as much as the app itself.
Development Timeline to Expect
A simple app, like one that adds a custom field to products or sends notifications based on order events, can go from zero to a working prototype in a weekend if you’re comfortable with React and Node.js. Getting it polished, tested, and approved for the App Store typically takes a few weeks of part-time work.
More complex apps that involve extensive UI, multiple integrations, or real-time data processing can take months. The Shopify CLI and Remix template eliminate a significant amount of boilerplate, but your app’s unique logic, edge case handling, and production-grade hosting still require real engineering time. Start with the smallest useful version of your app, get it into merchants’ hands, and iterate from there.