Getting Started | Developer Documentation

Introduction to Weaverse Hydrogen

Weaverse is a low-code/no-code website builder platform designed to construct the "head" in the headless commerce world. It stands as the first and only Theme Customizer for Shopify Hydrogen, Shopify's official framework for building headless storefronts.

Key Concepts of Weaverse Hydrogen Theme Customizer

Shopify Hydrogen is renowned for its modern tech stack, enabling storefronts to run at incredible speeds using React and Remix. However, this power comes with a complexity that often requires merchants to hire a development team for setup. For developer agencies, this means spending significant time coding without a tool equivalent to the Online Store 2.0 Theme Customizer that exists for Liquid-based themes.

Weaverse is here to bridge that gap.

Weaverse Theme Customizer

Weaverse introduces a theme customizer that offers a user experience (UX) and developer experience (DX) akin to Shopify's OS2 Theme Customizer. This similarity in design and functionality makes it an intuitive tool for those familiar with Shopify's environment.

Weaverse Theme Marketplace

Alongside the customizer, Weaverse also features a theme marketplace. This marketplace allows development teams to easily select and start with a Hydrogen Theme, accelerating the development process for a storefront.

Weaverse Hydrogen Theme: A Fusion of Concepts

The Weaverse Hydrogen Theme is a unique blend of the Liquid section schema concept and the Hydrogen Remix concept. If you have experience as a Shopify Theme developer, you'll find the transition to Weaverse smooth and swift.

In essence, Weaverse simplifies the complexities of working with Shopify Hydrogen, making it accessible to a broader audience. Whether you're a merchant looking to set up a new storefront or a developer seeking to streamline your workflow, Weaverse offers the tools and resources to make the process more efficient and enjoyable.

Getting Started with Weaverse Hydrogen Theme Customizer

Weaverse Hydrogen Theme Customizer is a powerful tool that brings the convenience and flexibility of Shopify's OS2 Theme Customizer to Hydrogen projects. Here's a step-by-step guide to getting started with this innovative tool:

Prerequisites

A Chromium-based browser is highly recommended.
A Shopify Basic account or higher to be able to use the Shopify Hydrogen app.
Node.js version >=16.0.0
npm 7 or greater
A code editor (VSCode is a nice one)

Install the Weaverse App from the Shopify App Store

Before you can begin using the Weaverse Hydrogen Theme Customizer, you'll need to install the Weaverse app. Visit the Shopify app store and search for "Weaverse." Click on the app and follow the instructions to install it.

Navigate to the Hydrogen Dashboard in the Weaverse App

Once the app is installed, open it and navigate to the Hydrogen dashboard. This is where you'll manage all your Hydrogen projects.

Click "Create New Storefront" (Project)

create new weaverse hydrogen new storefront

In the Hydrogen dashboard, you'll find an option to create a new storefront, also referred to as a project. Click on this option to begin the creation process.

Select the Hydrogen Starter Template

You'll be presented with various Hydrogen starter templates to choose from. By default, "Pilot" will be available as the starter theme. Select this theme or any other that fits your needs.

Clone the Project Repository & Start Development Server

Follow the instructions provided to clone the project repository to your local machine. This will include all the necessary files to begin development.

Additional note

The instruction might be different between Themes.
The default .env file will use the "Mock.shop" for the demo so if you want to preview your real store data, please install the Headless or Hydrogen app and follow this instruction to obtain the Storefront API Token, and then you can add them to ENV file like following:
```
PUBLIC_STOREFRONT_API_TOKEN=your-token
PUBLIC_STORE_DOMAIN=your-domain.myshopify.com
```

Enter the Development Server Domain

Input the development server domain to the Preview URL input (default is http://localhost:3456) into the provided field, and then click "Next."

You can change the Preview URL later in the Project Settings, like in the following screenshot:

Note that it is highly recommended to use Chrome to access the app, as Safari and some browsers may not allow opening the localhost.

Explore the Theme Customizer

Now, you will see the Theme Customizer for your Hydrogen project. It's designed to be very similar to Shopify's OS2 Theme Customizer, making it intuitive for those familiar with Shopify's environment.

Start Adding Sections and Editing

With the Theme Customizer open, you can now add sections and edit them to fit your needs. The interface is user-friendly, allowing you to make changes with ease.

Next steps

Let's start exploring how Hydrogen Theme works and how to customize it in the "Weaverse Hydrogen Theme Overview" article.