Shopify architecture variants
425 plugins, 2,810 skills, 200 agents for Claude Code. Open-source marketplace at tonsofskills.com with the ccpi CLI package manager.
npx -y skills add jeremylongshore/claude-code-plugins-plus-skills --skill shopify-architecture-variantsAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
What its author says it does
Copied from the file, not written here
'Choose between Shopify app architectures: embedded Remix app, headless storefront with
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
4.3 KB, as published. Nobody here has run it
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