Magento 2 to Hydrogen: an industrial B2B rebuild story

A Tuesday morning in February. The e-commerce lead at a 44-person industrial distributor in Arnhem opens GA4 and watches the same chart she has watched every Monday for nine months. Organic sessions: down 7% quarter on quarter. Direct: flat. Paid: covering for both. The site loads. The site has always loaded. It just loads in 4.8 seconds on a throttled 4G connection, which is not nothing when Google has been measuring Largest Contentful Paint as a ranking signal since 2021.

The site is Magento 2.4.4. The build was done in 2019 by a Belgian agency that no longer answers email. The PHP version is locked because three custom modules will not survive an upgrade. The catalog is roughly 18,000 SKUs of industrial fasteners, fittings, and stainless tooling. The B2B portal handles credit-line customers with negotiated price lists. The checkout works. Everything works. Nothing is fast.

This is the rebuild story.

What we found in the Magento 2 install

Three things we have seen in every Magento 2 audit since 2022.

First: the front end was rendering Knockout.js templates server-side, then re-hydrating them client-side, then re-hydrating them again when the cart side panel opened. Lighthouse showed 4.8s LCP on the category pages and 6.1s on the homepage. The product pages were slightly better at 3.9s because the hero image was eager-loaded but uncompressed.

Second: full-page cache was on, but the cache key included a customer segment hash that varied per B2B contract. With roughly 600 active credit-line accounts, the hit rate on category pages was 11%. Effectively, every B2B customer was getting an uncached render.

Third: the indexer was stuck on price reindex twice a week. Whoever wrote the cron handler had wrapped a try/catch around the failure and emailed a webmaster account that nobody read.

This is the boring part. It is also where 70% of the recovered LCP came from.

Hydrogen instead of a Magento 2 upgrade

We are not religious about stacks. We have rescued Magento 2 sites that did not need to leave Magento. This was not one of them.

Two things mattered.

The first was the team. The Arnhem distributor had two in-house developers, both Vue-ish, both already shipping a small internal tool in React. They did not want to inherit a PHP, Knockout, and Magento layout XML stack from a previous agency. They wanted to read their own code in three years.

The second was the catalog. Shopify Plus had landed B2B price lists in 2023, and they were genuinely usable by 2025. Custom catalogs, draft orders, company-level payment terms, and quantity rules per company location are now first-class. For a B2B-leaning industrial brand, Plus removed the main reason to stay on Magento.

Hydrogen is Shopify's React-based framework built on Remix. It runs on Oxygen, Shopify's Cloudflare-backed edge runtime. The argument for Hydrogen in mid-2026 is straightforward: streaming HTML at the edge, automatic image transforms, and a tight integration with the Shopify Storefront API. The argument against it is that you are locking your storefront to Shopify's roadmap. For a distributor whose entire reason to rebuild was "stop maintaining the platform," that lock-in was the point, not the problem.

We considered Next.js with the Shopify Storefront API. It would have worked. It would also have meant two deployment pipelines (Vercel plus Shopify admin) and one extra surface to harden against drift. The two in-house developers voted Hydrogen. We agreed.

The migration plan, in four phases

Twelve weeks. One product manager from the client side, two ABN engineers, one Shopify Plus partner contact for B2B configuration, and the two in-house developers shadowing throughout.

Phase 1: catalog and content out of Magento

The hardest part of any Magento 2 migration is not the data. It is the price list logic. We extracted the catalog with a single SQL dump against the read replica, then wrote a Node script that mapped Magento's catalog_product_entity and catalog_product_entity_decimal tables into Shopify's product, variant, and metafield model. Configurable products became Shopify variants. Custom options became line item properties. The B2B price lists migrated as Shopify catalogs, one per customer tier.

We kept the Magento store running in parallel for the entire twelve weeks. The new Hydrogen site rendered against a Shopify staging store with daily catalog sync from a snapshot of Magento. Order writes were dual-routed through a small ingestion service so we could replay any week.

Phase 2: the Hydrogen storefront

Hydrogen 2025.1 was the target. We used the standard skeleton, then replaced the default product page with a streaming variant that loaded the gallery, price block, and add-to-cart in one server-rendered pass. The variant selector hydrates client-side, the rest does not need to. Category pages stream the first 24 products server-side and lazy-mount filters on intersection.

The single biggest LCP win was not Hydrogen. It was image transforms. Magento was serving 1600px JPEGs at 80% quality for a 480px slot. Shopify's Image API delivers AVIF at the requested width with a sizes attribute set correctly by the <Image> component. That alone removed about 1.4s of LCP on category pages.

Phase 3: B2B portal

This is where most Hydrogen rebuilds for B2B distributors stall. The Shopify Customer Account UI extension API matured in late 2025, but you still write portal pages as Hydrogen routes that authenticate against the Customer Account API. We rebuilt the credit-line dashboard, the quick-order CSV upload, and the contract-price browser as standard Hydrogen routes behind an auth wrapper.

The thing that surprised us: quick-order CSV upload was 60% of the order volume. We had budgeted it as a Phase 4 nice-to-have. We moved it to Phase 3 in week four after watching one session recording of a procurement clerk pasting 47 SKUs from a spreadsheet.

Phase 4: cutover and 301s

301 redirects from Magento URL keys to Shopify handles. About 18,000 product redirects and 240 category redirects, mapped from the url_rewrite table. We held them in Cloudflare Workers in front of Oxygen for the first six weeks so we could fix mismatches without redeploying.

DNS flipped on a Tuesday at 09:00. Search Console showed the first crawl at 09:14. Average crawl rate dropped 18% for ten days, then recovered to baseline by week three.

The numbers, two quarters in

LCP at the 75th percentile on mobile, taken from Search Console field data, not lab numbers:

• Homepage: 6.1s to 1.0s
• Category page: 4.8s to 1.1s
• Product page: 3.9s to 0.9s

Organic clicks recovered 14% quarter on quarter in Q1 and another 9% in Q2. We tracked the recovery to about 380 product pages that moved from page two to page one on long-tail queries (think "M8 stainless flange head bolt DIN 6921"). The category pages recovered slower. We expected that. Category-level intent is harder to claw back than long-tail product intent.

Organic-attributed revenue across the two quarters, against the trailing six-month baseline before the rebuild, came to €91,400. Of that, about €78,000 was B2B credit-line accounts who used to come back through paid search and now arrive via organic. The CFO did the maths on the paid search saving separately and added another €14,000 a quarter to the case.

What we got wrong

Two things, both worth naming.

We underestimated how long it would take Google to recrawl 18,000 product URLs. Search Console showed the bulk of indexing complete in seven weeks, but the long tail took fourteen. For ten weeks of that window, organic traffic was lower than the Magento baseline. The client had to hold their nerve. If we had set the expectation more carefully up front, the weekly check-in conversations would have been calmer.

We also burned about a week chasing a phantom add-to-cart bug that only happened in Safari iOS 17 for B2B customers on a specific contract price list. It turned out to be a cart attribute we were setting that exceeded a Shopify limit on attribute key length. The fix was eight characters of code. The diagnosis was four days.

What we kept

The Magento admin instance. The client used it as a read-only archive for six months while finance reconciled the old order tape. We exported it to a static SQL dump in November and shut the container down. Total cost of running the parallel Magento for nine months: about €340 in Hetzner hosting.

The ERP integration. The custom connector to their ERP (a 2014-vintage Exact Online integration) was rewritten as a Shopify webhook listener with retry-on-failure semantics. The old PHP cron job is gone. The new TypeScript service is 312 lines and has not paged anyone since cutover.

What we would do differently

We would start the B2B portal sooner. We would budget Search Console recovery at fourteen weeks, not seven. We would invest one more week in the procurement-clerk workflow before cutover, because that workflow is where the money actually moves.

We would not use Hydrogen if the team was not React-fluent. The framework is good, but the gap between a Liquid theme and a Hydrogen storefront is wider than the gap between Magento and Hydrogen. A non-React team will be more productive on a well-tuned Liquid theme on the same infrastructure.

The cheapest five-minute audit you can run on your own Magento store today: open the homepage in an incognito tab on a throttled 4G profile, hit F12, and read the LCP number in the Performance panel. If it is above three seconds, the rebuild conversation is worth having. If it is below 1.5s, you have other problems to solve first.

When we ran this rebuild for the Arnhem distributor, the lever that mattered most was not Hydrogen itself but the parallel-run discipline that let us roll back any week of cutover without panic. If you are weighing a legacy migration of your own, that parallel-run budget is the line item most teams forget.