Skip to main content

Migrate from the online store to Hydrogen

This guide outlines considerations when migrating from the online store to Hydrogen.

Anchor to Shared cartsShared carts

Online store carts are compatible with the Storefront API and vice versa, making it possible to share carts between channels.

Both Liquid and Hydrogen cart IDs are stored in a cart cookie, which prevents customers from losing carts when migrating to or from Hydrogen.

Warning

In order for shared carts to work, the same products must be published to both the Online Store channel and your Hydrogen storefront.

Developer tools in a browser showing Cookies, with a cart cookie

Anchor to Subdomain for checkoutSubdomain for checkout

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….

To make sure your Hydrogen site works correctly, assign a subdomain for your storefront to checkout. For example, if your Hydrogen store is example.com, then assign checkout.example.com to checkout. To do this:

  1. Connect the subdomain

  2. Set the Target to Online Store.

  3. Set the Domain type to Primary.

Anchor to Configure routingConfigure routing

When you're migrating from Themes to Headless, you can define your own routes. For example, you might set the route that your cart is on at example.com/bag instead of example.com/cart.

To make sure that backlinks continue to work correctly, make sure you set up redirects for any customized routes.

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

/app/routes/cart.jsx

// Catch `/cart` and redirect to `/bag`
import {redirect} from '@shopify/remix-oxygen';

export function loader() {
return redirect('/bag');
}

Anchor to Online store redirects and canonical linksOnline store redirects and canonical links

To make sure any backlinks, such as from integrations, send traffic to your Hydrogen storefront and not your Liquid-based Online Store, be sure to set up redirects to take customers to your Hydrogen storefront.

For more information, refer to our redirect traffic doc.

Anchor to Product feedsProduct feeds

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

Anchor to Password protectionPassword protection

Online store password protection prevents Hydrogen checkouts. To remove password protection, do the following:

  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 NotificationsNotifications

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.

Anchor to Next StepsNext Steps

Was this page helpful?