Take your storefront live

When your Hydrogen storefront is ready for launch, move your domain's traffic from the online store to your storefront so that customers land in the right place. Checkout still runs on Shopify, and your online store stays active after launch.

Anchor to What you'll learnWhat you'll learn

In this tutorial, you'll learn how to do the following tasks:

• Serve Shopify checkout from a subdomain.
• Point your primary domain at your Hydrogen storefront.
• Redirect visitors who land on online store pages.

Anchor to How it worksHow it works

Your primary domain, such as example.com, serves your Hydrogen storefront. A subdomain, such as checkout.example.com, serves Shopify checkout. The hydrogen.shop demo uses this pattern.

Anchor to RequirementsRequirements

• Deploy your storefront to production, using Oxygen or another runtime, and run the production checklist against it.
• If you deploy to Oxygen, then make sure that your store's plan includes a public environment. Development stores and trial plans can't make environments public.

Anchor to Step 1: Set up your checkout subdomainStep 1: Set up your checkout subdomain

Connect a subdomain to Shopify and make it your online store's primary domain, so that checkout runs on your own domain.

1. Add the subdomain:

   • If you bought your domain from Shopify, then in the Shopify admin, click Settings > Domains, click your domain, and then click Add subdomain. Enter a prefix, such as checkout, and then click Save. Shopify adds the DNS record for you.
   • If a third-party provider manages your domain, then add a CNAME record in your provider's DNS settings with the name checkout and the value shops.myshopify.com. Then, in the Shopify admin, click Settings > Domains > Connect existing domain, enter your subdomain, such as checkout.example.com, and follow the prompts.

2. In Settings > Domains, change the subdomain's Target to Online Store.

3. Set the subdomain's domain type to Primary.

DNS changes can take up to 48 hours to take effect. For provider-specific instructions, refer to Connect a subdomain.

Anchor to Step 2: Send storefront traffic to your domain (Oxygen only)Step 2: Send storefront traffic to your domain (Oxygen only)

Point your primary domain at your production Oxygen environment.

1. In your domain provider's DNS settings, point your domain to Shopify:

   • Add an A record with the name @ and the value 23.227.38.65. Remove any other A records for @.
   • Add an AAAA record with the name @ and the value 2620:0127:f00f:5::. Remove any other AAAA records for @.
   • Add a CNAME record with the name www and the value shops.myshopify.com.

2. In the Shopify admin, click Settings > Domains > Connect existing domain, enter your domain, and follow the prompts. If your domain is already connected, then skip this step.

3. Make your production environment public:

   1. In the Shopify admin, click Hydrogen, and then click your storefront.
   2. Click Storefront settings > Environments and variables.
   3. Click your production environment.
   4. Under URL privacy, select Public, and then click Save.

4. In Settings > Domains, change your domain's Target to your production Hydrogen storefront. Do the same for any other domains that should serve your storefront.

5. Set your domain's type to Primary.

For provider-specific DNS instructions, refer to Connect a third-party domain manually.

Anchor to Step 3: Turn off private modeStep 3: Turn off private mode

If your online store is in private mode, then make it public:

1. In the Shopify admin, click Online Store.
2. Click Private, and then select Public.
3. Click Update. If you're launching the store for the first time, then click Launch store instead.

Anchor to Step 4: Redirect online store visitorsStep 4: Redirect online store visitors

After launch, visitors can still browse online store pages at your {shop}.myshopify.com URL. To send them to your Hydrogen storefront, publish the Hydrogen redirect theme:

1. Download the Hydrogen redirect theme.
2. In the Shopify admin, click Online Store.
3. In the Draft themes section, click Import > Upload zip file, and then upload the ZIP file.
4. Click Edit theme on the redirect theme.
5. In Theme settings > Storefront, enter your Hydrogen storefront's domain in Hostname, without the protocol. For example, example.com.
6. Optional: To send online store paths to different storefront paths, add rules to Custom redirects, one rule per line, in the format /shopify-path > /storefront-path. For example, /account/login > /login.
7. Publish the theme.