This is Running Live in Production: Built with Sanity, Shopify Hydrogen, Sanity Functions, and Sanity SDK Apps. This monorepo provides a complete headless commerce solution with advanced content management, real-time notifications, and automated marketing campaigns.

View the live Sanity Market

This repository contains multiple interconnected systems:

• 🌐 Frontend: React Router-based Hydrogen storefront
• 📝 Studio/CMS: Sanity Studio for content management
• ⚡ Functions: Serverless functions for automation
• 📱 Apps: Custom Sanity SDK applications
• 🔄 Integrations: Shopify, Algolia, and Klaviyo

swag-store/
├── web/                          # Hydrogen storefront (React Router)
├── sanity/                       # Sanity Studio CMS
├── functions/                    # Sanity Functions (serverless)
├── sanity-apps/                  # Custom Sanity SDK Apps
│   ├── notifications/            # Notification management app
├── data/                         # Sample data and fixtures
└── docs/                         # Documentation and guides

• Node.js 18+ (required by Hydrogen)
• pnpm 10.12.4+ (package manager)
• Shopify CLI ~3.85.4 (for Hydrogen development)
• Sanity CLI (for CMS management)
• TypeScript 5.2.2+ (for type checking)

1. Clone the repository

   git clone <repository-url>
   cd swag-store

2. Install dependencies

   pnpm install

3. Set up environment variables

   # Copy environment templates
   cp web/.env.example web/.env
   cp sanity/.env.example sanity/.env

4. Configure your environment

   • Update web/.env with Shopify credentials
   • Update sanity/.env with Sanity project details
   • Configure function environment variables

Start all services in development mode:

# Start everything (web + sanity + functions)
pnpm dev

# Or start individual services
pnpm dev:web      # Hydrogen storefront (with codegen)
pnpm dev:sanity   # Sanity Studio

# Additional development commands
pnpm typecheck    # Run TypeScript type checking
pnpm lint         # Run ESLint
pnpm codegen      # Generate GraphQL types and Sanity types

Location: web/

A modern e-commerce storefront built with Shopify Hydrogen and React Router v7.

• 🛍️ Product Catalog: Dynamic product listings and collections
• 🌍 Internationalization: Multi-language and multi-currency support
• 📱 Responsive Design: Mobile-first responsive layout
• ⚡ Performance: Optimized for Core Web Vitals
• 🎨 Custom Components: Reusable UI components and layouts

• Framework: Shopify Hydrogen 2025.7.1
• Routing: React Router 7.12.0 (file-based routing)
• Styling: Tailwind CSS 4.1.6
• State Management: React Context + Hooks
• Data Fetching: GraphQL + GROQ queries
• React: 18.3.1
• TypeScript: 5.2.2

The application uses React Router v7's file-based routing system with locale support:

• ($locale)._index.tsx - Homepage with featured content
• ($locale).products.$handle.tsx - Product detail pages
• ($locale).collections.$handle.tsx - Collection pages
• ($locale).collections._index.tsx - Collections listing
• ($locale).collections.all.tsx - All products page
• ($locale).pages.$handle.tsx - CMS-managed pages
• ($locale).cart.tsx - Shopping cart
• ($locale).cart.$lines.tsx - Cart line items
• ($locale).policies.$handle.tsx - Policy pages
• ($locale).newsletter.ts - Newsletter subscription
• ($locale).subscribe.tsx - Subscription management
• ($locale).discount.$code.tsx - Discount code handling
• [robots.txt].tsx - SEO robots file
• api.preview.ts - Sanity preview API

Location: sanity/

A powerful content management system with custom schemas and workflows built with Sanity v4.10.1.

• Products: Shopify-synced product data
• Collections: Product groupings and categories
• Pages: Custom CMS pages and content
• Emails: Craft marketing campaigns for Klaviyo
• Marketing Campaigns: Campaign management
• Notifications: System notifications
• Settings: Site-wide configuration

• 🔄 Shopify Sync: Automatic product synchronization
• 📊 Analytics: Built-in content analytics with Sanity Assist
• 🎯 Hotspots: Interactive image hotspots with custom plugin
• 📱 Preview: Live preview of content
• 🔧 Custom Actions: Automated content workflows
• 🤖 AI Assist: Content generation and optimization
• 📸 Media Management: Advanced asset handling with custom plugin
• 🛍️ Back in Stock Management: Custom Back in Stock syncing + Customer management

• Custom Inputs: Specialized input components
• Document Actions: Automated workflows
• Media Management: Advanced asset handling
• Validation: Content validation rules
• Permissions: Role-based access control

Location: functions/

Serverless functions for automation and integrations.

# Deploy a specific function
cd functions/[function-name]
sanity functions deploy

# Deploy all functions
sanity functions deploy --all

Location: sanity-apps/

Custom applications built with the Sanity SDK for specialized workflows.

Purpose: System notification management and monitoring

Features:

• Real-time notification dashboard
• Notification filtering and categorization
• Automated cleanup and archiving
• Webhook integration for external systems

Usage:

cd sanity-apps/notifications
pnpm dev

# Shopify Configuration
SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
SHOPIFY_STOREFRONT_ACCESS_TOKEN=your_token
SHOPIFY_STOREFRONT_API_VERSION=2024-01

# Sanity Configuration
SANITY_PROJECT_ID=your_project_id
SANITY_DATASET=production
SANITY_API_TOKEN=your_token

# Algolia (Optional)
ALGOLIA_APP_ID=your_app_id
ALGOLIA_SEARCH_API_KEY=your_key

SANITY_PROJECT_ID=your_project_id
SANITY_DATASET=production
SANITY_API_TOKEN=your_token

SANITY_PROJECT_ID=your_project_id
SANITY_DATASET=production
SANITY_API_TOKEN=your_token
SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
SHOPIFY_ACCESS_TOKEN=your_token

The repository uses pnpm workspaces for monorepo management:

{
  "workspaces": [
    "sanity",
    "web"
  ]
}

Deploy to Shopify Oxygen:

cd web
pnpm build
shopify hydrogen deploy

# Or use the Hydrogen CLI directly
npx @shopify/cli hydrogen deploy

Deploy to Sanity:

cd sanity
pnpm build
sanity deploy

Deploy all functions:

sanity functions deploy --all

Deploy Sanity SDK apps:

cd sanity-apps/[app-name]
pnpm build
sanity deploy

• Sanity API: docs.sanity.io
• Shopify Storefront API: shopify.dev
• Hydrogen: hydrogen.shopify.dev

• ESLint: Configured for TypeScript and React
• Prettier: Code formatting
• TypeScript: Strict type checking

# Run type checking
pnpm typecheck

# Run linting
pnpm lint

# Run tests (when available)
pnpm test

We use the Sanity Connect for Shopify app

• Product Sync: Automatic product synchronization
• Image Management: Asset upload and optimization
• Inventory: Real-time inventory updates

• Search: Advanced product search
• Filtering: Dynamic filtering capabilities
• Analytics: Search analytics and insights

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

• Follow TypeScript best practices
• Use meaningful commit messages
• Update documentation for new features
• Test changes across all workspaces

This project is licensed under the MIT License - see the LICENSE file for details.

This repo is meant to be an educational reference, this is not meant to be a goto market starter repo for building out custom commerce experiences. If you have questions about implementation strategy feel free to raise questions in our Discord to start a conversation.

This project has been migrated from Remix to React Router v7, following the official migration guide. Key changes include:

• File-based routing: Uses @react-router/fs-routes for automatic route generation
• Import changes: All routing imports now use react-router instead of @remix-run/react
• Hydrogen integration: Uses @shopify/hydrogen/react-router-preset for Hydrogen compatibility
• Type safety: Full TypeScript support with generated types

• Hydrogen: Updated to 2025.7.1 with latest features
• Sanity: Updated to v4.10.1 with AI Assist and improved performance
• React Router: Migrated to v7.12.0 with file-based routing
• Tailwind CSS: Updated to v4.1.6 with improved performance

• Sanity Documentation
• Shopify Hydrogen
• React Router v7
• Remix to React Router Migration
• Tailwind CSS

Built with ❤️ using Sanity, Shopify Hydrogen, and modern web technologies.