About

Imported from jeremylongshore/tons-of-skills-marketplace (plugins/saas-packs/shopify-pack/skills/shopify-architecture-variants/SKILL.md). Install upstream with npx skills add jeremylongshore/tons-of-skills-marketplace --skill shopify-architecture-variants. Copyright stays with the author (MIT).

Shopify Architecture Variants

Name: shopify-architecture-variants
Author: jeremylongshore

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

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/jeremylongshore-tons-of-skills-marketplace-shopify-archi-ba081f/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

jeremylongshore-tons-of-skills-marketplace-shopify-archi-ba081f.ocm.jsonjson

{
  "ocm": "1",
  "id": "jeremylongshore-tons-of-skills-marketplace-shopify-archi-ba081f",
  "kind": "skill",
  "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\".",
  "publisher": "jeremylongshore",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "saas",
      "ecommerce",
      "shopify",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "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\"."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/jeremylongshore/tons-of-skills-marketplace",
      "path": "plugins/saas-packs/shopify-pack/skills/shopify-architecture-variants/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/jeremylongshore/tons-of-skills-marketplace/blob/HEAD/plugins/saas-packs/shopify-pack/skills/shopify-architecture-variants/SKILL.md",
      "key": "jeremylongshore/tons-of-skills-marketplace/plugins/saas-packs/shopify-pack/skills/shopify-architecture-variants/SKILL.md"
    },
    "compatibility": "Designed for Claude Code",
    "allowed_tools": [
      "Read,",
      "Grep"
    ],
    "license": "MIT"
  },
  "instructions": "# Shopify Architecture Variants\n\n## Overview\n\nFour validated architecture patterns for building on Shopify. Choose based on your use case: embedded admin app, headless storefront, backend integration, or theme extension.\n\n## Prerequisites\n\n- Clear understanding of what you're building\n- Knowledge of your target merchants\n- Understanding of Shopify's app ecosystem\n\n## Instructions\n\n### Variant A: Embedded Admin App (Remix)\n\nAdmin panel apps, merchant tools, dashboards. Uses `@shopify/shopify-app-remix` with OAuth and Polaris UI inside the Shopify admin.\n\nSee [Embedded Remix App](references/embe",
  "cost": {
    "context_tokens": 931
  }
}

Fetch it by URL: GET /api/v1/registry/jeremylongshore-tons-of-skills-marketplace-shopify-archi-ba081f/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.