Redirect traffic to the Hydrogen channel
When your Hydrogen storefront is ready for launch, you might need to redirect online traffic from the online store to your Hydrogen storefront so that customers don't mistakenly land on the wrong storefront.
In this tutorial, you'll learn how to redirect traffic from the online store to your Hydrogen storefront.
Requirements
Anchor link to section titled "Requirements"- You've completed your Hydrogen build and your Hydrogen storefront is ready for launch.
- You've added a domain and subdomain to your domain settings.
Step 1: Set up the domains
Anchor link to section titled "Step 1: Set up the domains"This step describes how to set up a primary domain to receive traffic for the Hydrogen storefront while using a subdomain to receive traffic for the Shopify web checkout.
Direct checkout traffic to the subdomain
Anchor link to section titled "Direct checkout traffic to the subdomain"- From the 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.
Make the Hydrogen storefront public
Anchor link to section titled "Make the Hydrogen storefront public"- From the Shopify admin, under Sales channels, click Hydrogen.
- In the Hydrogen storefronts interface, select the storefront that you want to receive online store traffic.
- Click
…beside the production environment, and then click Edit environment. - Change the URL privacy to Public, and then click Save.
Direct online store traffic to the domain
Anchor link to section titled "Direct online store traffic to the domain"- From the Shopify admin, click Settings > Domains.
- For the domain that you want to receive online store traffic, change the Target to the production Hydrogen storefront.
- Set the domain type to Primary.
Remove password protection
Anchor link to section titled "Remove password protection"- From the Shopify admin, under Sales channels, click Online Store > Preferences.
- In the Restrict store access section, deselect Restrict access to visitors with the password.
- Click Save.
Step 2: Redirect old order status URL requests to the online store
Anchor link to section titled "Step 2: Redirect old order status URL requests to the online store"If your online store had active orders before you launched your Hydrogen storefront, and the Hydrogen storefront uses the same domain formerly used by the online store, then customers will receive 404 pages when they click on the old order status URLs that are routing to your Hydrogen storefront. To prevent this, ensure that you redirect those requests back to the online store.
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:
Step 3: Redirect visitors to the Hydrogen storefront
Anchor link to section titled "Step 3: Redirect visitors to the Hydrogen storefront"After going live on a Hydrogen storefront, your online store remains active. Visitors can browse online store pages if they visit your {shop}.myshopify.com URL. If you want to serve your Hydrogen storefront to visitors who land on your checkout, then you should use a client-side redirect in theme.liquid.
To remove checkout from the beginning of the checkout.primarydomain.com URL, place the following example script 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:
- Learn how to adopt Hydrogen incrementally for merchants who want to use the online store theme and Hydrogen channel side-by-side.