| 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".
|
| allowed-tools | Read, Grep |
| version | 2.7.0 |
| license | MIT |
| author | Jeremy Longshore <jeremy@intentsolutions.io> |
| tags | ["saas","ecommerce","shopify"] |
| compatibility | Designed for Claude Code |
Shopify Reference Architecture
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.
