Shopify Essentials: Custom App Development for Shopify

11 minute read Shopify Essentials · Part 5

Learn how to approach custom app development in Shopify, from embedded app structure to authentication, data integration, and admin UX.

Sometimes, Shopify’s built-in features or app store just won’t cut it. That’s when custom app development comes in - giving you total control over logic, UI, and data handling.

Whether you’re building for internal use or broader distribution, here’s how to approach Shopify custom apps effectively.

1. Choose Your Stack

Most Shopify apps today are built using:

  • Node.js + Express (official boilerplates)
  • Next.js / Remix for embedded React UI
  • Laravel or Rails for standalone backends
  • PostgreSQL / MongoDB for custom storage

Shopify CLI v3 scaffolds modern apps out of the box:

npm create @Shopify/app@latest

2. Embedded vs Standalone

Embedded apps:

  • Run inside Shopify Admin via iframe
  • Use App Bridge for navigation and permissions

Standalone apps:

  • External tools (e.g. backend CRMs, automation tools)
  • Don’t require embedded UI

Most custom solutions benefit from embedded UX with OAuth.

3. App Bridge + Polaris UI

Use Shopify App Bridge for authentication, redirects, and UI actions. Use Polaris React for styling and consistent UX.

<AppProvider i18n={{}}> ... </AppProvider>

Integrate navigation, modals, toasts using App Bridge hooks.

4. Secure OAuth Authentication

Follow Shopify’s OAuth flow using:

  • Shopify CLI for setup
  • dotenv for storing app credentials
  • Callback URL on your app server

Example OAuth flow:

app.get("/auth/callback", async (req, res) => {
  const { shop, access_token } = await authCallbackHandler(req);
  storeToken(shop, access_token);
  res.redirect(`/${shop}`);
});

5. Use Shopify APIs

Call REST or GraphQL APIs with access tokens:

const response = await fetch(`https://${shop}/admin/api/2024-10/products.json`, {
  headers: {
    "X-Shopify-Access-Token": token,
  },
});

GraphQL preferred for complex queries:

{
  shop {
    name
    myshopifyDomain
  }
}

6. Webhooks & Background Tasks

Use webhooks for triggers:

  • orders/create
  • app/uninstalled
  • products/update

Queue background tasks via Sidekiq, Laravel Queues, or Node workers.

7. Admin UI Best Practices

  • Keep interfaces clean and focused
  • Use Polaris components natively
  • Paginate large datasets with App Bridge List views
  • Save settings to app’s DB, not Shopify metafields (unless exposed intentionally)

Real-World Example

In a custom product bundling app project:

  • Built with Node + Next.js + PostgreSQL
  • Embedded UI for merchants to build kits
  • Webhooks synced stock across variants

Launching