Shopify App Development: Building Custom Apps with Remix and Polaris

Building custom Shopify apps allows merchants to extend their stores beyond the limits of themes and built-in features. With Shopify's shift toward Remix as the recommended framework for app development and Polaris as the unified design language, developers now have a powerful, opinionated stack for creating apps that feel native to the Shopify admin. Whether you're building a private app for a single client or a public app for the Shopify App Store, this guide covers the essentials.

Scaffolding a Remix Shopify App

Shopify provides an official CLI to bootstrap a Remix app with all the necessary plumbing. Run the following to create a new project:

npm create @shopify/app@latest -- --template remix

This generates a complete Remix application with Shopify authentication pre-configured, a Polaris UI scaffold, and webhook handlers ready to go. The CLI registers your app in your Shopify Partners dashboard and creates a .env file with your API keys and scopes. You'll work primarily out of the app/routes directory, where Remix's file-based routing maps directly to app pages.

Authentication and Session Handling

Shopify apps installed by merchants use OAuth 2.0 with the Shopify Admin API. The Remix template handles the OAuth flow automatically through the shopify.auth module — it verifies the HMAC signature, exchanges the authorization code for an access token, and stores the session in your database of choice. The default template uses SQLite via Prisma, but you can swap in PostgreSQL or MySQL for production.

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

export async function loader({ request }: LoaderFunctionArgs) {
  const { session, admin } = await authenticate.admin(request);
  const products = await admin.graphql(PRODUCTS_QUERY);
  return json(await products.json());
}

Building UI with Polaris Components

Polaris is Shopify's React component library designed to match the admin interface. Every app route should use Polaris components — Page, Card, DataTable, ResourceList, ChoiceList — to ensure a consistent merchant experience. The embedded app SDK (@shopify/app-bridge-react) integrates your app inside an iframe within the Shopify admin, handling navigation, modals, and toast notifications seamlessly.

Polaris also supports Polaris Viz for charts and Polaris tokens for theming. When building embedded apps, always use useAppBridge() to access the authenticated Shopify context rather than building your own navigation.

Handling Webhooks and Real-Time Data

Shopify sends webhooks for over 100 event types — orders created, products updated, app subscriptions changed. Your Remix app's app/routes/webhooks.tsx route handles incoming POST requests signed with a Shopify-verified HMAC. Validate every webhook before processing it:

export async function action({ request }: ActionFunctionArgs) {
  const { topic, shop, payload } = await authenticate.webhook(request);
  switch (topic) {
    case "ORDERS_CREATE":
      await processOrder(payload);
      break;
    case "PRODUCTS_UPDATE":
      await syncProduct(payload);
      break;
  }
  return new Response(null, { status: 200 });
}

Always return a 200 status quickly and process data asynchronously using a job queue like Bull or Sidekiq to avoid webhook timeouts.

Billing and Subscription Management

Monetizing your app requires Shopify's Billing API integration. The Remix template provides a shopify.billing helper that checks whether a store has an active subscription before granting access. You can offer one-time purchases or recurring subscriptions:

const billing = await shopify.billing.request({
  plan: "Monthly Subscription",
  returnUrl: "/app/confirmation",
  trialDays: 14,
  amount: 29.99,
  currencyCode: "USD",
});

Use the AppSubscription GraphQL mutation to create custom billing cycles, and listen for APP_SUBSCRIPTIONS_UPDATE webhooks to handle plan changes and cancellations.

Testing and Deployment

Shopify provides the @shopify/shopify-app-remix-testing package for integration testing. Deploy your app on Oxygen, Vercel, Fly.io, or any Node.js hosting platform. For production, ensure your app handles rate limiting (Admin API: 2 calls per second per store), implements proper error boundaries, and logs all API interactions for debugging.

Building a Shopify app is one of the fastest ways to create a recurring SaaS revenue stream. SoniNow's web development team has extensive experience building, deploying, and maintaining custom Shopify apps. Get in touch to bring your app idea to life.