Skip to main content

​
Themes & Templates

Weaverse themes are complete Shopify Hydrogen storefronts, built on React Router or Next.js, 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

All Weaverse themes are open source.

​
Pilot

Our flagship React Router starter theme. See its overview, sections and customization guides.
Weaverse/pilot
Loading repository data...

​
Forward

The Next.js App Router starter theme, built on @weaverse/next. See its overview.
Weaverse/forward
Loading repository data...

​
Aspen, Maison and Naturelle

React Router themes for specific store types, also listed in the theme gallery.
Weaverse/aspen
Loading repository data...
Weaverse/maison
Loading repository data...
Weaverse/naturelle
Loading repository data...

​
Creating Themes

​
Theme Development Guide

Complete guide to building your own Weaverse theme from scratch. Browse the official gallery of ready-to-use Weaverse Hydrogen themes.

​
Theme Architecture

my-weaverse-theme
app
components
sections
routes
weaverse
public
components/ holds reusable UI, sections/ the Weaverse page sections, routes/ the React Router pages, weaverse/ the Weaverse configuration, and public/ static assets.

​
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

  1. Explore: Check out the Pilot theme for React Router, or Forward for Next.js
  2. Learn: Follow the Theme Development Guide
  3. Build: Create your own theme using our Development Guide
  4. Share: Share your theme with the community
Ready to start building? Check out our Getting Started guide to set up your development environment!

Pilot - Shopify Hydrogen Starter Theme

Elevate your Shopify Headless storefront with Pilot, the robust and versatile starter theme by Weaverse.

How to Change the Font in Your Weaverse Theme

Learn how to update, extend, or customize fonts in your Weaverse Hydrogen storefront using Fontsource, Google Fonts, or custom uploads.

Theme “Pilot” Sections

Forward - Next.js Starter Theme

Forward is the Weaverse starter theme for Next.js: an App Router storefront on @weaverse/next with Shopify data, Studio editing, markets and translations.
Last modified on October 20, 2026