Product
Shopify Webshop

Klant
Slaaplekkerder

Werkzaamheden
Gehele opzet theme

Case Study

DETAILS Slaaplekkerder

Specialistisch aanbod
Snelle levering en proefslapen
Internationale ambities

SOFTWARE

Shopify
Sublime
Adobe XD

LANCERING

Mei 2021

Shopify Webshop/

Slaaplekkerder

Mijn klant Slaaplekkerder.nl biedt een niche productgroep (subgroep) aan, bedoeld voor iets waar we allemaal mee te maken hebben: slapen. Het bedrijf verkoopt namelijk “verzwaringsdekens”, plus een aantal accessoires daarvoor. Een productgroep die steeds meer voet aan de grond krijgt, omdat er steeds meer onderzoek wordt gedaan naar ons slaapgedrag (vaak: slaaptekort).

Na te zijn begonnen met een meer standaardoplossing, raakte mijn klant overtuigd van de potentie ervan in de retailmarkt en paste een aantal dingen aan waarvan gebleken was dat die beter konden. Een maatwerk thema was onderdeel daarvan en hiervoor werd contact gezocht met Studio Wassink. De insteek van een nieuw thema was 2-voudig: 1) een uniek en professioneel design en 2) alles moet heel snel laden.

Omdat ik zowel Designer- als frontend-werkzaamheden aanneem, kon ik dat geheel voor hen oppakken. Ik vroeg hun team om mij te voorzien van een aantal stijl-voorbeelden die zij vonden passen bij hun merk en op die basis heb ik een unieke opzet gemaakt. Samen zijn we vervolgens al snel gekomen tot een definitieve opzet waarover iedereen enthousiast was. Die omarmt hun eigen stijl, die consistent doorgevoerd kon worden en niet afleidt van het logische doel, het verkopen via een e-commerce-kanaal (de conversie strategie).

Toen dat eenmaal stond ben ik alles gaan omzetten in de codering. Voor deze shop heb ik de blokken geprogrammeerd in HTML, CSS, Liquid, JavaScript en JQuery. Op de homepage is 90% van de content in ‘Sections’ opgezet, zodat dit te allen tijde in de WYZIWIG editor kan worden aangepast. Voor de andere pagina’s heb ik zoveel mogelijk gebruik gemaakt van Metafields, zodat ook hier veel van de content door de mensen van mijn klant zelf aangemaakt, aangepast of verwijderd kan worden, zonder daarvoor in de codering te moeten werken.

Het geheel is een consistente shop geworden, met een eigen stijl die behalve herkenbaar ook snel in te laden is. En dat is voor webshops extra belangrijk. De samenwerking verliep heel prettig, mede omdat mijn klant op mijn vragen snel reageerde en ik dus steeds direct weer verder kon. De pagespeed scores zijn zeer hoog, ondanks dat de shop flink gevuld is qua content! Dit komt voornamelijk door de modulaire opbouw en de schone basis. Lees hieronder meer over wat ik hiermee bedoel.

Meer afbeeldingen en informatie hieronder...

www.slaaplekkerder.nl
Slaaplekkerder Shopify Webhop top image

Technieken

e-commerce

Online verkoop van goederen in een webshop

shopify

Webshop ontwikkeld met het SaaS pakket van Shopify

design

Het design van de shop en de responsive acties

front-end dev

Het opzetten van de HTML, CSS, LIQUID en Javascript code

Rekenmodule

Op basis van een ontvangen formule met JS een rekenmodule met eigen navigatie

Timalux Shopify Webhop banner

SPECIALITIES

Modulaire opbouw

Voor snelheid en nauwkeurig werken

Ik heb bij alle maatwerk-onderdelen die ik in de webshop heb opgezet, een op zichzelf staande opbouw gehanteerd. Ieder onderdeel is daarmee een onafhankelijk blok, dat zonder problemen aan- en uitgezet kan worden.

Dat houdt in dat alle onderdelen, zover ze uit elkaar gehouden kunnen worden, hun eigen stylesheet hebben en hun main content, scripts & section code voor de dynamische invulling binnen de WYZIWIG editor van Shopify zelf.

De totale constructie wordt dus niet verstoord als onderdelen wel of niet meedoen op de pagina. Ook het onderhoud is zo vele, vele malen nauwkeuriger en sneller uit te voeren.

Metafield koppelingen

Meer vrijheid per product

Omdat er per product een flink aantal specifieke gegevens ingevuld moesten worden, heb ik een uitgebreid Metafield plan gemaakt en opgezet in deze webshop. Dat maakt dat bij de individuele producten niet steeds dezelfde informatie hoeft te verschijnen, omdat je die naar wens per stuk kunt aanpassen. Dat geeft mijn klant dus veel vrijheid bij het aanprijzen van specifieke kenmerken. En als dat niet nodig is, kan het systeem vanzelf terugvallen op een aantal standaardwaarden.

Rekenmodule

Direct antwoord, klantvriendelijk en efficient

De verzwaringsdekens van Slaaplekkerder zijn er in heel wat gewicht-varianten. Dat is voornamelijk om rekening te kunnen houden met het gewicht van de gebruiker, om de juiste druk te leveren. Hoewel je als klant natuurlijk altijd zelf mag uitmaken wat je kiest, is het voor velen nog een open vraag wat voor hen waarschijnlijk het best zal werken.

Daarom had mijn klant de wens om dit de koper op een eenvoudige manier te kunnen laten uitrekenen. Dat biedt een betere service en leidt ook tot weer een vraag minder die de klantenservice veelvuldig moet beantwoorden.

Ik kreeg daarvoor een formule en heb daarmee met JavaScript een rekenmodule gemaakt, waarmee de koper direct ziet welk gewicht hem/haar wordt aangeraden. Om het extra gebruiksvriendelijk te maken staan daaronder meteen links naar de andere gewichten, zodat als je op bijv. op dat moment bij 7KG kijkt, maar 9KG wordt geadviseerd, je daar ook meteen naartoe kunt springen.

Gebouwd voor snelheid

Snelheid optimaliseren met toch veel content

Snelheid staat gelijk aan conversie (verkoop). Niet persé 1 op 1 natuurlijk, maar het is wel bewezen dat shops die snel inladen een betere conversie realiseren. Deze shop-opzet is goed gevuld met afbeeldingen, teksten, links en visuals en toch zijn de pagespeed scores zeer hoog.

Natuurlijk moet je nooit teveel apps installeren, die nemen per stuk weer snelheid weg, maar bij mijn tests was de shop heel snel en ook de interne Shopify score bleek 2x zo snel als vele andere webshops die ik heb ingezien.

Timalux portfolio img1
Timalux portfolio img2
Timalux portfolio img3