1. Docs
  2. Deployment

Deploy to Shopify Oxygen

Published on Oct 10, 2023, updated 2 months ago

Deploying Your Weaverse Hydrogen Project to Shopify Oxygen

Elevate your e-commerce presence by deploying your Weaverse Hydrogen project to Shopify Oxygen. This guide simplifies the process, aligning closely with the official Oxygen documentation, to provide a streamlined deployment experience.

Deployment Steps

Install the Hydrogen App

Visit the Shopify Hydrogen App page and install the Hydrogen app in your Shopify store.

Create a GitHub Repository

  • For Existing Local Projects: Commit and push your project to a new GitHub repository.
  • For New Projects: Navigate to Weaverse Hydrogen template and use the "Use this template" option to create a new repository.

Set Up Your Storefront

Within your Shopify store's Hydrogen app, click the "Create storefront" button to initiate the setup.

Connect to Your Repository

Connect with Weaverse Pilot Repo

  • Opt for "Connect existing repository."
  • Choose your Weaverse Hydrogen repository and click "Connect."

Configure the Environment

  • Wait for the Hydrogen app to create a pull request.
  • In "Storefront settings," go to "Environments and variables."
  • Add the WEAVERSE_PROJECT_ID environment variable, obtainable from Weaverse Studio's "Project Settings" or the project URL.

Merge the Pull Request

  • Merge the pull request created by the Hydrogen app to implement the GitHub Action for Oxygen deployment.
  • If you merge before adding the WEAVERSE_PROJECT_ID, trigger a manual rebuild with a code update.

Publish Your Storefront & Update Weaverse Preview URL

After the GitHub Action completes:

  • For Single Deployment: In the Hydrogen app, select the latest deployment and choose "Make deployment public" from the "Actions" dropdown. Make deployment public
  • For Entire Storefront: Click "..." next to the Storefront name, select "Edit environment," and then choose "Publish." Make Hydrogen storefront public
  • Note: Shopify Plus plans can publish up to 25 Storefronts. Other plans are limited to one.

Additional Note: For Shopify Starter or Development plans, alternative deployment methods like Vercel are required, as the Hydrogen app cannot deploy to Oxygen.

Additional Resources

For more comprehensive information, refer to the Shopify Oxygen documentation. These steps will guide you in successfully deploying and configuring your Weaverse Hydrogen project to Shopify Oxygen, enhancing your storefront's capabilities and performance.

Was this article helpful?