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.

Update domain DNS to point to Shopify

Anchor link to section titled "Update domain DNS to point to Shopify"

Point the subdomain and the primary domain to Shopify by updating DNS records

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 route to handle the redirect:

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 online store pages, then you should download and publish the Hydrogen redirect theme, which includes client-side redirection in the theme.liquid template and a customized checkpoint.liquid template to use with bot protection.

Next steps

Anchor link to section titled "Next steps"

Learn how to adopt Hydrogen incrementally for merchants who want to use the online store theme and Hydrogen channel side-by-side.