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 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 use a client-side redirect in theme.liquid
.
Enabling bot protection for flash sales
Anchor link to section titled "Enabling bot protection for flash sales"If your custom storefront uses Cart and you want to enable bot protection, then customize your checkpoint.liquid
template before you schedule the protection. This prevents your client-side redirect from going to a /checkpoint
route on the custom storefront that doesn't exist and delivering a 404
response to customers.
After your scheduled bot protection has expired, you can keep this customization for future events such as flash sales.
The code following example assumes a checkout.shop.com
pattern for the subdomain. Update your checkpoint.liquid
template with the following code. You can change checkout
to reflect your chosen subdomain.
- Learn how to adopt Hydrogen incrementally for merchants who want to use the online store theme and Hydrogen channel side-by-side.