Skip to main content

Redirect traffic to the Hydrogen channel

Caution

These steps redirect traffic from the online store to your Hydrogen storefront. Before you begin, ensure that you've completed your Hydrogen build and tested it in development.

You should review the production checklist before launching your store on Hydrogen.

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.

Anchor to RequirementsRequirements

Anchor to Step 1: Set up the domainsStep 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.

Tip

The hydrogen.shop demo provides an example of this routing pattern. The primary domain hydrogen.shop receives traffic on the Hydrogen storefront while the subdomain checkout.hydrogen.shop receives traffic at checkout.

Anchor to Update domain DNS to point to ShopifyUpdate domain DNS to point to Shopify

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

For custom storefronts not hosted on Oxygen, only the subdomain must point to Shopify.

Anchor to Direct checkout traffic to the subdomainDirect checkout traffic to the subdomain

  1. From the Shopify admin, click Settings > Domains.
  2. For the Subdomain that you connected to Shopify, change the Target to Online Store.
  3. Set the domain type to Primary.

Anchor to Make the Hydrogen storefront publicMake the Hydrogen storefront public

  1. From the Shopify admin, under Sales channels, click Hydrogen.
  2. In the Hydrogen storefronts interface, select the storefront that you want to receive online store traffic.
  3. Click … beside the production environment, and then click Edit environment.
  4. Change the URL privacy to Public, and then click Save.

Anchor to Direct online store traffic to the domainDirect online store traffic to the domain

  1. From the Shopify admin, click Settings > Domains.
  2. For the domain that you want to receive online store traffic, change the Target to the production Hydrogen storefront.
  3. Set the domain type to Primary.

Make sure you also update any additional redirect domains to also target your Hydrogen storefront.

Anchor to Remove password protection (if enabled)Remove password protection (if enabled)

  1. From the Shopify admin, under Sales channels, click Online Store > Preferences.
  2. In the Restrict store access section, deselect Restrict access to visitors with the password.
  3. Click Save.

Anchor to Step 2: Redirect visitors to the Hydrogen storefrontStep 2: 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.

Was this page helpful?