shopify-architecture-variants

# Shopify Architecture Variants ## Overview Four validated architecture patterns for building on Shopify. Choose based on your use case: embedded admin app, headless storefront, backend integration, or theme extension. ## Prerequisites - Clear understanding of what you're building - Knowledge of your target merchants - Understanding of Shopify's app ecosystem ## Instructions ### Variant A: Embedded Admin App (Remix) **Best for:** Admin panel apps, merchant tools, dashboards, order management **When to use:** You need to add functionality to the Shopify admin for merchants. ``` my-shopify-app/ ├── app/ │ ├── routes/ │ │ ├── app._index.tsx # Dashboard (inside Shopify admin) │ │ ├── app.products.tsx # Feature pages │ │ ├── auth.$.tsx # OAuth handler │ │ └── webhooks.tsx # Webhook receiver │ ├── shopify.server.ts # @shopify/shopify-app-remix │ └── root.tsx ├── extensions/ # Optional extensions ├── prisma/schema.prisma # Session + app data ├── shopify.app.toml └── package.json ``` **Key packages:** `@shopify/shopify-app-remix`, `@shopify/polaris`, `@shopify/app-bridge-react` **API used:** Admin GraphQL API (server-side via `authenticate.admin()`) **Auth:** OAuth with session token exchange (handled by the Remix adapter) ```typescript // Authenticated loader — runs server-side inside Shopify admin export async function loader({ request }: LoaderFunctionArgs) { const { adm...