About

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

Shopify Reference Architecture

Name: shopify-reference-architecture
Author: jeremylongshore

Overview

Production-ready architecture based on Shopify's official Remix app template. Covers project structure, session storage with Prisma, extension architecture, and the recommended app patterns.

Prerequisites

Understanding of Remix framework basics
Shopify CLI 3.x installed
Familiarity with Prisma ORM

Instructions

Step 1: Official Project Structure (Remix Template)

my-shopify-app/
├── app/
│   ├── routes/
│   │   ├── app._index.tsx          # Main app dashboard
│   │   ├── app.products.tsx        # Product management page
│   │   ├── app.settings.tsx        # App settings
│   │   ├── auth.$.tsx              # OAuth catch-all route
│   │   ├── auth.login/
│   │   │   └── route.tsx           # Login page
│   │   └── webhooks.tsx            # Webhook handler
│   ├── shopify.server.ts           # Shopify API config (singleton)
│   ├── db.server.ts                # Database connection
│   └── root.tsx
├── extensions/
│   ├── theme-app-extension/        # Theme blocks for Online Store
│   ├── checkout-ui/                # Checkout UI extension
│   └── product-discount/           # Shopify Function
├── prisma/
│   ├── schema.prisma               # Database schema
│   └── migrations/
├── shopify.app.toml                # App configuration
├── shopify.web.toml                # Web process config
├── remix.config.js
└── package.json

Step 2: Core App Configuration

The shopify.server.ts singleton configures the API client, session storage, webhooks, and auth hooks. It uses LATEST_API_VERSION from @shopify/shopify-api and exports all auth/session helpers.

See Core App Configuration for the complete implementation.

Step 3: Session Storage with Prisma

The Prisma schema defines the required Session model (matching Shopify's session fields) plus your app's custom models. Use SQLite for dev and PostgreSQL for production.

See Prisma Session Storage for the complete schema.

Step 4: Route Pattern — Authenticated Admin Page

Each app route calls authenticate.admin(request) to get a pre-authenticated GraphQL client, then renders with Polaris components. Data flows through Remix loaders.

See Authenticated Admin Route for the complete implementation.

Step 5: Theme App Extension

Theme app extensions add customizable blocks to the Online Store. Each block defines a Liquid template with a {% schema %} JSON block for merchant-facing settings.

See Theme App Extension for the complete implementation.

Output

Remix app with Shopify authentication
Prisma session storage (production-ready)
Authenticated admin routes with GraphQL data loading
Theme app extension for Online Store customization

Error Handling

Issue	Cause	Solution
Session not found	DB not migrated	Run `npx prisma migrate dev`
Auth redirect loop	Missing `APP_UNINSTALLED` handler	Implement webhook to clean sessions
Extension not showing	Not deployed	Run `shopify app deploy`
Polaris styles missing	Missing provider	Wrap app in `<AppProvider>`

Examples

Quick Scaffold

# Fastest way to start — uses official template
shopify app init --template remix

# Or clone directly
npx degit Shopify/shopify-app-template-remix my-shopify-app
cd my-shopify-app
npm install
shopify app dev

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-refer-87328b/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-refer-87328b.ocm.jsonjson

{
  "ocm": "1",
  "id": "jeremylongshore-tons-of-skills-marketplace-shopify-refer-87328b",
  "kind": "skill",
  "name": "shopify-reference-architecture",
  "description": "Implement Shopify app reference architecture with Remix, Prisma session storage, and the official app template patterns. Use when setting up a new Shopify app, structuring a Remix-based project, or configuring Prisma session storage for production. Trigger with phrases like \"shopify architecture\", \"shopify app structure\", \"shopify project layout\", \"shopify Remix template\", \"shopify app design\".",
  "publisher": "jeremylongshore",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "saas",
      "ecommerce",
      "shopify",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Implement Shopify app reference architecture with Remix, Prisma session storage, and the official app template patterns. Use when setting up a new Shopify app, structuring a Remix-based project, or configuring Prisma session storage for production. Trigger with phrases like \"shopify architecture\", \"shopify app structure\", \"shopify project layout\", \"shopify Remix template\", \"shopify app design\"."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/jeremylongshore/tons-of-skills-marketplace",
      "path": "plugins/saas-packs/shopify-pack/skills/shopify-reference-architecture/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/jeremylongshore/tons-of-skills-marketplace/blob/HEAD/plugins/saas-packs/shopify-pack/skills/shopify-reference-architecture/SKILL.md",
      "key": "jeremylongshore/tons-of-skills-marketplace/plugins/saas-packs/shopify-pack/skills/shopify-reference-architecture/SKILL.md"
    },
    "compatibility": "Designed for Claude Code",
    "allowed_tools": [
      "Read,",
      "Grep"
    ],
    "license": "MIT"
  },
  "instructions": "# Shopify Reference Architecture\n\n## Overview\n\nProduction-ready architecture based on Shopify's official Remix app template. Covers project structure, session storage with Prisma, extension architecture, and the recommended app patterns.\n\n## Prerequisites\n\n- Understanding of Remix framework basics\n- Shopify CLI 3.x installed\n- Familiarity with Prisma ORM\n\n## Instructions\n\n### Step 1: Official Project Structure (Remix Template)\n\n```\nmy-shopify-app/\n├── app/\n│   ├── routes/\n│   │   ├── app._index.tsx          # Main app dashboard\n│   │   ├── app.products.tsx        # Product management page\n│   ",
  "cost": {
    "context_tokens": 995
  }
}

Fetch it by URL: GET /api/v1/registry/jeremylongshore-tons-of-skills-marketplace-shopify-refer-87328b/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.