Migrate from the online store to Hydrogen

Some merchants might want to adopt a Hydrogen storefront incrementally. For example, by first launching a Hydrogen storefront with just a product page and temporarily using the online store for everything else. You can do this by proxying specific routes. Learn more.

To share a cart between a Hydrogen storefront and the online store, such as when you're incrementally adopting Hydrogen, you’ll need to update your online store to use the Storefront API for carts instead of using Liquid carts. Learn more.

Regardless of whether you're using the online store or Hydrogen, customers are always directed back to a Shopify-hosted checkout. Traditionally, a checkout URL might look something like {shop}.myshopify.com/123456/checkouts….

It’s common to set up a subdomain for the purpose of checkout, for example checkout.example.com. To do this:

1. Connect the subdomain

2. Set the Target to Online Store.

3. Set the Domain type to Primary.

When you're migrating from an online store to a custom storefront, you can define your own routes. For example, product routes don't need to conform to a /products/[handle] URL path.

If you change routes, for example to /p/[handle], then set up redirects to help customers and search engines find your resources. This is especially important if you change the /cart route, which is linked to from the breadcrumbs at checkout.

The following is an example of setting up a redirect from /cart:

The online store has built-in support for shareable discount code links, with the URL structure /discount/[discount_code]. These links attach the discount code in the URL to a customer's cart, which is then applied automatically at checkout.

If you use these shareable discount code links with your customers in the online store channel, then you might want to have the same functionality in your custom storefront channel, on a /discount route.

We recommend that the logic you set in this route does the following:

1. Check if a cart exists
2. If a cart exists, then update the cart with the discount code
3. If a cart doesn't exist, then create a cart and include the discount code
4. Redirect to another page. For example, the home page

The online store has built-in support for cart permalinks, which link customers to Shopify checkouts or the online store cart, with pre-loaded items to complete a purchase.

Cart permalinks have the following URL structure:

You can also append query parameters to a cart permalink URL to include additional information. Learn more.

If you use cart permalinks with your customers in the online store channel, including the reordering feature available to new customer accounts, then you will want to include the same or similar functionality on the /cart route of your custom storefront channel.

If you decide to keep the online store channel accessible, be sure to set up redirects to take customers to your Hydrogen storefront. Assuming your Hydrogen storefront maintains the online store URL structure, you could do something like the following example:

If you use Shopify's out-of-the-box product feeds, then you'll need to set up feed rules (Facebook, Google) to use your Hydrogen storefront's domain.

When migrating to a custom storefront, if you decide to keep the online store channel accessible, add canonical links to all of the online store's page templates. The following is an example:

Make sure that the canonical URL reflects any structural changes that you've made to the URL. The following is an example:

Online store password protection also affects Hydrogen checkouts. To remove password protection:

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.

You can update notifications to use the same domain as your Hydrogen storefront.

1. From the Shopify admin, click Settings > Notifications.

2. Update the Notification URLs setting.

• Go live with Hydrogen go live on Hydrogen for merchants ready to publish their new Hydrogen storefront.