Getting Started

Welcome to Weaverse

Transform your Shopify store with Weaverse Hydrogen - the modern solution for building fast, customizable storefronts. This guide will help you get started with your first Weaverse project in minutes.

Try the Weaverse Playground

Want to explore before installing? Visit our interactive Playground to experience Weaverse's features firsthand. Watch our quick demo:

Install Weaverse

1. Go to Weaverse on Shopify App Store
2. Click "Add app"
3. Follow the installation prompts

Create Your First Project

1. Start a New Project

In your Weaverse dashboard, click "Create New Project" to begin.

2. Choose Your Theme

Select from our Hydrogen starter themes. Currently, we support "Pilot" and "Naturelle", with more coming soon! We recommend starting with "Pilot"—it's packed with essential features and best practices.

3. Clone Theme & Start Development

Follow the instructions provided in the next step within the Weaverse dashboard. You'll be given a command line instruction similar to this:

npx @weaverse/cli create project-name --theme pilot-theme

This command will:

1. Clone the selected theme's code to a new directory (project-name) on your local machine.
2. Install necessary dependencies.
3. Automatically start the development server (usually at http://localhost:3456).

4. Preview & Connect Store Data

Once the development server is running, you can preview your project in the Weaverse Studio. Initially, it will display sample data.

To develop using your own Shopify store data, you need to configure your environment variables:

1. Locate your .env file: This file is in the root directory of the project you just cloned.

2. Update with your Storefront API credentials.

   • If your store is on a paid Shopify plan: Ensure you have the official Shopify CLI installed and logged in. Then, install Shopify's Hydrogen app to your store. Finally, run the following command in your project's root directory:

     npx shopify hydrogen env pull

     This command automatically fetches and populates your .env file.

   • If your store is a development store: You'll need to install the Shopify Headless app. Refer to our Environment Variables guide for detailed instructions on obtaining and setting up the necessary credentials manually.

3. Restart your development server after updating the .env file for the changes to take effect.

💡 Tip: You can manage your project's preview URL in Project Settings -> General within the Weaverse dashboard.

⚠️ Browser Note: For the best local development experience, use a Chrome-based browser. Some features might have limitations in browsers like Safari when interacting with localhost.

5. Start Customizing

Our visual editor mirrors Shopify's familiar interface, making it easy to:

• Add and arrange sections
• Customize components
• Adjust layouts and styles
• Preview changes in real-time

Next Steps

Ready to dive deeper? Learn how to build custom themes and components:

👉 Build Your First Weaverse Hydrogen Theme