Weaverse
Weaverse is a website builder that allows users to create high-performance eCommerce storefronts. It utilizes headless frameworks like Shop...
Last verified:
What is Weaverse?
Weaverse is the first AI-powered visual page builder designed specifically for Shopify Hydrogen themes. It enables Shopify store owners, developers, and agencies to create lightning-fast headless ecommerce stores using React Router v7, TypeScript, and modern React patterns without writing code. The platform bridges the gap between Shopify's robust e-commerce backend and the flexibility of a custom React frontend.
Key features include a visual drag-and-drop page builder with sections-based CMS that empowers merchants to update content directly without touching code, type-safe TypeScript SDKs (@weaverse/core, @weaverse/react, @weaverse/hydrogen) for building custom Hydrogen components, and an AI Assistant that generates complete page layouts and section configurations from simple descriptions. The platform offers Shopify Native integration with direct Storefront API access for instant product and collection fetching, edge caching at 200+ global data centers for instant loading regardless of user location, and automatic asset optimization with images resized and served via Shopify CDN.
Weaverse is built for enterprise builders, Shopify Plus merchants, development agencies, and solo developers who want to go headless without the complexity. It includes the Pilot theme as a comprehensive starter theme with complete e-commerce sections, responsive design system with Tailwind CSS, advanced product pages, cart integration, SEO optimization, and multi-language support. The platform powers production storefronts for high-volume brands like Roland (Brazil), Baltzar menswear, Huckleberry Roasters, and Karma and Luck.
Weaverse pricing
Pricing model: Freemium
Weaverse offers three pricing plans plus free development access. Starter (Pay as You Go): $0/month + usage with 10,000 view credits included, $2 per additional 10,000 views, includes visual editor, AI generation & support, global APIs CDN & cache, community support. Growth (Flagship): $59/month + usage with 500,000 view credits included, $2 per additional 10,000 views, includes priority support, multilingual/localization, 2.5x more capacity, history revision. Scale (Enterprise): $299/month + usage with 3,000,000 view credits included, $2 per additional 10,000 views, includes 24/7 premium support, content scheduled publishing, 2x more capacity, custom integrations. All plans include unlimited API requests, theme customizer, visual editing, live preview, global API CDN, global sections, native Shopify image CDN, app integration support, commerce components, and usage dashboard. Free for development stores and sandboxes with no setup fees, cancel anytime.
Weaverse pros
- First-ever Shopify Hydrogen Theme Customizer
- AI generates production-ready Hydrogen themes from descriptions in minutes
- Visual drag-and-drop editor requires zero coding for merchants
- Type-safe TypeScript SDKs with full IntelliSense support
- Zero runtime JavaScript overhead (~0KB from page builder)
- Server-side rendered with React Router v7 for optimal performance
- Edge caching at 200+ global data centers
- Automatic image optimization with WebP/AVIF conversion
- Native Shopify Storefront API integration
- Live preview with real-time Studio connection
- Pilot theme provides excellent foundation saving development time
- Git-based version control integration for developers
- No script conflicts between different page builder apps
- 40-60% faster initial page loads compared to Liquid
- 90+ Lighthouse performance scores with Core Web Vitals compliance
Weaverse cons
- Built-in A/B testing not currently available
- Single-editor mode per page prevents simultaneous multi-user editing
- No native mobile app for editing (tablet-optimized web only)
- Requires React/TypeScript knowledge for building custom components
- Can I use Weaverse without visual editor has limited value
- Can multiple team members work simultaneously limited to different pages
- Auto-save and undo/redo features coming soon (not yet available)
- TypeScript strict mode disabled by default for Shopify compatibility
Frequently asked questions about Weaverse
What is Weaverse and how is it different from Shopify Liquid themes?
Weaverse is a visual page builder and CMS designed specifically for Shopify Hydrogen storefronts. Unlike traditional Liquid themes, it uses modern architecture with React Router v7, TypeScript, and modern React patterns. It offers visual editing with drag-and-drop interface for merchants with zero runtime JavaScript overhead, full component-level customization while maintaining merchant usability, server-side rendering with statically optimized edge-ready performance, and native Shopify Storefront API integration with advanced caching.
Do I need React/TypeScript knowledge to use Weaverse?
For merchants, no coding knowledge required as Weaverse Studio provides an intuitive visual interface for building pages, managing content, and customizing designs. For developers building custom components, yes - you need React knowledge (hooks, components, props), basic TypeScript understanding, familiarity with Shopify Hydrogen and React Router v7, and understanding of modern CSS (Tailwind recommended).
What's the difference between Weaverse Studio and the SDK?
Weaverse Studio is a Shopify app installed from the App Store that provides a visual page builder interface for merchants to create and edit content. The Weaverse SDK includes development packages (@weaverse/core, @weaverse/react, @weaverse/hydrogen) that developers use to create custom components and themes. Developers build components with the SDK, then merchants use Studio to visually arrange and configure these components.
What are the system requirements?
Development environment requires Node.js 22+ (required), npm/pnpm package manager, Git for version control, and a modern code editor (VS Code/Cursor recommended). Browser support includes Chrome 90+, Firefox 88+, Safari 14+, Edge 90+, and mobile browsers with ES2020 support. Shopify requirements include any Shopify plan (Basic to Plus), Storefront API access, and Hydrogen app for production deployment.
Is Weaverse production-ready?
Yes! Weaverse powers production storefronts with React Router v7 stable release support, comprehensive TypeScript coverage, extensive testing and performance optimization, enterprise-grade security and scalability, and active maintenance with regular updates. It powers production stores for high-volume Shopify Plus merchants including Roland (Brazil), Baltzar, Huckleberry Roasters, Karma and Luck, Bubble Goods, NORWOOD SAWMILLS, Timothy London, and Vasuma Eyewear.
How does Weaverse compare to other page builders in performance?
Weaverse offers unique advantages including React Router v7 (SSR) for optimal performance, TypeScript support for better developer experience, component-based architecture for reusability, and no runtime JavaScript bloat. Compared to Liquid apps that add separate scripts with different frameworks causing script conflicts and bloated sites, Weaverse uses a single React-based bundle optimized with Vite for unified framework, no conflicts, and optimized loading. Real-world results include 40-60% faster initial page loads, 90+ Lighthouse performance scores, and improved Core Web Vitals metrics.
Can I try Weaverse before committing?
Yes! Several ways to evaluate Weaverse include trying the visual editor at studio.weaverse.io/demo, browsing the Pilot theme live storefront at pilot.weaverse.dev, downloading and testing development packages locally as free SDK, following the 5-minute Quickstart installation guide, and getting help in the Slack community at wvse.cc/weaverse-slack.
How does server-side rendering work in Weaverse?
Weaverse components are fully server-side rendered with build time static page data fetched and cached, request time server rendering of React components with data, client hydration with minimal JavaScript for interactivity, client-side routing with React Router v7 for navigation, and progressive enhancement for dynamic content data loading. This ensures fast initial page loads and SEO optimization.
What's included in the Pilot theme?
The Pilot theme is a comprehensive starter theme including complete e-commerce sections (product grids, featured collections, hero sections), responsive design system with Tailwind CSS, advanced product pages with variant selection, cart and checkout integration, SEO optimization and structured data, multi-language and multi-market support, and performance optimizations with Core Web Vitals compliance.
How do I create a custom component from scratch?
Create a component file in app/sections/my-section.tsx using createSchema from @weaverse/hydrogen to define the component with type, title, and settings inputs. The component function receives props with your defined settings and returns React JSX. Export the component as default and export the schema. Then register the component in app/weaverse/components.ts by importing it and adding it to the components array. This makes it available in Weaverse Studio for merchants to drag and configure.