Product- en categoriecomponenten met Hyvä UI

Product- en categoriecomponenten met Hyvä UI

70% van de koopbeslissingen valt op de PLP of PDP. De product card, de filterbalk, de imagegallery — dat zijn de momenten waarop een bezoeker afhaakt of converteert. Met Hyvä UI bouw je die componenten sneller, consistenter en aantoonbaar lichter dan met standaard Luma-oplossingen.

Wat is Hyvä UI — kort

Hyvä UI is het officiële design system en de componentbibliotheek van Hyvä. Gebouwd op Tailwind CSS en Alpine.js, HTML-first, minimale JavaScript. Het is GEEN Hyvä theme. Een Hyvä theme vervangt de volledige Magento 2 frontend (weg met RequireJS, jQuery en Knockout). Hyvä UI is een losse bibliotheek die je daarbovenop gebruikt — of op een Laravel-project, headless setup of statische site.

De bibliotheek bevat onder andere:

• Product cards (inclusief varianten, badges, hover-states)
• Buttons, forms, modals en dropdowns
• Accordions en tabs
• Navigatiecomponenten
• Filters en faceted search UI-patronen

Prijs: eenmalig circa 250 euro, per-ontwikkelaar/projectlicentie. Geen abonnement, geen jaarlijkse verlenging.

Er is ook een Figma Community-bestand met design tokens en componenten die 1-op-1 matchen met de code. Dat scheelt elke keer uitleggen aan een designer wat er wel en niet mogelijk is.

Product cards: meer dan een afbeelding en een prijs

Een product card op de PLP doet veel werk. Hij toont prijs, naam, en swatch-opties, geeft visuele feedback bij hover, en moet op mobile net zo snel laden als op desktop.

De standaard Luma product card sleept een berg JavaScript mee. Prijsboxen via Knockout, swatch-rendering via RequireJS-modules, lazy load via een custom jQuery-plugin. Elke laag voegt bytes toe.

Met Hyvä UI pak je een HTML-first card. Alpine.js regelt de interactiviteit — swatch-selectie, quick-add, tooltip — met tientallen regels JavaScript in plaats van honderden. Tailwind utility classes zorgen voor de styling, geen extra CSS-bestand nodig.

Wij zien bij klanten consistent dat product cards op Hyvä-basis 40–60% minder payload hebben dan hun Luma-tegenhanger. Dat vertaalt zich in snellere Largest Contentful Paint op de PLP, wat direct doorwerkt in Google-rankings en bounce rate.

Wat een goede product card doet

• Toont prijs inclusief kortingsindicator zonder JavaScript-waterval
• Laadt afbeeldingen lazy, maar met correcte width en height attributen (geen layout shift)
• Geeft directe visuele feedback bij swatch-selectie (Alpine x-data, geen round-trip)
• Is keyboard-navigeerbaar en heeft correcte aria-label attributen
• Werkt op 320px mobile net zo goed als op 1440px desktop

PLP-filters: conversie zit in de snelheid

Filters zijn het meest onderschatte conversie-element op een categoriepagina. Een merchant investeert duizenden euro's in productdata, maar als de filterbalk traag reageert of op mobile onbruikbaar is, verlaat de bezoeker de pagina.

De architecturale uitdaging: filters moeten state bijhouden (geselecteerde waarden), de URL updaten (voor linkbaarheid en analytics) en de productgrid refreshen — zonder een volledige pagina-reload.

Hyvä UI levert de UI-primitieven: accordions voor filtergroepen, checkboxes, dropdowns, modals voor de mobile filterdrawer. Hoe je de state en URL-logica inricht, hangt af van je setup (Elasticsearch, GraphQL, server-side render). De componenten zijn framework-agnostisch genoeg om in elke aanpak te passen.

Een patroon dat wij toepassen bij Magento 2 + Hyvä:

<!-- Alpine component voor een filtergroep -->
<div x-data="{ open: true, selected: [] }" class="border-b border-gray-200">
    <button
        @click="open = !open"
        class="flex w-full items-center justify-between py-3 text-sm font-medium"
        :aria-expanded="open"
    >
        <span>Merk</span>
        <svg x-show="!open" class="h-4 w-4" ...></svg>
        <svg x-show="open" class="h-4 w-4" ...></svg>
    </button>

    <div x-show="open" x-collapse class="pb-4 space-y-2">
        <template x-for="option in $store.filters.brand" :key="option.value">
            <label class="flex items-center gap-2 text-sm cursor-pointer">
                <input
                    type="checkbox"
                    :value="option.value"
                    x-model="selected"
                    @change="$store.filters.apply('brand', selected)"
                    class="rounded border-gray-300 text-blue-600"
                >
                <span x-text="option.label"></span>
                <span x-text="'(' + option.count + ')'" class="text-gray-400"></span>
            </label>
        </template>
    </div>
</div>

Dit is leesbaar, testbaar en heeft geen dependency buiten Alpine.js. Een junior developer begrijpt wat er gebeurt. Dat is ook een business-argument: minder specialistische kennis nodig voor onderhoud.

Imagegallery op de PDP: performance is UX

De productafbeelding-gallery bepaalt in grote mate hoe betrouwbaar een product overkomt. Slechte UX hier — slome laadtijd, kapotte zoom, geen swipe op mobile — kost directe conversie.

Met Hyvä UI bouw je een gallery met:

• Thumbnail-navigatie via Alpine x-data
• Afbeelding-zoom via CSS transform (geen zware bibliotheek)
• Swipe-support op mobile via Alpine x-on:touchstart en x-on:touchend
• Lazy loading van thumbnails buiten de viewport

Geen jQuery-carousel, geen Slick Slider, geen RequireJS-dependency. Het totale JavaScript voor een volwaardige gallery past in minder dan 50 regels Alpine-logica.

Performance in cijfers

Hyvä's filosofie: ~95% minder JavaScript dan Luma. In de praktijk zien wij Lighthouse-scores van 95+ op productpagina's die voorheen op 40–60 stonden. Dat is geen trucje — het is het resultaat van minder JavaScript, minder render-blocking resources en schonere HTML.

Betere Lighthouse-scores zijn geen doel op zich. Ze zijn een proxy voor echte gebruikerservaring. En betere gebruikerservaring leidt tot meer conversie — dat verband is door Google en door e-commerce benchmarks herhaaldelijk aangetoond.

Meer over het effect van performance op conversie: Hyvä UI en conversie-patronen.

Het Figma-voordeel in productieprojecten

Elk componentenproject loopt op een gegeven moment vast op het ontwerp-naar-code-gat. Een designer levert een Figma-scherm met een product card die er prachtig uitziet. De developer bouwt iets dat erop lijkt. Bij de review blijken spacing, border-radius en kleuren net niet te kloppen. Iteraties kosten tijd.

Met het Hyvä UI Figma Community-bestand werk je met dezelfde design tokens in Figma als in de code. De component in Figma is letterlijk de code-component. Dat elimineert een hele categorie van review-feedback.

Voor agencies en bureaus is dit ook een verkoop-argument richting klanten: "Dit is hoe het eruitziet, dit is wat je in productie krijgt."

Wanneer Hyvä UI niet de juiste keuze is

Eerlijkheid is meer waard dan een gesloten salesverhaal.

Hyvä UI is niet de juiste keuze als:

• Je op Luma blijft en geen Hyvä theme implementeert. Hyvä UI is ontworpen voor Tailwind-omgevingen; op Luma heb je een compleet andere toolchain.
• Je al een volwassen design system hebt (interne component library, Storybook, eigen tokens). Dan is Hyvä UI een tweede systeem dat je moet synchroniseren.
• Je project is headless met een React of Vue frontend. Dan wil je waarschijnlijk React-componenten of een andere bibliotheek, niet Alpine.js-snippets.
• Je hebt een eenmalige kleine webshop nodig. De eenmalige licentiekosten van circa 250 euro zijn laag, maar je hebt nog steeds een developer nodig die Tailwind en Alpine kent.

Gebruik Hyvä UI als je een Hyvä theme implementeert of een Tailwind-gebaseerde frontend bouwt en consistente, performante UI-componenten wil zonder vanaf nul te beginnen.

Integratie in een bestaand Hyvä-project

Als je al op Hyvä draait, is de installatie van Hyvä UI relatief eenvoudig. Je voegt de componenten toe aan je Tailwind-configuratie en Alpine-setup. Er is geen build-step anders dan wat je al hebt.

Wat we in de praktijk doen:

1. Hyvä UI installeren en configureren binnen de Tailwind content-paden
2. Bestaande Luma-achtige templates vergelijken met Hyvä UI-componenten
3. Product cards, filtercomponenten en gallery gefaseerd vervangen
4. Per component meten: LCP, CLS, Interaction to Next Paint (INP)

Gefaseerde aanpak werkt beter dan een big-bang-rewrite. Je hebt tussentijdse meetpunten en je kunt terugdraaien als een component onverwacht gedrag vertoont.

Meer over Hyvä UI als geheel: alles over Hyvä UI.

Wat dit betekent voor merchants

Als merchant hoef je de techniek niet te begrijpen. Wat je wilt weten:

• Laadt mijn PLP sneller? Ja, aantoonbaar.
• Converteren mijn filters beter op mobile? Als ze goed zijn gebouwd, ja.
• Ziet mijn shop er consistent uit na aanpassingen? Met design tokens wel.
• Kost dit extra licenties elk jaar? Nee, eenmalig.

De investering zit in de implementatie — een senior developer die weet wat hij doet. De licentie zelf is verwaarloosbaar.

Afsluitend

PLP- en PDP-componenten zijn geen commodity. Ze zijn de plek waar je winst wordt bepaald. Hyvä UI geeft je de bouwstenen om die componenten sneller te bouwen, beter te laten presteren en makkelijker te onderhouden.

Wil je weten of Hyvä UI past bij jouw Magento 2-omgeving? Neem contact op via /contact voor een gratis Tech Check. We kijken naar je huidige stack en geven een eerlijk advies — geen pitch, geen verkooppraatje.