| name | shopify-architecture-variants |
| description | Choose between Shopify app architectures: embedded Remix app, headless storefront with
Hydrogen, standalone integration, or theme app extension.
Use when starting a new Shopify project and deciding which architecture pattern to follow.
Trigger with phrases like "shopify architecture decision", "shopify embedded vs headless",
"shopify Hydrogen", "shopify app types", "which shopify architecture".
|
| allowed-tools | Read, Grep |
| version | 2.7.0 |
| license | MIT |
| author | Jeremy Longshore <jeremy@intentsolutions.io> |
| tags | ["saas","ecommerce","shopify"] |
| compatibility | Designed for Claude Code |
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)
Admin panel apps, merchant tools, dashboards. Uses @shopify/shopify-app-remix with OAuth and Polaris UI inside the Shopify admin.
See Embedded Remix App for the project structure and authenticated loader pattern.
Variant B: Headless Storefront (Hydrogen)
Custom storefronts and unique shopping experiences. Uses the Storefront GraphQL API, hosted on Shopify Oxygen or any edge platform.
See Hydrogen Storefront for the project structure and Storefront API loader.
Variant C: Backend Integration (Standalone)
ERP sync, warehouse management, analytics. Uses @shopify/shopify-api with a custom app access token -- no OAuth or merchant UI needed.
See Backend Integration for the project structure and client setup.
Variant D: Theme App Extension Only
Storefront widgets, product reviews, badges. Runs entirely in the merchant's storefront using Liquid templates -- no server needed.
See Theme App Extension for the project structure and Liquid block example.
Decision Matrix
| Factor | Embedded App | Hydrogen | Backend Integration | Theme Extension |
|---|
| Use case | Admin tools | Custom storefront | System sync | Storefront widgets |
| Merchant UI | Yes (in admin) | Yes (storefront) | No | Yes (in theme) |
| API | Admin GraphQL | Storefront GraphQL | Admin GraphQL | Liquid objects |
| Auth | OAuth | Storefront token | Custom app token |
