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.

Why Custom Apps Are a Strategic Choice

Custom apps exist to solve problems themes and metafields cannot:

  • Cross-system integration
  • Complex business logic
  • Operational tooling for staff

They add power, but also responsibility.

Design Rationale and Trade-offs

Embedded UX reduces friction

Apps that feel native are adopted. Apps that feel bolted-on are ignored.

OAuth complexity buys security

The setup cost prevents catastrophic token leaks later.

GraphQL reduces over-fetching

Especially important on admin dashboards and reports.

Fact Checks and Clarifications

  • Shopify CLI scaffolds secure OAuth flows by default.
  • Polaris is not optional for public apps.
  • Webhooks are eventually consistent, not real-time.

Key Takeaways

  • Build apps for maintainability first.
  • Treat auth and tokens as critical infrastructure.
  • Prefer GraphQL for complex reads.

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

Need Shopify help? I work with retailers and agencies across Liverpool and Merseyside. Learn more about my Shopify services or get in touch.