Storefronts

The Hydrogen channel allows you to create multiple storefronts. Each storefront is linked to a single Hydrogen app, connected through a GitHub repository.

Storefronts can have multiple environments, which contain deployments.

Anchor to Create a new storefront by connecting an existing GitHub repositoryCreate a new storefront by connecting an existing GitHub repository

If you already created a Hydrogen app and pushed it to GitHub, then you can connect that repo to a new Hydrogen storefront.

1. In the Hydrogen channel, click Create storefront.
2. Click Connect existing repository.
3. Under Account, select the GitHub account or organization that contains the Hydrogen repo.
4. Under Repository, select the repo.
5. Click Connect.

After connecting the repo, Shopify automatically opens a pull request to add an Oxygen deployment workflow file. Merge the PR to start continuous deployment to Oxygen.

Anchor to Create a new storefront by creating a new GitHub repositoryCreate a new storefront by creating a new GitHub repository

1. In the Hydrogen channel, click Create storefront.
2. Select the Hydrogen template to start with.
3. Select whether to create the app as JavaScript or TypeScript.
4. Under Account, select the GitHub account or organization where you want to create the new app repository.
5. Under Repository, type a name for the new repo.
6. Optional: Check Create as a public repository.
7. Click Create.

Anchor to Delete a Hydrogen storefrontDelete a Hydrogen storefront

Deleting a storefront deletes all its environments, environment variables, and deployments.

1. In the Hydrogen channel, click the storefront to delete.
2. Click Storefront settings.
3. Click Delete storefront.

Anchor to Next stepsNext steps

• Learn how to create custom environments and use them to preview changes without affecting other environments.
• Learn how to create environment variables and use them to store reusable data for use in Hydrogen storefront code.