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
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
Injecting Weaverse Client into App's Load Context
server.ts file to inject the weaverse client into the
getLoadContext function as illustrated below:
Wrapping the app with
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.