Navigating the Weaverse Studio Interface

Weaverse Studio provides a powerful yet intuitive interface for visually building and customizing your Shopify Hydrogen storefront. Understanding the different parts of the editor will help you work more efficiently. This guide walks you through the main components of the Studio interface.

Top Bar: Navigation and Actions

The top bar provides access to essential navigation controls and core actions.

• Locale Selector: If your store supports multiple languages (configured in themeSchema.i18n), use this dropdown to switch between locales and edit content for specific language versions.
• Page Selector: Choose the page you want to edit. This list is populated based on the pages loaded via context.weaverse.loadPage() in your Hydrogen project's route loaders. Common examples include the Homepage, Product pages, Collection pages, standard Pages, and any Custom Pages you've defined.
• Save Button: Saves your current changes. These changes will be reflected on your live site.

Left Panel: Page Outline & Adding Sections

The left panel displays the structure of your currently selected page.

• Page Outline: This tree view shows the hierarchical structure of all components (sections, elements) on the page.
  • Selection: Clicking a component name highlights it on the canvas and opens its details in the Inspector panel (right panel).
  • Reordering: Drag and drop components within the outline to change their order on the page.
  • Visibility (Eye Icon): Temporarily hide a component from the preview canvas and the live site (once published). Click again to show it.
  • Delete (Trash Icon): Permanently remove a component from the page.
• Add Section Button: Located at the bottom of the outline, this button opens a library of available components defined in your ~/weaverse.tsx file. Select a component to add it to the bottom of the current page structure.

Center Canvas: Live Preview

This is the main area where you see a live, interactive preview of the page you are editing. You can directly click on components within the canvas to select them and open their settings in the Inspector panel.

Right Panel: Inspector

The Inspector panel on the right is where you configure selected components or global theme settings.

• Component Inspector: When a component is selected (either from the Outline or the Canvas), this panel shows its specific configuration options, typically organized into tabs:
  • Settings: Modify the component's specific properties. These options are defined in the inspector array within the component's schema (e.g., text content, image selection, number of items, layout choices).
  • Style: Apply common styling adjustments like padding, margin, background color, text alignment, and border radius without needing custom CSS. Weaverse applies these as inline styles or utility classes.
  • General: Access common actions and settings applicable to most components, such as:
    • Visibility: Control visibility across different devices (Desktop, Tablet, Mobile).
    • Duplicate: Create an exact copy of the selected component below the original.
    • Delete: Remove the component from the page.
• Theme Settings Inspector: Accessed via the 'Theme' button in the bottom bar, this panel allows you to modify global settings for your entire theme. These options are defined in the inspector array within your ~/weaverse/schema.server.ts file (e.g., global colors, typography, layout defaults like page width).

Bottom Bar: View Controls & Global Settings Access

The bottom bar provides tools for controlling the preview and accessing global settings.

• Device Switcher: Preview your page layout on different screen sizes (Desktop, Tablet, Mobile) to ensure responsiveness.
• Inspector Toggle (Panel Icon): Show or hide the right Inspector panel.
• Theme Settings Button: Opens the Theme Settings Inspector in the right panel.
• Project Settings Button: Opens the global project settings modal.

Project Settings

Accessed via the bottom bar, this modal contains administrative settings for your Weaverse project.

• General: Manage project name, view Project ID and API Key (needed for your .env file).
• Domains: Configure custom domains for your Weaverse-hosted storefront (if applicable).
• Billing: Manage your Weaverse subscription.
• Theme: View theme information (name, author, version) as defined in themeSchema.info (~/weaverse/schema.server.ts).

By familiarizing yourself with these elements, you can effectively leverage Weaverse Studio to customize your Hydrogen storefront's appearance and content.