Skip to main content

​
Getting Started with Weaverse

Welcome to Weaverse - the revolutionary theme customizer and CMS for Shopify Hydrogen, now powered by React Router v7. Whether you’re a developer building custom storefronts or a merchant looking to create stunning e-commerce experiences, this guide will get you started quickly.

​
What is Weaverse?

Weaverse bridges the gap between developer flexibility and merchant usability by combining Shopify Hydrogen with visual page building capabilities:
  • Visual Studio: Drag-and-drop page builder for merchants
  • Component Library: Pre-built sections and reusable components
  • Developer APIs: Full control over components, data, and styling
  • Performance First: Zero runtime overhead with optimized builds
  • Type Safety: Full TypeScript support with React 19 Compiler
  • React Router v7: Modern routing with enhanced developer experience

​
Architecture Overview

Weaverse projects follow a modern Hydrogen structure optimized for visual editing: 
my-hydrogen-store/
├── app/
│   ├── components/          # Reusable UI components
│   ├── sections/            # Weaverse page sections  
│   ├── routes/              # React Router v7 pages
│   ├── lib/                 # Utilities and helpers
│   └── weaverse/            # Weaverse configuration
├── public/                  # Static assets
├── weaverse.config.ts       # Theme configuration
└── package.json
Key Concepts:
  • Components: Reusable UI elements with configurable properties
  • Sections: Page-level building blocks for layout structure
  • Pages: Collections of sections forming complete experiences
  • Studio: External visual editor at studio.weaverse.io

​
New to Weaverse v5?

🚀 Major Update: Weaverse v5 brings React Router v7 support and significant improvements. Check out our v5 Migration Guide for upgrade instructions.

​
Learning Path

  1. Start Here: Follow our Quickstart Guide
  2. Understand: Read Core Concepts to learn how Weaverse works
  3. Build: Follow the Development Guide to create components
  4. Deploy: Use our Deployment Guide to go live

​
Need Help?

Ready to build amazing Shopify storefronts? Let’s get started! 🚀
⌘I