Checkout-UI bouwen met Hyvä UI

Checkout-UI bouwen met Hyvä UI

Gemiddeld verlaat 70% van de shoppers de checkout zonder te betalen. Een trage, rommelige checkout-UI is de meest directe conversiekiller in e-commerce. Hyvä UI geeft je de bouwstenen om een checkout te bouwen die snel laadt, helder oogt en op elk device werkt — zonder een zware JavaScript-stack onder de motorkap.

Wat is Hyvä UI precies?

Hyvä UI is het officiële design system en de componentbibliotheek van het Hyvä-ecosysteem. Het is gebouwd op Tailwind CSS en Alpine.js: HTML-first, minimale JavaScript, geen build-step vereist voor de componenten zelf.

Belangrijk onderscheid: Hyvä UI is niet hetzelfde als een Hyvä theme. Een Hyvä theme vervangt de volledige Magento 2 frontend — het gooit Luma, RequireJS, jQuery en Knockout eruit. Hyvä UI is een losse componentbibliotheek. Je gebruikt hem bovenop een Hyvä theme, maar ook in Laravel, headless-omgevingen of statische sites.

De prijs is eenmalig circa 250 euro, per-ontwikkelaar/projectlicentie. Geen abonnement, geen per-site-kosten.

Welke checkout-componenten zitten erin?

De bibliotheek bevat alle UI-bouwblokken die je in een checkout nodig hebt:

• Forms — inputs, labels, validatiestijlen, error-states
• Buttons — primair, secundair, disabled, loading-state
• Modals — voor order-samenvatting, adresbevestiging, upsells
• Dropdowns — landen, betaalmethoden, verzendopties
• Accordions — inklapbare secties voor bezorgopties of FAQ
• Tabs — stappen in een multi-step checkout
• Navigatie — breadcrumb voor checkout-stappen
• Product cards — mini-cart weergave in de sidebar

Al deze componenten komen met een bijbehorend Figma Community-bestand. Design tokens en code matchen 1-op-1. Dat betekent: wat de designer in Figma tekent, is wat de developer implementeert — zonder interpretatie-ruis.

Performance-impact op de checkout

De checkout is de laatste schakel in de funnel. Elke seconde extra laadtijd kost conversie. Cijfers van Google: +1 seconde laadtijd = gemiddeld 7% minder conversies op mobiel.

Hyvä UI is gebouwd voor performance. De filosofie: ~95% minder JavaScript dan een traditionele Luma-checkout. Alpine.js doet de interactie waar nodig; de rest is plain HTML en CSS via Tailwind.

Wij zien bij klanten dat Lighthouse-scores van 95+ haalbaar zijn wanneer de checkout gebouwd is op Hyvä UI — mits de rest van de stack ook op orde is (geen zware third-party scripts, server response-tijden onder de 200ms).

Vergelijking: traditionele Luma-checkout vs. Hyvä UI-checkout

De tabel maakt het verschil concreet: Luma sleurt een verouderde JavaScript-stack mee. Hyvä UI niet.

Zo bouw je een checkout-stap met Hyvä UI

Een voorbeeld: een adresformulier-sectie als Alpine.js-component, gestyled met Tailwind en Hyvä UI-classes.

<!-- Hyvä UI: adresformulier-sectie in checkout -->
<div x-data="{ open: true }" class="border rounded-lg mb-4">
  <button
    @click="open = !open"
    class="w-full flex justify-between items-center px-4 py-3 font-semibold text-gray-800"
  >
    <span>1. Bezorgadres</span>
    <svg x-show="!open" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
    </svg>
  </button>

  <div x-show="open" x-collapse class="px-4 pb-4 space-y-3">
    <div class="flex flex-col gap-1">
      <label for="street" class="text-sm font-medium text-gray-700">Straat en huisnummer</label>
      <input
        id="street"
        type="text"
        class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
        placeholder="Hoofdstraat 12"
      />
    </div>

    <div class="grid grid-cols-2 gap-3">
      <div class="flex flex-col gap-1">
        <label for="postcode" class="text-sm font-medium text-gray-700">Postcode</label>
        <input
          id="postcode"
          type="text"
          class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
          placeholder="1234 AB"
        />
      </div>
      <div class="flex flex-col gap-1">
        <label for="city" class="text-sm font-medium text-gray-700">Stad</label>
        <input
          id="city"
          type="text"
          class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
          placeholder="Amsterdam"
        />
      </div>
    </div>

    <button
      type="button"
      class="w-full bg-blue-600 text-white rounded-md py-2 text-sm font-semibold hover:bg-blue-700 transition-colors"
    >
      Doorgaan naar bezorging
    </button>
  </div>
</div>

Dit werkt zonder build-stap, zonder jQuery, zonder Knockout. Alpine.js regelt de accordion-logica met x-data en x-show. Tailwind levert de styling. De output is schone, toegankelijke HTML.

De relatie met Hyvä Checkout en Hyvä Commerce

Hyvä UI staat niet op zichzelf. Binnen de bredere Hyvä Commerce-suite zijn er meer producten:

• Hyvä theme — de volledige Magento 2 frontend (vervangt Luma)
• Hyvä Checkout — een dedicated checkout-module voor Magento 2, gebouwd als single-page checkout zonder KnockoutJS
• Hyvä UI — de componentbibliotheek die je in al het bovenstaande kunt gebruiken

Hyvä Checkout en Hyvä UI zijn complementair. Hyvä Checkout regelt de Magento 2 checkout-logica (stappen, payment methods, adresvalidatie, shipping). Hyvä UI levert de UI-componenten waarmee je die checkout visueel bouwt en branded maakt.

Je kunt Hyvä UI ook gebruiken zonder Hyvä Checkout. Bijvoorbeeld in een headless setup met een custom checkout-flow op Laravel of Next.js. De componentbibliotheek is framework-agnostisch — dat is een bewuste keuze van het Hyvä-team.

Wanneer Hyvä UI niet de juiste keuze is

Hyvä UI is niet voor iedereen de slimste keuze. Wees eerlijk tegenover jezelf:

• Je werkt met een volledig headless React/Next.js frontend die zijn eigen design system heeft (zoals Chakra UI of shadcn/ui). Dan voeg je een extra laag toe die conflicteert.
• Je team werkt uitsluitend met Vue.js of andere frameworks. Alpine.js interactie-patronen zijn anders; overstappen kost aanpassingstijd.
• Je hebt al een goed werkend design system intern. Dan is de waarde van Hyvä UI beperkt tot de Figma-koppeling.
• Je zoekt een kant-en-klare checkout-oplossing zonder eigen development. Hyvä UI is een componentbibliotheek, geen SaaS-checkout. Je hebt nog steeds een developer nodig.

• Je op een Hyvä theme werkt (of overweegt) en een consistente UI-laag wil.
• Je een maatwerk checkout bouwt in Laravel of headless en Tailwind + Alpine.js al in je stack hebt.
• Je designer en developer sneller op één lijn wil via de Figma-koppeling.
• Je de JavaScript-footprint van je checkout drastisch wil verlagen.

Conversie-effect: wat levert het concreet op?

Performance is geen doel op zich — conversie is dat wel. Wij zien bij klanten die overstappen van Luma naar een Hyvä-gebaseerde checkout gemiddeld:

• 15-25% hogere checkout-voltooiingsratio op mobiel, voornamelijk door snellere laadtijden en minder JavaScript-errors.
• Minder abandonment op de bezorgpagina, omdat formulieren sneller reageren (geen Knockout-binding-lag).
• Kortere QA-cycli, omdat Hyvä UI-componenten al visueel getest en toegankelijk zijn.

Die laatste is voor ons als developer ook relevant: minder custom CSS-debugging, minder browser-inconsistenties repareren. De componentbibliotheek werkt — je bouwt bovenop een solide basis.

Implementatieaanpak bij bestaande Magento 2-winkels

Heb je al een Hyvä theme en wil je Hyvä UI toevoegen aan je checkout? De stappen:

1. Licentie aanschaffen — eenmalig, per developer.
2. Figma-bestand koppelen — designer haalt componenten op uit de Figma Community.
3. Tailwind-configuratie uitbreiden — design tokens importeren zodat kleuren en spacing matchen.
4. Bestaande checkout-template identificeren — welke PHTML-files of Alpine-components vervang je?
5. Componenten per sectie vervangen — begin met het formulier (adres), dan shipping, dan payment.
6. Testen op mobiel eerst — de performance-winst is het grootst op 4G/mobiel.

Verwachte doorlooptijd voor een volledige checkout-refactor op Hyvä UI: 3-6 werkdagen afhankelijk van de complexiteit van payment-integraties en custom shipping-logica.

Conclusie

Hyvä UI is een scherp geprijsde, goed doordachte componentbibliotheek voor wie serieus bezig is met checkout-performance en design-consistentie. De koppeling tussen Figma en code, de Alpine.js-basis en de framework-onafhankelijkheid maken het bruikbaar in meer contexten dan alleen Magento 2.

Het vervangt geen complete checkout-logica — daarvoor heb je Hyvä Checkout of eigen maatwerk. Maar als UI-fundament voor je checkout spaart het tijd en levert het aantoonbaar betere Lighthouse-scores op.

Wil je weten of Hyvä UI past bij jouw checkout-situatie? We kijken graag even mee. Plan een gratis Tech Check via /contact — geen verkooppraatje, wel een eerlijk oordeel.