Themes & Templates
Weaverse themes are complete Shopify Hydrogen storefronts that combine code structure with visual editing capabilities. Whether you’re using existing themes or building your own, this section covers everything you need to know.Theme System Overview
Weaverse themes consist of:- Components: Reusable UI elements with configurable properties
- Sections: Page-level building blocks
- Templates: Page layouts for different content types
- Theme Settings: Global configuration options
- Styling: CSS, Tailwind, and design tokens
Available Themes
Pilot Theme
Our flagship starter theme showcasing Weaverse’s capabilities:- Overview - Theme features and structure
- Sections - Available page sections
- Customization - Fonts, colors, and styling
Creating Themes
Theme Development Guide
Complete guide to building your own Weaverse theme from scratch.Theme Gallery
Browse the official gallery of ready-to-use Weaverse Hydrogen themes.Theme Architecture
Key Features
- Visual Editing: All components work in Weaverse Studio
- Type Safety: Full TypeScript support throughout
- Performance: Hydrogen server rendering and React Router route splitting
- SEO Ready: Route loaders can combine Shopify and Weaverse SEO data
- Responsive Foundation: Responsive layout and styling patterns
- Shopify Native: Deep integration with Shopify APIs
Theme Guidelines
When creating themes, follow these best practices:- Accessibility: Use semantic HTML and ARIA labels
- Performance: Optimize images and minimize bundle size
- Customization: Provide meaningful settings for merchants
- Documentation: Include clear setup and customization guides
- Testing: Test across different screen sizes and browsers
Getting Started
- Explore: Check out the Pilot theme
- Learn: Follow the Theme Development Guide
- Build: Create your own theme using our Development Guide
- Share: Share your theme with the community