Discussion: Enabling Coexistence of Online Store and Shopify Hydrogen

[taiyangluoshanle]

Discussion: Enabling Coexistence of Online Store and Shopify Hydrogen

Background

Shopify provides two main approaches for building storefronts:

1. Online Store – The default Shopify storefront using Liquid templates.
2. Hydrogen – A React-based framework for building headless commerce experiences.

In some cases, merchants may want to use both simultaneously. For example:

• Migrating from an Online Store to Hydrogen gradually.
• Keeping Online Store as a backup while testing Hydrogen.
• Running Hydrogen for specific pages (e.g., landing pages) while keeping the Online Store for the rest.

Current Approach: Proxy Routes to Online Store

Currently, we follow the method outlined in Shopify's documentation:
🔗 Proxy Routes to Online Store

How It Works

Hydrogen acts as the primary storefront, but when a page is not handled in Hydrogen, it proxies requests to the Online Store.

• This is done via the Remix loader function, which forwards requests for certain routes to Shopify’s Online Store.
• The Online Store handles rendering these pages using Liquid.

Implementation Example

export const loader: LoaderFunction = async ({ request }) => {
  const url = new URL(request.url);

  // Define the routes you want to proxy
  const onlineStoreRoutes = ['/collections', '/products', '/blogs'];

  if (onlineStoreRoutes.some(route => url.pathname.startsWith(route))) {
    return proxyToOnlineStore(request);
  }

  return null;
};