Skip to main content
Meet Forward, the Weaverse starter theme for Next.js. Forward plays the same role for Next.js storefronts that Pilot plays for React Router storefronts: a complete, open-source storefront you can run, edit in Weaverse Studio, and make your own. Forward is built on the Next.js App Router and @weaverse/next 1.0. It reads products, collections, pages and articles from the Shopify Storefront API through Shopify’s framework-agnostic Hydrogen SDK (preview), and it is styled with Tailwind CSS v4.

​
Key Features

  • Composed pages: The home page, product, collection, all products, article, page and custom pages are Weaverse pages that merchants build and rearrange in Studio.
  • Live Studio editing: Edits appear instantly in the preview. Changing a product or collection picker re-runs only that section’s loader, with no full-page reload (per-item revalidation).
  • Theme settings: Header, footer, layout (such as page width) and editorial imagery are configured through Weaverse theme settings, not as page sections.
  • Markets and translations: Each market gets its own URL prefix, the theme’s own copy can be translated in Studio’s Translation Manager, and prices and dates format per market. See Markets & Translations.
  • Declared theme routes: Forward serves collections at /shop/:handle and articles at /journal/:handle. It declares these routes in its theme schema, so Studio’s page selector and URL picker open the right paths.
  • Store-driven catalog: Categories, filters and sort options come from your store’s data and the Storefront API’s own filters, so Forward runs on any Shopify store without theme-side product lists.
  • Shopify Cart and Customer Account: The cart is the server-owned Shopify Cart API with Shopify checkout, and account pages use the Shopify Customer Account API.

​
Getting Started

Forward is open source on GitHub. It needs Bun and Node.js 22.18 or later.
Fill in .env with your Shopify store and your Weaverse project ID (WEAVERSE_PROJECT_ID), then start the dev server:
Open http://localhost:3333. Forward always runs against a real Shopify store, so it refuses to start until the Shopify variables are set. For a step-by-step setup, including connecting Weaverse Studio, see the Next.js Quickstart. When you’re ready to go live, see Deploy to Vercel.

​
Available Sections

Forward’s sections are grouped by the page they are built for, but any section can be added to any page in Studio. Shared elements
  • Heading, Subheading, Paragraph, Button and Buttons
  • Section content (a container for grouping elements inside a section)
Home
  • Home hero
  • Hero slideshow (with slides)
  • Featured products
  • Collection index
  • Product spotlight
  • Material standard
  • Kit callout
  • Repair and journal
Product
  • Main product, split into composable parts: product media, product info, breadcrumb, meta row, title, prices, summary, variant selector, buy buttons and collapsible details
  • Related products
Collection
  • Collection hero
  • Main collection, with toolbar, filters and product grid
  • System manifest
  • Field practice
All products
  • All products, with toolbar and product grid
Article
  • Article header
  • Article body
Pages and editorial
  • Page hero, page premise, page values and page origin
  • Editorial hero, editorial overlay hero and editorial callout
  • Standard statement, stat band and principle grid
  • Product strip, product tiles and product case study
  • Numbered sequence
Browse the full, up-to-date list in src/sections on GitHub.

​
Project Structure

The Weaverse integration in src/lib/weaverse/ is a good reference when you add @weaverse/next to your own app. See Rendering Pages and Studio Integration for how each piece fits.

​
Learn More

@weaverse/next Overview

How Weaverse works in a Next.js App Router storefront.

Next.js Quickstart

Run Forward locally and connect it to Weaverse Studio.

Studio Integration

Studio connector, live revalidation and theme routes.

Deploy to Vercel

Take your Forward storefront live.