Hyvä installeren op een bestaande Magento 2 shop

Hyvä installeren op een bestaande Magento 2 shop

Hyvä is geen nieuw thema dat je activeert. Het is een complete vervanging van de Magento 2-frontend.

Luma — het standaard Magento-thema — is gebouwd op RequireJS, Knockout.js en jQuery. Hyvä gebruikt Alpine.js en Tailwind CSS. Die twee architecturen spreken niet dezelfde taal. Alles wat op de frontend draait — templates, extensie-UI's, custom componenten — moet worden herbouwd of gevalideerd.

Dat is geen reden om het niet te doen. De performance-winst is reëel: Lighthouse-scores van 30-40 op Luma worden 85-100 op Hyvä. Maar het is een project, geen configuratiewijziging.

Wat je leert in dit artikel

• Wat Hyvä precies installeert en wat het vervangt
• De stappen van een Hyvä-migratie, conceptueel uitgelegd
• Welke extensies compatibiliteitsproblemen veroorzaken
• Wat je moet herbouwen en wat out-of-the-box werkt
• Kosten en doorlooptijd per projectomvang
• De vijf meest gemaakte fouten bij Hyvä-migraties

Wat Hyvä is en wat het vervangt

Hyvä Themes is een commercieel frontend-framework voor Magento 2. Het vervangt de volledige Magento-frontend stack:

• Weg: RequireJS, Knockout.js, jQuery, LESS, Magento UI-componenten
• Nieuw: Alpine.js, Tailwind CSS, native browser APIs, Hyvä-componenten

De Magento-backend — admin, API's, business logic, database — blijft volledig intact. Alleen de laag die de browser ziet verandert.

Hyvä levert een nieuwe set .phtml-templates en een Tailwind/Alpine-gebaseerde component-library. Die templates zijn slanker, sneller te renderen en produceren minder JavaScript.

Resultaat: pagina's die in Luma 150-250KB JavaScript laden, laden in Hyvä 30-60KB. Dat verschil zie je in Core Web Vitals, Lighthouse-scores en — uiteindelijk — in conversie.

Meer over de technische achtergrond lees je in onze vergelijking Hyvä vs. Luma performance.

De stappen van een Hyvä-installatie

Stap 1: licentie en pakketinstallatie

Hyvä vereist een commerciële licentie. Eenmalige aankoop, niet een jaarabonnement. Na aankoop krijg je toegang tot het Hyvä packages-repository.

De installatie verloopt via Composer. Je voegt het Hyvä-pakket toe aan je Magento-installatie als dependency. De kernmodules van Hyvä worden geregistreerd als Magento-modules.

Stap 2: compatibility audit

Vóórdat je ook maar een template aanraakt: inventariseer alle geïnstalleerde extensies en beoordeel hun Hyvä-compatibiliteit.

Dit is de meest onderschatte stap. Extensies die frontend-templates bevatten — en dat zijn bijna alle extensies — moeten worden gecontroleerd. Heeft de vendor een Hyvä-compatibiliteitsmodule uitgebracht? Werkt die module met jouw versie van de extensie? Is er een alternatief als de vendor geen Hyvä-support heeft?

De Hyvä-compatibiliteitslijst op de officiële site is een startpunt, maar niet altijd actueel. Controleer ook de GitHub-repositories van je extensies op Hyvä-branches of tags.

Stap 3: thema-configuratie en basisopzet

Je maakt een child-thema op basis van het Hyvä-basesthema. Daarin configureer je Tailwind: je brandingkleuren, fonts, breakpoints, custom utilities.

Hyvä gebruikt een Tailwind-buildproces dat via npm wordt gedraaid. Je JavaScript-bundel wordt geproduceerd via Rollup. Zorg dat je build-pipeline — lokaal en op je CI/CD-omgeving — dit ondersteunt.

Stap 4: template-herbouw

Dit is het grootste deel van het werk. Elke custom template die je in het Luma-thema had, bestaat niet in Hyvä. Je herschrijft ze in Hyvä-stijl: Tailwind-klassen voor layout en styling, Alpine.js voor interactie.

Componenten die typisch herbouw vragen:

• Header en navigatie (inclusief megamenu's)
• Productpagina (variant-selectors, afbeeldingsgalerij, add-to-cart)
• Categorieoverzicht en filters (layered navigation)
• Minicart en winkelwagen
• Checkout (standaard of via Hyvä-Checkout apart pakket)
• Zoekresultaten
• CMS-pagina's met custom layout

Stap 5: extensie-UI herbouwen of vervangen

Voor elke extensie zonder Hyvä-compatibiliteitspakket heb je drie opties:

1. Hyvä-compatibiliteitspakket installeren — als de vendor dit levert
2. UI zelf herbouwen — de PHP-businesslogica van de extensie blijft, alleen de frontend-templates worden herschreven in Hyvä-stijl
3. Extensie vervangen — door een alternatief dat wel Hyvä-compatibel is

Optie 2 is tijdrovend maar soms de enige route voor niche-extensies.

Stap 6: checkout

De standaard Magento 2-checkout is gebouwd op Knockout.js. Hyvä levert een apart pakket: Hyvä Checkout. Dat is een volledige rebuild van de checkout-flow in Alpine.js, met betere performance en meer aanpasbaarheid.

Hyvä Checkout vereist extra installatie en configuratie. Betaalmodules hebben ook Hyvä Checkout-compatibiliteit nodig. Controleer dit vóór je start.

Sommige shops kiezen voor een headless checkout (Bolt, Hyva Checkout, of een custom oplossing) in plaats van de standaard Magento-checkout. Plan deze keuze vroeg in het project.

Stap 7: testen en valideren

Test op minimaal drie apparaattypen (desktop, tablet, mobiel) en meerdere browsers. Doorloop de volledige klantreis: zoeken, filteren, productpagina, toevoegen aan winkelwagen, checkout.

Valideer ook de niet-zichtbare functionaliteit: events die marketing-tools aansturen (Google Analytics 4, Meta Pixel), correcte schema-markup voor SEO, korrekte canonicals.

Stap 8: livegang en monitoring

Livegang verloopt via een standaard Magento-deployment. Hyvä produceert statische bestanden via bin/magento setup:static-content:deploy — zorg dat dit onderdeel is van je deploy-pipeline.

Monitor na livegang: Core Web Vitals in Search Console, foutmeldingen in je logging, conversiepercentage in analytics. Verwacht de eerste week kleine correcties.

Compatibility checklist: kritische extensies

Dit zijn de extensiecategorieën die het vaakst problemen geven.

Tabel: doorlooptijd en kosten per projectomvang

Prijzen zijn exclusief BTW en exclusief Hyvä-licentiekosten (eenmalig circa €1.000-€1.500 voor de standaard licentie).

Top 5 fouten bij Hyvä-migraties

Fout 1: extensiecompatibiliteit te laat ontdekken

De meest gemaakte fout. Halverwege het project blijkt een cruciale extensie geen Hyvä-support te hebben en ook niet eenvoudig te herbouwen. Planning en budget gaan overboord.

Oplossing: doe de volledige extensie-audit in week één van het project. Neem besluiten over vervangen of herbouwen voordat de bouw start.

Fout 2: Hyvä Checkout als afterthought behandelen

De checkout is de meest complexe Knockout.js-component in Magento. Teams die Hyvä installeren zonder Hyvä Checkout te plannen, eindigen met een Luma-checkout in een Hyvä-winkel. Die is functioneel, maar trager dan de rest van de shop.

Oplossing: besluit vóór de start of je Hyvä Checkout implementeert en reken het mee in de planning.

Fout 3: Tailwind-configuratie niet afstemmen op brandguidelines

Hyvä wordt geleverd met een standaard Tailwind-configuratie. Teams die dit overslaan en direct beginnen te bouwen, krijgen een winkel in standaard Hyvä-stijl. De huisstijl is dan een herbouwronde later.

Oplossing: configureer Tailwind — kleuren, fonts, spacing, breakpoints — voordat je templates bouwt.

Fout 4: build-pipeline voor deployment niet inrichten

Hyvä vereist een node/npm-buildstap om de Tailwind-CSS-output te genereren. Teams die dit niet opnemen in hun CI/CD-pipeline deployen later handmatig of vergeten de CSS te herbouwen na een themawijziging.

Oplossing: richt de build-pipeline vroeg in het project in. Automatiseer npm run build als onderdeel van elke deployment.

Fout 5: GA4 en marketing-events niet opnieuw valideren

Hyvä gebruikt andere events dan Luma. Je GTM-implementatie die op Luma werkte, werkt niet zomaar op Hyvä. Add-to-cart events, purchase events, enhanced ecommerce: alles moet opnieuw worden gevalideerd en mogelijk herschreven.

Oplossing: neem een dedicated testfase op voor tracking-validatie. Gebruik Google Tag Assistant en GA4 DebugView om events te verifiëren.

Wat je terugverdient

De investering in een Hyvä-migratie verdient zich terug via performance.

Google/Deloitte-data: elke seconde laadtijdverbetering op mobiel levert gemiddeld 7% conversie-uplift op. Luma-shops scoren gemiddeld 3-4 seconden op mobiel. Hyvä-shops halen 0,8-1,5 seconden.

Bij een webshop met €2 miljoen jaaromzet en 60% mobiel aandeel: €1,2 miljoen mobiele omzet. Een conservatieve uplift van 10% op mobiel levert €120.000 extra per jaar. Een investering van €40.000 verdient zich dan terug in 4 maanden.

Lees meer over onze aanpak bij Magento-projecten of bekijk de extensie-compatibiliteitsoverzicht voor een overzicht van veelgebruikte extensies.

Conclusie: voorbereiding bepaalt succes

Een Hyvä-migratie die goed is voorbereid, loopt zonder grote verrassingen. De extensie-audit, de checkout-beslissing en de build-pipeline-inrichting zijn de drie pijlers die het meest bepalen of een project op tijd en binnen budget wordt opgeleverd.

Wil je weten wat een Hyvä-migratie voor jouw shop betekent? Neem contact op voor een vrijblijvende analyse van jouw extensie-stack en een eerlijke inschatting van het traject.

Veelgestelde vragen

Is Hyvä een thema of een framework?

Hyvä is een commercieel frontend-framework voor Magento 2. Het vervangt de complete Luma-frontend stack (RequireJS, Knockout.js, jQuery, LESS) door Alpine.js en Tailwind CSS. Het is geen thema dat je over Luma heen legt — het is een architecturele vervanging.

Werken alle Magento-extensies op Hyvä?

Nee. Extensies die frontend-templates bevatten, moeten gecontroleerd worden op Hyvä-compatibiliteit. Veel populaire vendors bieden een apart Hyvä-compatibiliteitspakket aan. Extensies zonder zo'n pakket moeten worden herbouwd of vervangen.

Wat kost een Hyvä-licentie?

De standaard Hyvä-licentie is een eenmalige aankoop van circa €1.000 tot €1.500. Er zijn geen jaarlijkse abonnementskosten voor de licentie zelf. Hyvä Checkout en andere add-ons zijn apart geprijsd.

Moet ik mijn checkout ook herbouwen voor Hyvä?

De standaard Magento-checkout werkt op Luma/Knockout.js en is niet automatisch compatibel met Hyvä. Hyvä biedt Hyvä Checkout als apart pakket. Overweeg dit als onderdeel van het migratiescope — een Luma-checkout in een Hyvä-shop is functioneel maar suboptimaal.

Hoeveel performance-winst mag ik verwachten?

Bij goed geïmplementeerde Hyvä-shops stijgt de mobiele Lighthouse-score van 30-40 (Luma) naar 85-100. Laadtijden dalen van 4-6 seconden naar 0,8-1,5 seconden op mobiel. De exacte winst hangt af van de extensiestack, hostingomgeving en beeldoptimalisatie.