Magento 2 naar Shopify Hydrogen: een B2B-rebuildverhaal

Een dinsdagochtend in februari. De e-commerce lead bij een industriële distributeur met 44 mensen in Arnhem opent GA4 en kijkt naar dezelfde grafiek die ze elke maandag al negen maanden bekijkt. Organic sessies: 7% omlaag kwartaal-op-kwartaal. Direct: vlak. Paid: dekt allebei af. De site laadt. De site heeft altijd geladen. Hij laadt alleen in 4,8 seconden op een afgeknepen 4G-verbinding, en dat is niet niks nu Google Largest Contentful Paint al sinds 2021 als rankingsignaal meet.

De site draait op Magento 2.4.4. De build is in 2019 gedaan door een Belgisch bureau dat geen e-mail meer beantwoordt. De PHP-versie staat vast omdat drie custom modules een upgrade niet overleven. De catalogus is grofweg 18.000 SKU's aan industriële bevestigingsmaterialen, fittingen en rvs-gereedschap. Het B2B-portaal regelt klanten op rekening met onderhandelde prijslijsten. De checkout werkt. Alles werkt. Niets is snel.

Dit is het verhaal van de rebuild.

Wat we aantroffen in de Magento 2-installatie

Drie dingen die we sinds 2022 in elke Magento 2-audit terugzien.

Eén: de front-end renderde Knockout.js-templates server-side, hydrateerde ze daarna client-side, en hydrateerde ze nog eens zodra het cart-zijpaneel openging. Lighthouse liet 4,8s LCP zien op de categoriepagina's en 6,1s op de homepage. De productpagina's waren iets beter met 3,9s omdat de hero-afbeelding wel eager-loaded was, maar niet gecomprimeerd.

Twee: full-page cache stond aan, maar de cache key bevatte een klantsegment-hash die per B2B-contract verschilde. Met ongeveer 600 actieve rekeningklanten was de hit rate op categoriepagina's 11%. Effectief kreeg elke B2B-klant een uncached render.

Drie: de indexer liep twee keer per week vast op de prijsreindex. Wie de cron handler had geschreven, had er een try/catch omheen gezet en mailde naar een webmaster-account dat niemand las.

Dit is het saaie deel. Het is ook waar 70% van de teruggewonnen LCP vandaan kwam.

Hydrogen in plaats van een Magento 2-upgrade

We zijn niet religieus over stacks. We hebben Magento 2-sites gered die niet weg hoefden van Magento. Deze was er niet zo één.

Twee dingen telden.

Het eerste was het team. De distributeur in Arnhem had twee in-house developers, allebei Vue-ish, allebei al een klein intern tooltje aan het bouwen in React. Ze wilden geen stack van PHP, Knockout en Magento layout-XML erven van een vorig bureau. Ze wilden hun eigen code over drie jaar nog kunnen lezen.

Het tweede was de catalogus. Shopify Plus had in 2023 B2B-prijslijsten live, en in 2025 waren ze echt bruikbaar. Custom catalogs, draft orders, betaaltermijnen op companyniveau en quantity rules per vestiging zijn nu first-class. Voor een industrieel merk met B2B-zwaartepunt haalde Plus de belangrijkste reden weg om op Magento te blijven.

Hydrogen is het React-framework van Shopify, gebouwd op Remix. Het draait op Oxygen, Shopify's edge runtime op Cloudflare. Het argument vóór Hydrogen halverwege 2026 is rechttoe rechtaan: streaming HTML aan de edge, automatische image transforms, en een strakke integratie met de Shopify Storefront API. Het argument ertegen is dat je je storefront vastpint op de roadmap van Shopify. Voor een distributeur waarvan de hele reden om te rebuilden 'stop met platform onderhouden' was, was die lock-in juist het punt, niet het probleem.

We hebben Next.js met de Shopify Storefront API overwogen. Dat had ook gewerkt. Het had ook twee deploymentpijplijnen betekend (Vercel plus Shopify admin) en één extra oppervlak om tegen drift te beschermen. De twee in-house developers stemden Hydrogen. Wij waren het ermee eens.

Het migratieplan, in vier fases

Twaalf weken. Eén product manager aan klantkant, twee ABN-engineers, één Shopify Plus-partnercontact voor B2B-configuratie, en de twee in-house developers die de hele tijd meeliepen.

Fase 1: catalogus en content uit Magento

Het lastigste deel van elke Magento 2-migratie zijn niet de data. Het is de logica van de prijslijsten. We trokken de catalogus eruit met één SQL-dump tegen de read replica en schreven daarna een Node-script dat Magento's catalog_product_entity- en catalog_product_entity_decimal-tabellen mapte op het product-, variant- en metafield-model van Shopify. Configurable products werden Shopify-varianten. Custom options werden line item properties. De B2B-prijslijsten migreerden als Shopify catalogs, één per klanttier.

We lieten de Magento-store de volle twaalf weken parallel draaien. De nieuwe Hydrogen-site renderde tegen een Shopify staging store met dagelijkse catalogussync vanuit een snapshot van Magento. Order writes liepen via een kleine ingestion service dubbel, zodat we elke week konden replayen.

Fase 2: de Hydrogen-storefront

Het doel was Hydrogen 2025.1. We gebruikten de standaard skeleton en vervingen de default productpagina door een streamingvariant die de gallery, het prijsblok en de add-to-cart in één server-rendered pass laadde. De variant selector hydrateert client-side, de rest hoeft dat niet. Categoriepagina's streamen de eerste 24 producten server-side en lazy-mounten de filters bij intersection.

De grootste LCP-winst kwam niet door Hydrogen. Die kwam door image transforms. Magento serveerde 1600px JPEG's op 80% kwaliteit voor een slot van 480px. Shopify's Image API levert AVIF op de gevraagde breedte met een sizes-attribuut dat de <Image>-component netjes zet. Alleen dat al haalde ongeveer 1,4s LCP weg op categoriepagina's.

Fase 3: B2B-portaal

Hier lopen de meeste Hydrogen-rebuilds voor B2B-distributeurs vast. De Shopify Customer Account UI extension API werd eind 2025 volwassen, maar je schrijft portaalpagina's nog steeds als Hydrogen routes die authenticeren tegen de Customer Account API. We bouwden het rekening-dashboard, de CSV-upload voor snel bestellen en de contractprijs-browser opnieuw als gewone Hydrogen routes achter een auth wrapper.

Wat ons verraste: CSV-upload voor snel bestellen was 60% van het ordervolume. We hadden hem ingepland als nice-to-have voor Fase 4. We schoven hem in week vier door naar Fase 3, na één sessieopname waarin een inkoper 47 SKU's uit een spreadsheet plakte.

Fase 4: cutover en 301's

301-redirects van Magento URL keys naar Shopify handles. Ongeveer 18.000 productredirects en 240 categoryredirects, gemapt vanuit de url_rewrite-tabel. We hielden ze de eerste zes weken in Cloudflare Workers voor Oxygen, zodat we mismatches konden fixen zonder te redeployen.

DNS ging op een dinsdag om 09:00 om. Search Console liet de eerste crawl om 09:14 zien. Gemiddelde crawl rate zakte tien dagen lang 18%, en was in week drie weer op baseline.

De cijfers, twee kwartalen later

LCP op het 75e percentiel mobiel, uit Search Console field data, niet uit lab-cijfers:

• Homepage: 6,1s naar 1,0s
• Categoriepagina: 4,8s naar 1,1s
• Productpagina: 3,9s naar 0,9s

Organic clicks herstelden 14% kwartaal-op-kwartaal in Q1 en nog eens 9% in Q2. We konden het herstel herleiden tot ongeveer 380 productpagina's die van pagina twee naar pagina één gingen op long tail-queries (denk aan 'M8 rvs flenskopbout DIN 6921'). De categoriepagina's herstelden trager. Dat hadden we verwacht. Categorie-intent terugwinnen is moeilijker dan long tail-productintent.

Omzet toegeschreven aan organic over de twee kwartalen, afgezet tegen de trailing zesmaandsbaseline van vóór de rebuild, kwam op €91.400. Daarvan was ongeveer €78.000 B2B-rekeningklanten die vroeger via paid search terugkwamen en nu via organic binnenlopen. De CFO rekende de besparing op paid search apart uit en zette daar nog €14.000 per kwartaal bij in de case.

Wat we fout deden

Twee dingen, allebei het noemen waard.

We onderschatten hoe lang Google erover zou doen om 18.000 product-URL's opnieuw te crawlen. Search Console liet zien dat het gros in zeven weken geïndexeerd was, maar de long tail deed er veertien over. Tien weken van dat venster lag organic traffic onder de Magento-baseline. De klant moest zijn kalmte bewaren. Hadden we die verwachting vooraf scherper neergezet, dan waren de wekelijkse check-ins rustiger geweest.

We hebben ook een week verbrand op een spookbug in add-to-cart die alleen optrad in Safari iOS 17 voor B2B-klanten op een specifieke contractprijslijst. Het bleek een cart attribute die we zetten en die over de Shopify-limiet op attribute key length heen ging. De fix was acht karakters code. De diagnose vier dagen.

Wat we hebben gehouden

De Magento-admin. De klant gebruikte hem zes maanden als read-only archief terwijl finance de oude orderhistorie reconcilieerde. We exporteerden hem in november naar een statische SQL-dump en zetten de container uit. Totale kosten van negen maanden parallel draaiende Magento: ongeveer €340 aan Hetzner hosting.

De ERP-integratie. De custom connector naar hun ERP (een Exact Online-integratie uit 2014) is herschreven als Shopify-webhook listener met retry-on-failure-semantiek. De oude PHP-cronjob is weg. De nieuwe TypeScript-service is 312 regels en heeft sinds cutover niemand wakker gebeld.

Wat we anders zouden doen

We zouden eerder met het B2B-portaal beginnen. We zouden voor het Search Console-herstel veertien weken inboeken, geen zeven. We zouden één week extra steken in de inkoperworkflow vóór cutover, want dáár loopt de omzet echt doorheen.

We zouden Hydrogen niet kiezen als het team niet React-vloeiend is. Het framework is goed, maar het gat tussen een Liquid-theme en een Hydrogen-storefront is groter dan het gat tussen Magento en Hydrogen. Een team zonder React is productiever op een goed afgesteld Liquid-theme op dezelfde infrastructuur.

De goedkoopste audit van vijf minuten die je vandaag op je eigen Magento-store kunt draaien: open de homepage in een incognitotab op een afgeknepen 4G-profiel, druk op F12 en lees het LCP-getal af in het Performance-paneel. Boven de drie seconden? Dan loont het rebuildgesprek. Onder de 1,5s? Dan heb je eerst andere problemen op te lossen.

Toen we deze rebuild deden voor de distributeur uit Arnhem, was de hefboom die er het meest toe deed niet Hydrogen zelf, maar de discipline van parallel draaien waardoor we elke week van de cutover konden terugrollen zonder paniek. Weeg je zelf een legacy-migratie? Dan is dat parallel-run-budget de regel die de meeste teams vergeten.