Inhoud van dit artikel
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:
- Hyvä-compatibiliteitspakket installeren — als de vendor dit levert
- UI zelf herbouwen — de PHP-businesslogica van de extensie blijft, alleen de frontend-templates worden herschreven in Hyvä-stijl
- 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.
| Categorie | Typisch probleem | Oplossing |
|---|---|---|
| Layered navigation (filtering) | Knockout.js-afhankelijkheid | Hyvä-compatibiliteitspakket of rebuild |
| Zoek (Klevu, Doofinder, Algolia) | Eigen frontend-widgets | Vendor Hyvä-module of vervanging |
| Betaalmodules | Checkout JS-integratie | Hyvä Checkout compatibiliteitsmodule |
| Reviews (Kiyoh, Trustpilot, Yotpo) | Injectie in productpagina | Vendor module of eigen integratie |
| Loyalty / punten | Custom UI-componenten | Rebuild of alternatief |
| Productconfigurators | Zware Knockout.js-logica | Volledige rebuild |
| Chat-tools (LiveChat, Intercom) | Vaak vendor-script, werkt veelal | Controleer initialisatie |
| Cookie-consent | Doorgaans OK als script-gebaseerd | Testen vereist |
Tabel: doorlooptijd en kosten per projectomvang
| Projectomvang | Kenmerken | Doorlooptijd | Indicatieve kosten |
|---|---|---|---|
| Klein | < 10 extensies, standaard catalogus, weinig custom templates, geen B2B | 6-10 weken | €15.000 - €30.000 |
| Middelgroot | 10-25 extensies, custom navigatie/filters, eigen checkout-stijl, basis B2B | 10-18 weken | €30.000 - €65.000 |
| Groot | 25+ extensies, complexe productconfigurators, maatwerk-checkout, meerdere stores | 18-30 weken | €65.000 - €130.000 |
Prijzen zijn exclusief btw. Hyvä Theme zelf is sinds november 2025 gratis; een licentie voor Hyvä Checkout komt er los bij als je die gebruikt.
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?+
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.
