Hyvä CMS met liveview: content publiceren zonder ticket

Een banner aanpassen, een landingspagina voor een actie zetten, een categorietekst herschrijven. In veel Magento-shops wordt dat een ticket, omdat de editor traag is, de preview niet klopt of één verkeerde klik de opmaak breekt. Hyvä CMS, onderdeel van Hyvä Commerce, pakt dat anders aan: een componentgebaseerd CMS met een visuele editor die de echte storefront-templates gebruikt.

Wat Hyvä CMS is

Hyvä beschrijft het als een componentgebaseerd contentmanagementsysteem met een live visuele editor. Twee rollen zijn duidelijk gescheiden:

• Het team bouwt componenten: een hero, een USP-balk, een productcarrousel, een FAQ-blok. Elk component heeft vaste velden en een template.
• Het contentteam stelt pagina's samen uit die componenten en vult de velden in, met direct zicht op het resultaat.

Je kunt er meer mee bewerken dan alleen CMS-pagina's:

• CMS-pagina's en CMS-blokken
• Productattributen, zoals beschrijvingen
• Categorieattributen, zoals categorieteksten
• Herbruikbare templates en snippets
• Eigen entiteiten, zoals een blogmodule, als het team die aansluit

De Liveview Editor in de praktijk

De Liveview Editor is het deel waar het contentteam mee werkt. De belangrijkste functies:

• Live preview: je bewerkt de content en ziet het resultaat zoals het op de storefront wordt gerenderd. Door op een element in de preview te klikken, spring je naar het bijbehorende veld.
• Concepten: je slaat wijzigingen op zonder dat de live content verandert, en publiceert pas als het klaar is.
• Versiegeschiedenis: eerdere versies bekijken, vergelijken, terugzetten, vastpinnen en een naam geven. Een fout gepubliceerde wijziging draai je zo in een paar klikken terug.
• Geplande publicatie: content inplannen op datum en tijd, los van Adobe Content Staging. Wijzigingen groepeer je in een release; volgens de documentatie kan een release standaard tot 100 geplande items bevatten.

Die combinatie is voor campagnes het verschil. De Black Friday-homepage staat klaar als concept, is door iemand anders gecontroleerd, en gaat automatisch live om middernacht.

Verschil met de standaard Magento-editor

Het verschil in bouwstenen is groter dan het lijkt. In een generieke page builder kan een contentmedewerker alles: elk lettertype, elke marge, elke kolomverdeling. Dat leidt na een jaar tot pagina's die niet meer op elkaar lijken. Met vaste componenten blijft het design consistent, omdat het team bepaalt welke opties er zijn.

Zo bouwt het team een component

Een component bestaat uit twee delen in een eigen Magento-module: een declaratie in etc/hyva_cms/components.json en een PHTML-template.

{
  "usp_banner": {
    "label": "USP-banner",
    "template": "Vendor_Module::elements/usp_banner.phtml",
    "content": {
      "title": {
        "type": "text",
        "label": "Titel",
        "default_value": "Voor 23:00 besteld, morgen in huis"
      }
    }
  }
}

De template leest de velden uit via getters. Het veld title wordt getTitle():

<?php
use Hyva\CmsLiveviewEditor\Block\Element;
use Magento\Framework\Escaper;

/** @var Element $block */
/** @var Escaper $escaper */
?>
<div class="bg-primary text-white py-3 text-center">
    <p <?= /** @noEscape */ $block->getEditorAttrs('title') ?>>
        <?= $escaper->escapeHtml($block->getTitle()) ?>
    </p>
</div>

getEditorAttrs() maakt het veld klikbaar in de preview. Omdat de template gewoon Hyvä-PHTML met Tailwind is, ziet de preview er precies zo uit als de live pagina. Raadpleeg de documentatie van Hyvä voor de beschikbare veldtypes; je versie van Hyvä CMS bepaalt welke opties er zijn.

Praktische tip: begin met een kleine set van tien tot vijftien componenten die je bestaande pagina's dekken. Voeg componenten toe op basis van wat het contentteam echt mist, niet op voorhand.

Waarom liveview werkt op Hyvä

Een live preview op de klassieke Luma-frontend is lastig, omdat een render daar afhangt van veel JavaScript-initialisatie, RequireJS en Knockout. Hyvä rendert HTML server-side met een kleine laag Alpine.js. Een render is daardoor licht genoeg om tijdens het bewerken te tonen, zonder aparte build-stap of preview-omgeving.

Onder de motorkap blijft het Magento. Prijsregels, klantgroepen en je bestaande backend-integraties werken zoals ze werkten. Het CMS is een laag bovenop je data, geen vervanging van de kern. Dat maakt de overstap overzichtelijker dan een volledig headless CMS met een aparte frontend.

Image Editor en media-optimalisatie

Twee tools die klein lijken, maar veel heen-en-weer schelen:

• Image Editor: bijsnijden en aanpassen in de admin. Geen export uit een externe tool en opnieuw uploaden voor elke variant. Je stelt de kwaliteit voor JPG-bestanden in de media library centraal in.
• Media Optimization: resizen en converteren naar WebP en AVIF. De Hyvä CMS-componenten gebruiken dit standaard, en een observer vervangt afbeeldingen in de pagina door de geoptimaliseerde versies. Hyvä markeert deze feature op het moment van schrijven als beta.

Het effect voor performance: contentmensen die een te zware foto uploaden, maken niet meer ongemerkt de LCP van je homepage kapot. Zie ook ons artikel over de image editor en media-optimalisatie.

De contentworkflow: van ticket naar zelf publiceren

Zo verschuift een typische aanpassing:

Het team houdt tijd over voor technisch werk, en marketing plant minder defensief omdat een last-minute wijziging geen ticket meer is. Wie de controle heeft over content, ligt ook vast: het team bouwt de architectuur en de componenten, het contentteam beheert de inhoud.

Meer merchant-tools op dezelfde editor

De Liveview Editor wordt in Hyvä Commerce ook voor andere modules gebruikt:

• Form Builder: webformulieren visueel bouwen.
• Email & Newsletter Templates: e-mails en nieuwsbrieven met dezelfde editor opmaken.
• Menu Builder en Category Merchandiser voor navigatie en de volgorde van producten in categorieën.
• Advanced Admin Permissions om te bepalen wie wat mag bewerken en publiceren.

Daarnaast horen een vernieuwd admin-theme en een dashboard bij de suite.

Zo rol je het uit zonder chaos

1. Technische audit. Welke maatwerk-modules en integraties raken de frontend, en welke content staat nu in Page Builder of een andere editor?
2. Design tokens en componenten. Leg kleuren, typografie en spacing vast in de Tailwind-configuratie en bouw de eerste set componenten op basis van je bestaande pagina's.
3. Rechten vastleggen. Bepaal wie concepten maakt, wie publiceert en wie releases inplant. Richt dat in met de admin-rechten.
4. Content migreren. Zet de belangrijkste pagina's eerst over. Oude pagina's kunnen tijdelijk blijven staan.
5. Trainen. Een korte praktijksessie met het contentteam op hun eigen pagina's werkt beter dan een handleiding.
6. Nulmeting. Meet Core Web Vitals en doorlooptijd van contentwijzigingen vóór livegang, zodat je het verschil kunt aantonen.

Techniek eerst, content-onboarding daarna. Wie beide tegelijk probeert, krijgt een contentteam dat test op een half gebouwde omgeving.

Licentie en kosten

Hyvä CMS koop je niet los; het hoort bij Hyvä Commerce. Hyvä publiceert voor Hyvä Commerce op Magento Open Source een jaarabonnement van € 3.000 of € 15.000 voor vijf jaar vooruit (stand oktober 2026). Op Adobe Commerce heb je Hyvä Enterprise nodig, met een andere prijs. Implementatie komt daar bovenop. Het volledige overzicht staat in ons artikel over kosten en licentie van Hyvä Commerce.

Let op: sinds november 2025 is Hyvä Theme gratis. Als je alleen een snelle frontend wilt en weinig content beheert, is het thema zonder Commerce misschien genoeg. Je betaalt voor Hyvä Commerce vooral vanwege tools zoals dit CMS.

Wanneer Hyvä CMS niet de juiste keuze is

• Weinig contentwerk. Drie CMS-pagina's die eens per kwartaal veranderen rechtvaardigen de licentie niet.
• Eén persoon die tevreden is met de huidige tooling. Dan is de winst klein.
• Al tevreden met een headless CMS zoals Storyblok of Contentful in een headless setup. Dan is er minder reden om te wisselen.
• Zware Luma-maatwerk-frontend. Bestaande UI-componenten moeten naar Tailwind en Alpine. Hoe meer maatwerk, hoe meer werk.
• Magento onder 2.4.4. Eerst upgraden.

Wanneer wel

Het wordt interessant bij een combinatie van:

• Een contentteam dat dagelijks of wekelijks in de admin werkt
• Campagnes met vaste deadlines die je wilt inplannen
• Frustratie met de huidige editor en content-tickets die bij het team blijven hangen
• Hyvä al op de roadmap voor performance
• De wens om losse CMS- en image-extensies uit de stack te halen

Wil je weten of Hyvä CMS bij je team past? In een gratis Tech Check kijken we naar je stack, je contentworkflow en je performance, en krijg je een eerlijk advies. Meer over onze aanpak op de Hyvä-pagina, of plan direct een gesprek via contact.