Van Luma naar Hyvä: het complete migratie-stappenplan

Van Luma naar Hyvä: het complete migratie-stappenplan

Een Luma-shop laadt traag. Punt. De Knockout/RequireJS-stack van Magento sleept honderden kilobytes JavaScript mee voordat er iets klikbaar is. Hyvä gooit die laag eruit en haalt je Lighthouse-score van 30 naar 90+.

Maar een migratie is geen knop. Het is een frontend-rebuild. Wij begeleiden deze trajecten al sinds de eerste Hyvä-releases en zien dezelfde valkuilen telkens terugkomen. Dit is het stappenplan zoals wij het in echte projecten uitvoeren, met realistische doorlooptijden en de plekken waar het misgaat.

Wat je wel en niet migreert

Hyvä vervangt alleen je frontend theme. Je backend blijft Magento 2. Catalogus, orders, klanten, pricing-regels, indexers, cron: alles blijft staan. Dat is goed nieuws, want je data verhuist niet.

Wat je wél opnieuw bouwt:

• Alle .phtml-templates van je theme
• Alle CSS (van LESS naar TailwindCSS)
• Alle frontend JavaScript (van Knockout/jQuery naar Alpine.js)
• De frontend-integratie van elke third-party extensie

Dat laatste punt is de grootste kostenpost. Een extensie werkt op de backend prima door, maar de frontend-output moet je voor Hyvä opnieuw maken. Lees ook onze vergelijking van Hyvä en Luma performance als je nog twijfelt of de overstap loont.

Fase 1: Audit (3-5 dagen)

Begin nooit zonder inventarisatie. Wij brengen drie dingen in kaart.

Het resultaat is een scope-document met een eerlijke urenschatting. Wij benoemen hier ook expliciet wat je kúnt schrappen. Vaak draaien er extensies mee die niemand meer gebruikt. Niet migreren is altijd goedkoper dan wel migreren.

Fase 2: Theme opzetten (2-3 dagen)

Nu de basis. Je installeert Hyvä via Composer en genereert een child theme.

composer require hyva-themes/magento2-default-theme
bin/magento hyva:theme:create
bin/magento setup:upgrade

Daarna richt je de TailwindCSS-pipeline in. Hyvä draait Tailwind via PostCSS, niet via Magento's LESS-compiler. Je tailwind.config.js is vanaf nu je single source of truth voor kleuren, spacing en breakpoints.

Vul direct je design tokens in: brand-kleuren, fonts, container-breedtes. Doe je dit goed aan het begin, dan erven alle templates het automatisch. Doe je het slordig, dan zit je later overal hardcoded hex-waardes te corrigeren.

Fase 3: Templates overzetten (grootste fase)

Hier gaat 50-60% van het budget heen. Je bouwt elke pagina opnieuw met Hyvä's blocks en Alpine.js.

Onze volgorde, op basis van impact:

1. Header, footer, navigatie — overal zichtbaar, dus eerst
2. Productlijst (PLP) — category pages, filters, sorting
3. Productdetailpagina (PDP) — gallery, add-to-cart, tabs
4. Cart en mini-cart
5. CMS-pagina's en blocks
6. Account-secties

Voor elke template geldt: Knockout data-bind wordt Alpine x-data/x-bind. jQuery event-handlers worden @click. AJAX-calls naar Magento blijven hetzelfde endpoint, alleen de DOM-update verloopt via Alpine.

Een tweede valkuil: layout-XML klakkeloos overnemen. In Luma stop je veel logica in default.xml en talloze handle-bestanden. Hyvä verschuift veel daarvan naar de .phtml-templates zelf. Wie de oude XML-structuur kopieert, bouwt complexiteit in die er niet meer hoeft te zijn. Begin bij elk blok met een schone lei en voeg alleen toe wat de pagina echt nodig heeft.

Werk daarnaast met Hyvä's view-models in plaats van zware blocks met businesslogica. Dat houdt je templates leesbaar en testbaar. Het scheelt de volgende developer uren zoekwerk.

Twijfel je over de aanpak van een bestaande shop? Lees Hyvä installeren op een bestaande Magento-shop voor de praktische kant.

Fase 4: Extensie-compatibiliteit (parallel)

Dit loopt naast Fase 3. Per extensie zijn er vier scenario's.

• Officiële Hyvä-versie bestaat — installeren, configureren, klaar. Beste geval.
• Hyvä-compat module van de leverancier — een bridge-package dat de frontend levert. Werkt meestal, test grondig.
• Community-port bestaat — kwaliteit wisselt, valideer de code.
• Niets beschikbaar — je bouwt de frontend zelf, of je vervangt de extensie.

Dat laatste scenario is waar projecten uitlopen. Een review-tool, een product-configurator of een page-builder zonder Hyvä-support kan weken kosten. Wij adviseren dan vaak: vervang door een tool die wél Hyvä-native is. Goedkoper en toekomstvaster.

Een tweede aandachtspunt: GTM, tracking-pixels en cookie-consent. Die haakten in Luma vaak in op RequireJS-events die in Hyvä niet meer bestaan. Marketing-tags die "altijd werkten" vallen stil zonder dat iemand het merkt. Wij testen tracking daarom expliciet als onderdeel van deze fase, niet pas na go-live. Een conversie-pixel die een week niet vuurt, kost meer dan de hele migratie.

Maak per extensie een korte beslissing vast: porten, vervangen, of schrappen. Leg dat schriftelijk vast met de geschatte uren. Zo voorkom je dat een vergeten module halverwege het project alsnog opduikt en de planning omgooit.

Fase 5: Checkout (apart traject)

De checkout is in Luma een eigen Knockout-applicatie. Die migreert niet mee. Je hebt twee routes.

De checkout bepaalt je conversie. Onderschat dit niet. In onze vergelijking van Hyvä Checkout en Luma zie je waarom de snellere checkout direct conversie oplevert. Reken voor de checkout-implementatie zelf 1-2 weken, inclusief alle payment- en shipping-methodes opnieuw testen.

Fase 6: QA (1-2 weken)

Pas wanneer alles staat, ga je systematisch testen. Niet ad-hoc.

Onze QA-checklist dekt minimaal:

• Cross-browser: Chrome, Safari, Firefox, mobiel Safari, Samsung Internet
• Volledige order-flow: vanaf homepage tot en met order-confirmation, per payment-methode
• Alle producttypes: simple, configurable, bundle, virtual, downloadable
• Filters en search: elk attribuut, elke sortering
• Account-flows: registratie, login, wachtwoord-reset, order-historie
• Edge-cases: lege cart, voorraad nul, kortingscodes, gast-checkout

Draai ook een Lighthouse- en Core Web Vitals-test op de belangrijkste templates. Een goede Hyvä-migratie haalt LCP onder 2,5 seconde en een mobiele performance-score van 90+. Haal je dat niet, dan zit er ergens nog een zware extensie of een verkeerd ingeladen script.

Fase 7: Go-live (1 dag + nazorg)

De overstap zelf is technisch klein. Je zet het Hyvä-theme actief op de productie-store-view en cleart de caches.

Onze go-live-volgorde:

1. Deploy code naar productie (theme nog niet actief)
2. setup:upgrade en setup:static-content:deploy
3. Theme activeren op de store-view
4. Caches flushen, full-page-cache warmen
5. Smoke-test de order-flow live
6. Monitoring aan: error-logs, conversie, server-load

Plan go-live nooit op vrijdagmiddag. En houd je oude theme een paar dagen als rollback achter de hand. Verwijder pas wanneer een week productie-data bewijst dat alles draait.

Realistische doorlooptijd en kosten

Even eerlijk over verwachtingen. Een marketeer hoort "alleen de frontend" en denkt aan twee weken. De realiteit voor een gemiddelde shop is 6 tot 10 weken.

De kostendrijvers, op volgorde:

1. Aantal custom templates — lineair met de uren
2. Extensies zonder Hyvä-support — de grote onbekende
3. Checkout-complexiteit — payment- en shipping-variëteit
4. Custom JavaScript — Knockout naar Alpine herschrijven

Wat het oplevert: een frontend die twee tot drie keer sneller laadt, betere Core Web Vitals, en developers die weer met plezier aan je theme werken. Geen RequireJS-debugging meer. Lees meer over de techniek op onze Hyvä-pagina of bekijk wat een Magento-traject bij ons inhoudt.

Wil je een eerlijke scope en urenschatting voor jóuw shop? Neem contact op en we doen de audit. Geen sales, gewoon een senior developer die je codebase doorloopt.

Veelgestelde vragen

Hoe lang duurt een migratie van Luma naar Hyvä?

Voor een gemiddelde shop met 30-100 custom templates reken je op 6 tot 10 weken. Lichte shops kunnen in 3-5 weken klaar zijn. Zwaar verbouwde shops met veel niet-ondersteunde extensies lopen op tot 12-20 weken. De audit in week één geeft de zekerste schatting.

Raak ik mijn data of SEO kwijt bij de overstap?

Nee. Hyvä vervangt alleen de frontend; je Magento-backend, catalogus, orders en klanten blijven onaangetast. URL-structuur en metadata blijven hetzelfde. Mits je de templates correct opbouwt, verbetert je SEO juist door de snellere laadtijden en betere Core Web Vitals.

Werken mijn bestaande Magento-extensies met Hyvä?

De backend-logica van extensies werkt door. De frontend-output niet: die moet Hyvä-compatibel zijn. Veel populaire extensies hebben een officiële Hyvä-versie of een community-port. Extensies zonder support bouw je zelf om of vervang je. Dit inventariseer je in de auditfase.

Moet ik de checkout apart migreren?

Ja. De Luma-checkout is een aparte Knockout-applicatie die niet meemigreert. Je kiest meestal voor Hyvä Checkout, de Alpine-native variant. Reken hiervoor 1-2 weken extra, inclusief het hertesten van alle payment- en shipping-methodes.

Kan ik gefaseerd migreren of moet alles in één keer live?

De frontend-rebuild gebeurt in een aparte branch en gaat in één keer live per store-view. Je kunt wel per store-view of per land gefaseerd uitrollen als je meerdere websites draait. Eén pagina half-Hyvä en half-Luma laten draaien werkt niet; de JavaScript-stacks botsen.