Pilot
A fully-featured Shopify Hydrogen theme crafted to help you launch modern, high-performing headless storefronts in minutes.
Overview
The Pilot Shopify theme, powered by Hydrogen, Remix, and Weaverse, is designed to create lightning-fast storefronts with exceptional performance. It combines powerful tools and features to streamline the Shopify development experience. The theme includes Remix, Hydrogen, Oxygen, Shopify CLI, ESLint, Prettier, GraphQL generator, TypeScript and JavaScript flavors, Tailwind CSS, and a full-featured setup of components and routes. It offers a customizable and easy-to-use solution for building Hydrogen-driven storefronts.
Features
- Fetching page data inside route's loader using Weaverse's
context.weaverse.loadPagefunction. - Rendering page content with the
<WeaverseContent />component. - Loading Weaverse global theme settings using the
context.weaverse.loadThemeSettingsfunction. - Creating custom sections by creating a new file in the app/sections directory and registering it in app/weaverse/components.ts file.
- Fetching data from Shopify API or any third-party API using Weaverse's loader function.
- Customizing the theme inside the Weaverse editor by adding new sections, customizing existing ones, and changing theme settings.
- Local development inspection features including Hydrogen app, GraphiQL API browser, and server-side network requests.
Summary
The Pilot Shopify theme, powered by Hydrogen, Remix, and Weaverse, offers a comprehensive set of features and tools to create high-performance storefronts. It simplifies the Shopify development experience with convenient functions for loading page content, global theme settings, and data from APIs. With the ability to create custom sections and customize the theme inside the Weaverse editor, Pilot provides flexibility and customization options. The theme also includes features for local development inspection, making it a valuable choice for developers seeking to create lightning-fast storefronts on Shopify.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Remix
Remix is a modern JavaScript framework that focuses on building fast and performant web applications. It emphasizes a combination of server-rendered content and client-side interactivity, offering a robust architecture for creating scalable and maintainable projects.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Shopify
Shopify offers headless commerce capabilities through its Storefront API, allowing developers to use their own front-end technology to create custom storefronts or sales channels while using Shopify as a back-end system
- Ecommerce
Ecommerce websites sell products or services to customers through an online storefront. These websites typically include features such as product listings, shopping carts, payment processing, and order management tools.
- Templates & Themes
A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.
- Framer Motion
Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.
- Graphql
A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Zustand
Zustand is a lightweight state management library for React that provides a simple and intuitive API for managing state in your application. It allows developers to easily create and manage global state, and provides a powerful set of tools for optimizing performance and improving developer productivity. Zustand is designed to be easy to use and easy to learn, making it a popular choice for developers of all skill levels.