Theme Settings define the global configuration of your entire Weaverse theme. They impact the look and behavior of your store across all routes and components.
Merchants can easily tweak these settings in Weaverse Studio's "Theme Settings" panel, which provides a familiar experience akin to editing settings in the native Shopify Theme Customizer.
Define Theme Schema
The theme schema is stored in a file named
schema.server.ts, which resides under the
weaverse directory. In this file, you define the various elements of your theme schema.
Here's a sample code block illustrating the structure of a theme schema:
The type of the theme schema is
HydrogenThemeSchema, which comprises two primary components:
info section of the schema includes vital metadata to be displayed within Weaverse Studio. It contains details such as:
name: The name of your theme.
version: The theme's version (should be imported from
package.jsonfile for consistency versioning).
author: The theme's author or developer.
authorProfilePhoto: An image representing the author.
documentationUrl: A link to the theme's documentation.
supportUrl: A link for users to seek support or assistance.
inspector section of the schema shares the same structure as a Component Schema's Inspector. It contains an array of
InspectorGroup objects, each of which specifies a group name and an array of inputs.
These inputs are all supported Input Settings, which can be explored further in the Input Settings article.
Load Theme Settings
To make sure your theme’s global settings are applied consistently, you'll need to load them in the
loader function at the root route. For this, the
loadThemeSettings function from
WeaverseClient is used.
📌 Note: It's important to name the resulting data key as
weaverseTheme. It's a requirement for the settings to integrate properly with your theme.
Accessing Global Theme Settings
To work with global theme settings, you'll utilize the
useThemeSettings hook. This hook returns the settings that have been saved or updated by merchants within the Weaverse Studio's "Theme Settings" panel.
When merchants first install your theme, these settings are generated based on the default values you've defined for each input in the theme schema.
Here's a straightforward example found in the
useThemeSettings hook can be used in any component within your Weaverse theme, not just Weaverse Components, making it a versatile and powerful tool for customization.