Weaverse Hydrogen Theme Overview
Weaverse Hydrogen Theme is a groundbreaking solution that brings together the modernity of Hydrogen/Remix with the familiarity of Shopify Liquid Theme. It seamlessly integrates Section-based themes and JSON schema input definitions, akin to what's found in Shopify Liquid Themes.
The Hydrogen Theme is bootstrapped with a demo store generated from Shopify Hydrogen CLI, and with some code setup, it integrates effortlessly with Weaverse Theme Customizer. This integration allows developers and merchants to create highly customizable and dynamic online stores.
Project Folder Structure
The Weaverse Hydrogen theme has a unique folder structure within the app folder of Remix. In addition to the Hydrogen bootstrapped folders such as components, data, hooks, lib, and style, Weaverse made some modifications and added new folders:
-
routes: This directory contains the routes for Hydrogen/Remix, which define the structure and navigation of the online store. We also included the Weaverse Component and data loader. -
sections: Here, you'll find the Weaverse Section definitions, which are React Custom Components that enable the creation of reusable and customizable sections. -
weaverse: This directory contains the default components provided by Weaverse.
Similarities with the Shopify Liquid Theme
Sections-Based Theme
Just like the Shopify Liquid Theme, the Weaverse Hydrogen Theme is built around the concept of sections. Sections are reusable, customizable modules of content that merchants can add, remove, and reorder. This approach provides flexibility and allows for a more personalized and dynamic storefront.
JSON Schema Input Definition
Weaverse Hydrogen Theme supports JSON schema input definitions, similar to Shopify Liquid Theme. This feature enables the definition of various input types, allowing merchants to control the appearance or behavior of the theme easily. It supports a wide range of input types, including text, range, color, date picker, and more.
Integration with Weaverse Theme Customizer
The Weaverse Hydrogen Theme is designed to work seamlessly with the Weaverse Theme Customizer. This integration provides a user experience similar to Shopify OS2 Theme Customizer, making it easy for developers and merchants to select a Hydrogen Theme and develop the storefront quickly.
Weaverse Hydrogen Sections Overview
Weaverse Hydrogen Sections are the building blocks of your Hydrogen storefront. They offer a dynamic and customizable way to present content, combining the flexibility of the Remix framework with the power of React. This guide will walk you through creating and understanding a Weaverse Hydrogen Section.
Crafting the Section Component
Every section starts with a React forward ref component. Using forwardRef It is recommended as it allows the Weaverse Theme Customizer to reference the node with the inspector easily. This component acts as the visual representation of your section and will receive various props, including those defined in the section's schema.
In the example above, settings like heading and productsCount are customizable through the Weaverse Theme Customizer, allowing for dynamic content presentation. The ...rest spread is crucial as it ensures all necessary DOM attributes, such as component type and key, are present.
Dynamic Data Loading
One of the standout features of Weaverse Hydrogen Sections is the ability to fetch and display dynamic data. This is achieved using the loader function, which can make server-side requests to any backend API:
Moreover, the loader can adapt its data fetching based on the current props of the section. If you've defined a product resource picker in your schema, the loader can access the selected productId and handle from the itemData property of WeaverseLoaderArgs, ensuring the correct data is always fetched.
Structuring the Section Schema
The schema is the backbone of your section, providing essential metadata and configuration:
-
title: The display name that appears in the customizer. -
type: A unique string identifier for the section. -
limit(optional): The maximum number of instances of this section that can be added to a single page. -
enableOn(optional): Specifies the page types where this section can be added. -
inspector: This is where you define the customizable settings for your section. Each setting can have various properties, such astype,name, andlabel. -
toolbar: Quick action tools available in the customizer, like general settings or options to duplicate and delete. -
childTypes: Specifies the types of components that can be nested within this section. -
preset: Sets default data for the section when it's first added to a page.