Manage storefronts
You can use Oxygen to manage different versions of Hydrogen storefronts through the Hydrogen sales channel.
Hydrogen storefront code exists in a GitHub repository. The Hydrogen storefront is created when commits are pushed to the GitHub repository, and deployed to Oxygen, where the storefront code is built into a Hydrogen app.
If the GitHub repository doesn't have the required files and directories for deploying the storefront code to Oxygen, then Shopify creates a new branch called add-oxygen-workflow, and then creates a new pull request in the Git repository. After the new branch and the pull request are created, you're then prompted to approve and merge the pull request, so you can start using the Hydrogen sales channel.
Create a new Hydrogen storefront
Anchor link to section titled "Create a new Hydrogen storefront"- From your Shopify admin, under Sales channels, click Hydrogen.
- In the Hydrogen storefronts interface, click Create storefront.
- Under Account, select an account that will own the Hydrogen Git repository.
- Under Repository, type the name for the new Hydrogen Git repository.
- Optional: Check Create as a public repository.
- Click Create.
Connect a Hydrogen storefront to an existing Hydrogen Git repository
Anchor link to section titled "Connect a Hydrogen storefront to an existing Hydrogen Git repository"You can connect a Hydrogen Git repository to multiple storefronts or stores.
- From your Shopify admin, under Sales channels, click Hydrogen.
- In the Hydrogen storefronts interface, click Create storefront.
- Click Connect an existing repository.
- Under Account, select the account that owns the Hydrogen Git repository.
- Under Repository, select the repository that contains the Hydrogen storefront code.
- Click Connect.
Delete a Hydrogen storefront
Anchor link to section titled "Delete a Hydrogen storefront"- From your Shopify admin, under Sales channels, click Hydrogen.
- In the Hydrogen storefronts interface, select the storefront that you want to delete.
- Click Storefront settings.
- At the bottom of the page, click Delete storefront.
Redirect traffic from Online Store to Hydrogen
Anchor link to section titled "Redirect traffic from Online Store to Hydrogen"To direct traffic to your Hydrogen storefront, you'll need to have added a domain and subdomain. The primary domain is to receive traffic for the Hydrogen storefront, while the subdomain will receive traffic for Shopify web checkout.
The hydrogen.shop demo provides an example of this pattern with a primary domain receiving traffic on the Hydrogen storefront while the checkout.hydrogen.shop subdomain receives traffic at checkout.
- From your Shopify admin, click Settings > Domains.
- For the Subdomain that you connected to Shopify, change the Target to Online Store.
- Set the domain type to Primary.
- In the Hydrogen storefronts interface, select the storefront that you want to take live traffic.
- Edit the environment by selecting the three dots and toggle to public.
- For the primary domain, change the Target to the production Hydrogen storefront .
- Set the domain type to Primary.
- If the Online store is password protected remove password to make public.
To handle a Shopify order status URL on your Hydrogen storefront, create a server component to handle the redirect, and add a new Route in App.Server.jsx that uses the server component.
To remove checkout from the beginning of the checkout.primarydomain.com URL, the following example script can be placed in the head of your theme.liquid file. This action redirects the visitor to primarydomain.com.
The following script handles the more complex case of redirecting a URL that includes a discount code: