De nieuwe ESTAhome webshop ontwikkeld op Magento 2 & Hyvä

Op zoek naar de nieuwste woon- en modetrends? Of gewoon naar inspiratie? Bij ESTAhome is het allemaal te vinden, van fotobehang tot dekbedovertrekken! De designers van ESTAhome reizen de hele wereld over en zetten inspiratie om naar hippe en stijlvolle collecties. De kwalitatief hoogstaande producten worden in Nederland geproduceerd en inmiddels wereldwijd verkocht, van Shanghai tot Londen. De producten zijn in Nederland te koop bij de betere speciaalzaken.

Om de wereldwijde klanten van ESTAhome via alle kanalen te bedienen heeft BigBridge een razendsnelle en gebruiksvriendelijke Magento 2 Multistore ontwikkeld. We hebben hiervoor gebruik gemaakt van het Hyvä template, om klanten de beste gebruikservaring en hoogste snelheid te kunnen bieden!

		Gebruiksvriendelijke Productgrid Omdat de producten van ESTAhome veelal in meerdere kleuren en maten aangeboden worden is er gekozen om een gebruiksvriendelijke productgrid te ontwikkelen. Hierin wordt de belangrijkste informatie direct getoond. Bij het klikken op de kleur onder de afbeelding, wordt er direct naar de productpagina van deze variant gegaan. Om dit in te richten hebben we relaties aangemaakt op basis van maat en kleur. Ook hebben we een leverbelofte in het productgrid geïmplementeerd. Zo kan de klant direct zien of het artikel op voorraad is en wanneer het verzonden wordt. Dit geldt ook voor de mogelijkheid van proefstalen bestellen. Door deze elementen te tonen in het productgrid kan de klant de belangrijkste informatie al zien zonder door te klikken naar het product.

Sfeer en gebruikersgemak Op de desktopversie van de website wordt er een sfeerafbeelding getoond wanneer over de afbeelding in het productgrid wordt “gehoverd”. Op de mobiele versie wordt deze sfeerafbeelding bij de productafbeelding getoond, met de optie om deze te vergroten.

		GraphQl Voor de weergave van het productgrid is gebruik gemaakt van GraphQl. Dit heeft als voordeel dat er maar één request gedaan hoeft te worden om meerdere query resultaten op te halen. Door onder meer gebruik te maken van deze nieuwe techniek zijn we in staat om een pagespeed van 99 te realiseren!

Productpagina Bij het openen van de productpagina wordt een compacte pagina getoond. De pagina kan uitgeklapt worden en dan worden de SEO vriendelijke omschrijving en specificaties zichtbaar. Zo hebben we gebruiksvriendelijkheid gecombineerd met de SEO eisen van Google. Ook is er op de productpagina de optie geïmplementeerd om een proefstaal te bestellen. Deze wordt dan direct in de winkelwagen toegevoegd.

		Calculator Om het de klant zo makkelijk mogelijk te maken heeft de productpagina ook een calculator. In deze calculator kunnen de afmetingen van verschillende muren ingegeven worden. Er wordt vervolgens een berekening gemaakt hoeveel rollen er nodig zijn. Om de klant te ontzorgen wordt er bij het toevoegen van behang aan de winkelmagen ook gevraagd of de klant direct lijm of gereedschap wil toevoegen. Ook de hoeveelheid lijm wordt berekend op basis van het aantal rollen behang.

BigBridge extensies voor Hyvä De homepage maakt gebruik van onze eigen BigBridge Video extensie. Deze is speciaal ontwikkeld voor Hyvä en zorgt dat video’s geen nadelige gevolgen hebben voor de pagespeed score van Google. Ook hebben we op verzoek van de klant een Store Locator extensie gebouwd die compatible is met Hyvä. Met deze extensie kan de klant makkelijk verkooppunten toevoegen en verwijderen in de backend. ESTAhome maakte op Magento 1 gebruik van Manadev Layered Navigation om de webshop te doorzoeken op basis van filters van product, categorie, kleur, merk etc. Op basis van deze filters zijn URL’s gecreëerd. Om deze waardevolle SEO geschiedenis mee te nemen naar de nieuwe Magento 2 webshop hebben we deze extensie compatible gemaakt met Hyvä.

		Hyvä en WebP Om de webshop zo snel mogelijk te maken is er gebruik gemaakt van het WebP afbeeldingsformaat. Hierdoor zijn afbeeldingen gemiddeld 30% kleiner qua bestandsgrootte dan JPEG- of PNG-afbeeldingen. Door deze techniek toe te passen konden we de bestandsgrootte van de afbeeldingen verkleinen, zonder in te boeten op kwaliteit. De Yireo WebP extensie zorgt voor de omzetting naar WebP formaat. De BigBridge Responsive extensie gaat nog een stap verder en optimaliseert de afbeeldingen ook voor mobile. Het resultaat is dat op mobile de afbeeldingen nog sneller geladen worden. Deze snelle laadtijd zorgt voor een prettige user experience en een hoge score op de Core Web Vitals (CWV) van Google.

Lazyload Om de pagespeed zo hoog mogelijk te krijgen hebben we gebruik gemaakt van Lazyload. Dit is een optimalisatietechniek die de zichtbare content direct laadt. Overige afbeeldingen en video’s worden pas gedownload wanneer ze daadwerkelijk nodig zijn. We hebben dit geautomatiseerd door alle afbeeldingen die in blokken en CMS’s pagina’s staan automatisch te lazyloaden. Door het toepassen van Lazyload wordt de Largest Contentful Paint (LCP) sneller, dit is een essentiële metric van Core Web Vitals van Google. Het vooraf meegeven van de afmetingen van de afbeeldingen heeft een positief effect op de Cumulative Layout Shift (CLS) van de Google Core Web Vitals.