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)

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

Resources

• Shopify App Types
• Hydrogen Framework
• Theme App Extensions
• Custom Apps