shopify-architecture-variants
'Choose between Shopify app architectures: embedded Remix app, headless
Allowed Tools
Provided by Plugin
shopify-pack
Claude Code skill pack for Shopify (30 skills)
Installation
This skill is included in the shopify-pack plugin:
/plugin install shopify-pack@claude-code-plugins-plusClick to copy
Instructions
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 | None |
| Server needed | Yes | Yes | Yes | No |
| Complexity | Medium | High | Low-Medium | Low |
| App Store eligible | Yes | N/A | Yes (custom apps) | Yes |
| Time to build | 2-4 weeks | 4-8 weeks | 1-2 weeks | Days |
Output
- Architecture variant selected based on requirements
- Project structure and key packages identified
- Authentication strategy determined
- Technology stack defined
Error Handling
| Issue | Cause | Solution |
|---|---|---|
| "Should I use Hydrogen?" | Want custom storefront | Yes if replacing Online Store, no if adding to admin |
| "Embedded vs standalone?" | Need merchant UI? | Embedded = yes. Standalone = backend-only |
| "Theme extension limits?" | Too complex for Liquid | Combine: extension for UI + embedded app for logic |
| Over-engineering | Started with microservices | Start with Variant A or C, evolve when needed |
Examples
Quick Start by Variant
# Variant A: Embedded Remix App
shopify app init --template remix
# Variant B: Hydrogen Storefront
npm create @shopify/hydrogen
# Variant C: Backend Integration
mkdir shopify-sync && cd shopify-sync
npm init -y && npm install @shopify/shopify-api dotenv
# Variant D: Theme Extension
shopify app init
shopify app generate extension --type theme