Weaverse / pilot

Pilot - Production-ready Shopify Hydrogen Theme 📚 Read the docs | 🗣 Join our community on Slack | 🐞 Report a bug _Pilot is an innovative Shopify theme, powered by Hydrogen, React Router 7, and Weaverse, designed to create lightning-fast storefronts with exceptional performance. This theme combines a collection of powerful tools and features to streamline your Shopify development experience._ Who is using Weaverse/Pilot on production? These **Shopify (Plus)** brands built on top of Weaverse/Pilot: • Huckleberry Roasters - Crafting coffee in Colorado since 2011, Huckleberry Roasters delivers award-winning flavors with ethically sourced beans. • Bubble Goods - 2,000+ healthy food products shipped from small independent U.S. makers to your door. • Karma and Luck - modern lifestyle brand rooted in timeless traditions and spiritual intention. • Baltzar - curated selection of menswear brands from world renowned specialists such as Frank Clegg, Albert Thurston and Astorflex. • iROCKER - provide life on the water to all, with gear that goes the extra mile. • Roland (Brazil) - electronic musical instruments, drums, digital pianos, synthesizers, and dance/DJ gears. • Timothy London - British brand of premium travel goods and accessories. • Vasuma Eyewear - Vasuma creates eyewear for both men and women. From Stockholm, Sweden our eyewear are inspired by the best of the vintage eras of the 50s and 60s. • And many more... AI Coding Agent Support Pilot supports AI coding agents (Cursor, Claude Code, Windsurf, Codex, GitHub Copilot) via , which includes inline Weaverse component patterns, schema reference, input types, loader patterns, and common pitfalls. Links • Live store: https://pilot.weaverse.dev • Customizing Pilot on Weaverse Studio: https://studio.weaverse.io/demo?theme=pilot What's included • Shopify Hydrogen / Oxygen / CLI • Shopify Basic/Plus features support: • New Shopify Customer Account API (OAuth-based) • Combined Listings • Product bundles • React Router 7 for routing/SSR/data loading • Biome code linter/formatter • TypeScript with strict configuration • GraphQL code generator • Styled with TailwindCSS (v4) • Radix-UI for accessible/reusable UI components • class-variance-authority (cva) for component variants • Swiper for carousels/sliders • Framer Motion for animations • Judge.me reviews integration • Klaviyo integration for email marketing • Full-featured setup of components and routes • Fully customizable inside Weaverse Studio Deployment • Deploy to Shopify Oxygen • Deploy to Vercel Getting started **Requirements:** • Node.js version 20.0.0 or higher • or package manager **Follow these steps to get started with Pilot and begin crafting your Hydrogen-driven storefront:** • Install Weaverse Hydrogen Customizer from Shopify App Store. • Create new Hydrogen storefront inside Weaverse. • Initialize the project and start a local dev server with tool as instructed in the Weaverse Studio. • Open **Weaverse Studio** to start customizing and tailoring your storefront according to your preferences. Quick Start Commands Features overview Fetching page data with parallel loading Pilot uses parallel data loading for optimal performance. Every route loads Weaverse data alongside GraphQL queries using : is an instance that has been injected into the app context by Weaverse. It provides a set of methods to interact with the Weaverse API. Rendering page content Weaverse pages is rendered using component. And in your route: Dead simple, right? Global theme settings Weaverse global theme settings is loaded in the 's loader with function. And then you can use it in your components with hook. The component is wrapped with HoC in order to SSR the theme settings. Create a Weaverse section To create a section, you need to create a new file in directory and register it in file. **Important:** All Weaverse sections must include as a prop (or use with React prior to v19) and extend . Export a object from the file to define the component's schema with default data and settings to be used in the **Weaverse Studio**. What if your component needs to fetch data from Shopify API or any third-party API? **Weaverse** provide a powerful function to fetch data from _any_ API, and it's run on the **server-side** 🤯😎. Just export a function from your component: And then you can use the data in your component with 🤗 Don't forget to register your new section in : Manage content and style your pages within Weaverse Studio Weaverse provides a convenient way to customize your theme inside the **Weaverse Studio**. You can add new sections, customize existing ones, and change the theme settings. Project Structure Development Tools • **Development server**: http://localhost:3456 • **GraphiQL API browser**: http://localhost:3456/graphiql • **Network inspector**: http://localhost:3456/debug-network • **Weaverse Studio**: Access through your Shopify admin References • Weaverse docs • Hydrogen docs • React Router • Tailwind CSS v4 • Radix UI • Biome License This project is provided under the MIT License. --- Let **Weaverse** & **Pilot** empower your Shopify store with top-notch performance and unmatched customization possibilities! 🚀