Build Shopify Hydrogen Storefronts Visually
Weaverse brings a visual editing layer to Shopify Hydrogen, so teams can launch headless storefronts with React Router, reusable components, live previews, and merchant-friendly content editing.Get Started
Create your first Weaverse storefront in 5 minutes
Open Studio
Launch the visual editor and start building
Choose Your Path
I'm New to Weaverse
Start here if you’ve never used Weaverse before. Get up and running in 5 minutes.
I'm a Developer
Jump into component development, API reference, and advanced customization.
I'm a Merchant
Learn to use Weaverse Studio visually without writing code.
Ecosystem at a Glance
Everything you need to build, customize, and deploy Hydrogen storefronts.Hydrogen SDKs
Core, React, and Hydrogen packages for building custom components.
CLI Tools
Scaffold projects, run dev servers, and manage deployments.
MCP Server
AI agent integration for Claude, Cursor, and other tools.
Content API
Headless content delivery for pages, themes, and languages.
Visual Studio
Drag and drop editor with real-time preview.
Hydrogen Themes
Production-ready Pilot theme with full customization.
Develop
Build Hydrogen components and expose editable settings through Weaverse schemas.
Edit
Let merchants arrange sections, update copy, and preview pages in Studio.
Ship
Deploy the storefront to Shopify Oxygen, Docker, or Cloudflare Workers.
Quick Start
1
Install
Scaffold a new Weaverse Hydrogen project:
2
Connect
Add your Weaverse project ID and start the dev server:Your storefront runs at
http://localhost:3456 with live connection to Weaverse Studio.3
Customize
Open Weaverse Studio, drag components onto pages, configure settings, and publish your changes — all with real-time preview.
1. Create the project
Use the AI-agent prompt from onboarding or run the Weaverse CLI command.
2. Preview locally
Start the Hydrogen dev server and load the storefront at
localhost:3456.3. Connect real data
Swap demo content for your Shopify store data when you are ready.
Popular Guides
Creating Components
Build custom React components for your storefront
Component Schema
Define component structure, settings, and behavior
Input Settings
Configure component settings with the input system
Data Fetching
Load Shopify data with loaders and the Storefront API
Global Sections
Reusable sections shared across all pages
Deployment
Deploy to Oxygen, Docker, or Cloudflare Workers
Developer Resources
API Reference
Complete documentation for hooks, components, utilities, and types
Content API
REST endpoints for pages, projects, themes, and languages
Troubleshooting
Solutions for common issues and error messages
Community
Join the Slack community, contribute on GitHub, stay updated