1De uitdaging
Wie een kunstplant koopt, wil hem van alle kanten zien voordat hij bestelt. De standaard Magento-galerij kon niet laten zien wat Maxifleur wilde laten zien:
- Geen ondersteuning voor 360°-foto’s of productvideo.
- Een mobiele ervaring die niet paste bij een premium merk.
- Zware media vormen een risico voor de Core Web Vitals als ze direct laden.
- Het contentteam wilde zelf de volgorde van media per product bepalen, zonder developer.
Waarom video werkt voor kunstplanten
Formaat, bladdichtheid en kleur zijn lastig te beoordelen op één foto. Een korte video of een 360°-beeld beantwoordt die vragen op de productpagina, voordat de klant de klantenservice moet bellen of een product terugstuurt.
2Onze aanpak
We bouwden een volledig maatwerk galerijcomponent in Hyvä met Alpine.js en Tailwind CSS, ontworpen rond de productpagina’s van Maxifleur en te beheren vanuit de Magento-admin.
Eén galerij voor alle media
Foto’s, 360°-beelden en YouTube- of Vimeo-video’s in één component, in een volgorde die het team zelf aanpast.
Video zonder gewicht
Video’s laden pas als de klant op play klikt. Dat beschermt de laadtijd en de Core Web Vitals.
Voor touch en toetsenbord
Swipen op mobiel, navigeren met het toetsenbord op desktop en een ’toon meer’-optie voor producten met veel beelden.
Beheerd door het contentteam
Volgorde, alt-teksten en titels stel je per product in de Magento-admin in, zonder developer.
3Het resultaat
Maxifleur laat elke plant nu zien zoals een klant hem in de showroom zou zien. De sessieduur op productpagina’s ging omhoog na de livegang, en klanten die een video bekeken, legden vaker een product in hun winkelwagen dan klanten die alleen foto’s bekeken.
Na de livegang bleven we de galerij uitbreiden: video’s werken nu ook in Safari op Apple-apparaten, de galerij ging mee naar het nieuwe Hyvä V2-ontwerp en een ’toon meer’-optie houdt lange galerijen overzichtelijk.
Volgende stap: videolinks direct vanuit de Plytix PIM, zodat nieuwe productvideo’s zonder handwerk in de galerij komen.
?Veelgestelde vragen over productmedia in Magento
Kan Magento productvideo’s en 360°-foto’s tonen?
Niet goed uit de doos. Standaard Magento ondersteunt afbeeldingen en eenvoudige video, maar geen 360°-beelden of een eigen weergavevolgorde per mediatype. Een maatwerk galerijcomponent, zoals we voor Maxifleur bouwden, voegt dat toe zonder zware extensies.
Maakt video de productpagina niet trager?
Alleen als hij direct laadt. In deze galerij laadt de video pas als de klant op play klikt, dus de eerste paginalading merkt er niets van.
Kan ons contentteam de media zelf beheren?
Ja. Media, volgorde, alt-teksten en titels beheer je per product in de Magento-admin, met drag & drop.
Werkt dit ook op Luma?
Dit component is gebouwd voor Hyvä met Alpine.js. Bij een Luma-webshop kijken we eerst of een Hyvä-migratie zinvol is, omdat dat ook de algehele snelheid verbetert.
