This guide focuses on integrating the Weaverse SDKs and Theme Customizer into your existing Hydrogen project, providing detailed steps to enhance your theme with Weaverseโs powerful features.
Installing the Weaverse SDK
Begin by installing the Weaverse SDKs:
npm install @weaverse/hydrogen@latest
Adding the Weaverse Directory
Create a weaverse
directory within your Hydrogen app folder. This will house essential files to establish a Weaverse Client Provider, register Section Components, and define theme schema settings.
Simply copy the following files into your app/weaverse
directory:
Injecting Weaverse Client into App's Load Context
Modify your server.ts
file to inject the weaverse client into the getLoadContext
function as illustrated below:
Wrapping the app with withWeaverse
HoC
Ensure your main application component is wrapped with the withWeaverse
Higher-Order Component (HoC). Learn more in the withWeaverse article.
Global Theme Settings
Manage theme settings effortlessly by loading them server-side and accessing client-side via the useThemeSettings
hook. Discover more about this process in the Global Theme Settings article.
Rendering Weaverse Pages
Configure your routes to load Weaverse page data server-side and utilize the <WeaverseContent />
component to render pages, prioritizing Weaverse configurations and customizations.
Rendering Weaverse page:
๐ก Key Takeaway: While it's possible to render the <WeaverseContent />
component alongside other components, it's recommended to position the WeaverseContent
at the topmost level of the route hierarchy. This ensures that Weaverse's configurations and customizations are prioritized and rendered accurately throughout your project.
Creating the Section/Component
Structure your components and sections within the sections
directory and register them in the weaverse/components.ts
file, maintaining organization and clarity in your project structure.
Dive deeper into this topic in the Weaverse Component article.
โ
โ
โ
โ