Official Theme

Committed 5 days ago

Forward

Name: Forward — Weaverse Hydrogen Theme
Author: Weaverse

byWeaverse

1 contributor

A Next.js App Router storefront theme for Shopify, built on @weaverse/next

FreeOpen Source

RepositoryWeaverse/forward

Latest releaseForward v1.0.0

Hydrogen version2026.10.2

LicenseMIT

Try Theme Live Preview Download theme

Official Theme

Forward

byWeaverse

A Next.js App Router storefront theme for Shopify, built on @weaverse/next

FreeOpen Source

RepositoryWeaverse/forward

Latest release

Hydrogen versionN/A

LicenseMIT

Try Theme Live Preview Download theme

Theme Features

Built on Next.js

Forward runs on the Next.js App Router with @weaverse/next, so every page stays editable in Weaverse Studio.

Composable product pages

Media, variants, pricing and details are separate sections that merchants rearrange and restyle in Studio.

Real Shopify data

Collections, filters and the cart read live from your store through the Storefront API.

Documentation

Everything you need to get started with this theme.

Forward

Forward is an open-source Shopify storefront theme built with Next.js App Router, Hydrogen and Weaverse. Build your storefront in React and let your team compose pages, customize theme settings and manage translations visually in Weaverse Studio.

Live storefront · Try the editor · Next.js documentation

Features

Visual page composition with reusable sections, resource pickers and theme settings in Weaverse Studio.
Product pages, collection browsing with filters, sorting and pagination, a collection list, and search.
Shopify Cart API integration and checkout handoff.
Customer Account sign-in, profile, order history and addresses when configured.
Shopify Markets routing, localized prices and dates, and translation authoring in Studio.
Custom pages, blogs, articles and store policies, with page metadata, robots and sitemap support.
Next.js App Router, React, TypeScript and Tailwind CSS, with unit, DOM and browser tests.

Forward runs against a real Shopify store. There is no static demo mode or fallback catalog.

Requirements

Node.js 22.18 or later.
Bun for dependencies and scripts. Use the version pinned in package.json.
A Shopify store with the Headless sales channel, Storefront API access and products published to that storefront.
A Weaverse project created from Forward in the Weaverse app for your Shopify store.

Getting started

1. Create your storefront

Create a Forward project in Weaverse and copy its Project ID. Then run:

npx @weaverse/cli@latest create --template forward --project-id YOUR_PROJECT_ID --project-name my-storefront
cd my-storefront

bash

The CLI downloads the theme, writes your project ID to .env and installs dependencies with Bun.

2. Configure Shopify

Fill in the Storefront API credentials from your store's Headless channel in the generated .env:

PUBLIC_STORE_DOMAIN=your-shop.myshopify.com
PRIVATE_STOREFRONT_API_TOKEN=your-private-storefront-token
PUBLIC_STOREFRONT_API_TOKEN=your-public-storefront-token
WEAVERSE_PROJECT_ID=your-weaverse-project-id

dotenv

The private token is used only on the server. The public token lets Studio resolve your store's products, collections and pages. Never commit .env or expose the private token to browser code.

See .env.example for the full configuration. Customer Account is optional: to enable it, configure all four account variables together and register the appropriate callback and logout URLs in Shopify. Leave the entire account group empty if you do not need it.

3. Start developing

bun run dev

bash

Open http://localhost:3333. In your Weaverse project's settings, set the preview URL to http://localhost:3333, then open Studio to customize your pages and theme settings. Publish your changes when they are ready for the live storefront.

For a guided walkthrough, see the Next.js quickstart.

Customizing your store

Shopify owns your products, collections, menus, pages, blog content, policies and checkout. Configure the main-menu and footer menus for navigation; the header menu handle can be changed with PUBLIC_MAIN_MENU_HANDLE.
Weaverse Studio owns page composition, section settings, theme settings and translations. Header and footer settings are available through theme settings; Cart and Account behavior stays in the theme code.
Your code defines the available sections and their schemas in src/sections/, registered in src/lib/weaverse/components.ts.

Markets are declared in src/lib/i18n/locales.ts. Keep them aligned with your Shopify Markets configuration and author localized content in Studio. The default market uses unprefixed URLs; other markets use a locale prefix, such as /de-de/shop.

See Studio integration and Markets and translations for more.

Project structure

src/
  app/                  Next.js routes, layouts and API handlers
    [locale]/           Market-aware storefront pages
  components/           Shared UI and commerce components
  sections/             Composable storefront sections and schemas
  lib/
    weaverse/           Component registry, theme settings and Studio integration
    storefront/         Shopify data access and storefront models
    i18n/               Market configuration and translation helpers
    cart/               Shopify cart integration
    account/            Customer Account integration
public/                 Static assets
scripts/                Build and verification tools
tests/                  Unit, DOM and browser coverage

text

Commands

Command	Description
`bun run dev`	Start the development server on port 3333.
`bun run build`	Create a production build; requires your Shopify and Weaverse configuration.
`bun run start`	Serve an existing production build.
`bun run typecheck`	Check TypeScript types.
`bun run lint`	Run Biome lint.
`bun run format`	Format files and organize imports.
`bun run format:check`	Check formatting without changing files.
`bun run test`	Run unit and DOM tests.
`bun run test:browser`	Run the live Playwright matrices; requires the corresponding credentials.
`bun run check`	Run types, lint, formatting, tests, GraphQL validation, build, theme and route checks.

Deploying to Vercel

Push your storefront to your own Git repository and import it into Vercel with the Next.js preset.
Use Bun for installation (bun install --frozen-lockfile) and bun run build for the build command. Select a supported Node.js version that meets the requirement above.
Add your Shopify and Weaverse environment variables in Vercel before building. Configure Preview and Production separately; do not commit an environment file.
If Customer Account is enabled, set PUBLIC_STOREFRONT_ORIGIN to that environment's storefront origin and register its callback and logout URLs in Shopify.
Deploy, add the deployed URL to your Weaverse project's preview URLs, and verify published pages, product selection, cart and checkout on your own store.

Follow the Vercel deployment guide for the full setup.

Documentation

License

MIT — Copyright Weaverse JSC.

Release History

Latest

Forward v1.0.0

Oct 15, 2026

v1.0.0

The first versioned release of Forward, the Weaverse starter theme for the Next.js App Router.

Highlights

Next.js App Router storefront on @weaverse/next 1.0.1: composed home, product, collection, all products, collection list, blog, article, page and custom pages, all editable in Weaverse Studio.
Studio integration: per-item revalidation for resource pickers, live theme settings, and declared theme routes so Studio's page selector opens Forward's own paths (/shop, /categories, /archive/:blog, /journal/:handle).
Markets and translations: locale-prefixed markets, the Translation Manager, and per-market SEO.
Shopify: Storefront API catalog through the server-only private token, a server-owned cart, and optional Customer Account.

Getting started

npx @weaverse/cli@latest create --template forward

bash

Requires Bun and a Shopify store (Storefront API keys from the Headless channel). See the Next.js quickstart.

Licensed under MIT.

Need a senior Hydrogen team?

Weaverse builds Shopify Hydrogen storefronts, with scope, delivery and launch support agreed in a written statement of work.

Trust & security Our services

Not sure what you need? Contact our team

Pull-request workflow
Written statement of work
Launch support by agreement

Ready to use this
theme?

Get started with this production-ready Hydrogen theme. Customize it with Weaverse's visual editor and deploy to Shopify in minutes.

Use This Theme Browse All Themes

Forward

Live storefront · Try the editor · Next.js documentation

Features

Visual page composition with reusable sections, resource pickers and theme settings in Weaverse Studio.
Product pages, collection browsing with filters, sorting and pagination, a collection list, and search.
Shopify Cart API integration and checkout handoff.
Customer Account sign-in, profile, order history and addresses when configured.
Shopify Markets routing, localized prices and dates, and translation authoring in Studio.
Custom pages, blogs, articles and store policies, with page metadata, robots and sitemap support.
Next.js App Router, React, TypeScript and Tailwind CSS, with unit, DOM and browser tests.

Forward runs against a real Shopify store. There is no static demo mode or fallback catalog.

Requirements

Node.js 22.18 or later.
Bun for dependencies and scripts. Use the version pinned in package.json.
A Shopify store with the Headless sales channel, Storefront API access and products published to that storefront.
A Weaverse project created from Forward in the Weaverse app for your Shopify store.

Getting started

1. Create your storefront

Create a Forward project in Weaverse and copy its Project ID. Then run:

npx @weaverse/cli@latest create --template forward --project-id YOUR_PROJECT_ID --project-name my-storefront
cd my-storefront

bash

The CLI downloads the theme, writes your project ID to .env and installs dependencies with Bun.

2. Configure Shopify

Fill in the Storefront API credentials from your store's Headless channel in the generated .env:

PUBLIC_STORE_DOMAIN=your-shop.myshopify.com
PRIVATE_STOREFRONT_API_TOKEN=your-private-storefront-token
PUBLIC_STOREFRONT_API_TOKEN=your-public-storefront-token
WEAVERSE_PROJECT_ID=your-weaverse-project-id

dotenv

The private token is used only on the server. The public token lets Studio resolve your store's products, collections and pages. Never commit .env or expose the private token to browser code.

3. Start developing

bun run dev

bash

For a guided walkthrough, see the Next.js quickstart.

Customizing your store

Shopify owns your products, collections, menus, pages, blog content, policies and checkout. Configure the main-menu and footer menus for navigation; the header menu handle can be changed with PUBLIC_MAIN_MENU_HANDLE.
Weaverse Studio owns page composition, section settings, theme settings and translations. Header and footer settings are available through theme settings; Cart and Account behavior stays in the theme code.
Your code defines the available sections and their schemas in src/sections/, registered in src/lib/weaverse/components.ts.

See Studio integration and Markets and translations for more.

Project structure

src/
  app/                  Next.js routes, layouts and API handlers
    [locale]/           Market-aware storefront pages
  components/           Shared UI and commerce components
  sections/             Composable storefront sections and schemas
  lib/
    weaverse/           Component registry, theme settings and Studio integration
    storefront/         Shopify data access and storefront models
    i18n/               Market configuration and translation helpers
    cart/               Shopify cart integration
    account/            Customer Account integration
public/                 Static assets
scripts/                Build and verification tools
tests/                  Unit, DOM and browser coverage

text

Commands

Command	Description
`bun run dev`	Start the development server on port 3333.
`bun run build`	Create a production build; requires your Shopify and Weaverse configuration.
`bun run start`	Serve an existing production build.
`bun run typecheck`	Check TypeScript types.
`bun run lint`	Run Biome lint.
`bun run format`	Format files and organize imports.
`bun run format:check`	Check formatting without changing files.
`bun run test`	Run unit and DOM tests.
`bun run test:browser`	Run the live Playwright matrices; requires the corresponding credentials.
`bun run check`	Run types, lint, formatting, tests, GraphQL validation, build, theme and route checks.

Deploying to Vercel

Push your storefront to your own Git repository and import it into Vercel with the Next.js preset.
Use Bun for installation (bun install --frozen-lockfile) and bun run build for the build command. Select a supported Node.js version that meets the requirement above.
Add your Shopify and Weaverse environment variables in Vercel before building. Configure Preview and Production separately; do not commit an environment file.
If Customer Account is enabled, set PUBLIC_STOREFRONT_ORIGIN to that environment's storefront origin and register its callback and logout URLs in Shopify.
Deploy, add the deployed URL to your Weaverse project's preview URLs, and verify published pages, product selection, cart and checkout on your own store.

Follow the Vercel deployment guide for the full setup.

Forward

Forward

Theme Features

Built on Next.js

Composable product pages

Real Shopify data

Documentation

Forward

Features

Requirements

Getting started

1. Create your storefront

2. Configure Shopify

3. Start developing

Customizing your store

Project structure

Commands

Deploying to Vercel

Documentation

License

Release History

Forward v1.0.0

Highlights

Getting started

Need a senior Hydrogen team?

Ready to use thistheme?

Forward

Documentation

Forward

Features

Requirements

Getting started

1. Create your storefront

2. Configure Shopify

3. Start developing

Customizing your store

Project structure

Commands

Deploying to Vercel

Documentation

License

Release History

Forward v1.0.0

Highlights

Getting started

Ready to use this
theme?