Taking the First Step
Embarking on your journey with Weaverse is straightforward. In this guide, you'll learn how to seamlessly integrate the Weaverse app into your Shopify store and lay the foundation for your first Weaverse Hydrogen project.
Trying Before Committing: The Weaverse Playground
If you're not yet ready to commit to installing the app and setting things up, no worries! We have a playground set up just for you. Head over to the Weaverse Playground to explore the features hands-on. And if you need some guidance, check out our quick tour video below.
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.
Creating a New Weaverse Hydrogen Project
Quickstart
Check out the step-by-step quickstart guide to initialize a Weaverse Hydrogen project:
Create New Project
In the Weaverse dashboard, you'll find a button to create a new project (also referred to as a storefront). Click that button to begin the creation process.
Select a Starter Theme
You'll be presented with various Hydrogen starter templates to choose from. By default, "Pilot" (free) will be available as the first starter theme. Select this theme or any other that fits your needs.
Initialize the Project
Follow the instructions that are used @weaverse/cli to clone the project repository to your local machine. This will include all the necessary files to begin development.
Enter the Development Server Preview URL
Input the development server preview URL 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: it is highly recommended to use Chrome Browser to access the app, as Safari and some others 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
You're all set with the basics. Let's dive in and kickstart by building your first Weaverse Hydrogen Theme!