Yummygums wie?

Maar eerst een kleine introductie. Yummygums voorziet je van je dagelijkse dosis vitamines in de vorm van heerlijke gummies. Het Nederlandse merk lanceerde in 2017 met één multivitamine en inmiddels bieden ze 16 verschillende vitamine gummies, van energie tot slaap, van moeders tot kinderen.

Bewijs van concept

Hun oorspronkelijke website voor de Nederlandse markt was gebouwd op WooCommerce. Het was moeilijk en duur om te onderhouden, om nog maar te zwijgen over de vreselijke laadsnelheid. De plannen om naar Groot-Brittannië te verhuizen waren voor hen de perfecte gelegenheid om een proof of concept te creëren, dus kwamen ze naar ons toe met het verzoek om te beginnen met bouwen. De belangrijkste vereisten waren snelheid en schaalbaarheid. Om dat te bereiken besloten we samen te werken met Instant Commerce en Storyblok om een headless website te maken die verbonden was met een Shopify back-end.

Waarom deze tech stack?

Headless storefronts zijn websites die worden gemaakt met behulp van een aparte front-end die is verbonden met een content management systeem (CMS) en een back-end om de input voor de website te leveren. In dit case bestaat de back-end uit Shopify en Storyblok, de back-end is gebouwd met Instant Commerce.

De back-end

Laten we beginnen met de back-end. In Shopify hebben we alle productinformatie, kortingen, klanteninformatie etc, in Storyblok hebben we alle content. Een van de belangrijkste redenen waarom Shopify als beter wordt beschouwd dan WooCommerce, is hun ecosysteem. Waarom?

Een eerste belangrijk verschil is hosting. Met de zelf gehoste infrastructuur van WooCommerce zijn webwinkeliers verantwoordelijk voor beveiliging, prestaties en onderhoud. Shopify heeft managed hosting, wat winkeliers vrijstelt van al deze problemen.

Een tweede kloof is die tussen plugins en apps. Hoewel de overvloed aan plugins WooCommerce in wezen hetzelfde doel heeft als Shopify apps (upgraden en aanpassen), is het verhaal compleet anders. WooCommerce plugins zijn vaak conflicterend, moeten voortdurend handmatig worden bijgewerkt, vertragen de prestaties en introduceren beveiligingsrisico'sShopify daarentegen controleert app compatibiliteit grondig om ervoor te zorgen dat ze je winkel niet verstoren. Bovendien vereenvoudigen ze het app-beheer met een gecentraliseerd app-platform.

De voorkant

Over naar de front-end, die is gemaakt met Instant. Instant Commerce is een visuele, no-code Shopify page builder. Met deze headless SaaS-oplossing kun je eenvoudig een headless frontend maken en deze koppelen aan je back-end. Het voordeel van werken met Instant Commerce is dat zij zorgen voor je hosting en de verbindingen met Shopify en Storyblok.

Met een headless storefront kun je niet alleen een aantrekkelijke website maken, maar zorg je er ook voor dat deze snel draait. Instant Commerce werkt met statisch gegenereerde pagina's. In tegenstelling tot normale websites die dynamisch laden, zal Instant pagina's vooraf bouwen die 90 tot 95% van dezelfde componenten bevatten. Slechts 5 tot 10% zal dynamische inhoud zijn. Dit maakt de website waanzinnig performant.

Als je het zelf wilt zien, bekijk dan de vergelijking die we hebben gemaakt tussen de nieuwe en de oude website.

Het resultaat

Het resultaat is een prachtige en goed presterende website. We gebruiken hem vaak als referentie om te laten zien hoe hoog merken de lat kunnen leggen. Hun conversieratio is omhoog gesprongen dankzij het extra werk dat we hebben verricht aan de optimalisatie van de kaart- en afrekenpagina. Met hun huidige tech stack is Yummygums klaar om nog verder op te schalen.

Samengevat:

• Status op Core Web Vitals gehaald voor optimale SEO

• Schaalbare infrastructuur, geen hostingkosten of kopzorgen over CDN's, verkeerspieken, enz.

• Geen verouderde plugins die de hele installatie onderuit halen

• Gebruiksvriendelijke customiser om nieuwe producten, blogposts, pagina's, enz. toe te voegen

• Hoge conversie en snel afrekenen met aanpasbare one-page-checkout

Klinkt dat goed?