Next Win Logo
Case Study · Pixel Perfect WooCommerce

Ambachtelijke gin,
meetbare impact.

Een pixel perfecte WooCommerce webshop met unieke features die het circulaire verhaal van Kegel Spirits tastbaar maken, van impact counter en geo-locatie bomen tot winkel finder en workshop booking.

Bekijk live website
Kegel Spirits ambachtelijke gin productfotografie
Live
Klant
Kegel Spirits
Industrie
E-commerce / Spirits
Doorlooptijd
2 maanden
Branche
Ambachtelijke distillery
Live website
kegelspirits.com
1m²
Bos per fles
Geplant op de Veluwe
100%
Pixel perfect
Figma naar WordPress
2
Maanden
Concept tot live
4
Custom features
Op maat ontwikkeld
Het verhaal

Pixel perfect ontwerp met echt verhaal.

Een ambachtelijke stokerij op de Veluwe met een uitgesproken Figma design en een circulair productieverhaal. Tijd om dat verhaal in code te brengen.

01Uitdaging

Een ambachtelijk verhaal in pixel perfect detail

Kegel Spirits had een uitgesproken Figma design en een verhaal over biologische, houtgestookte gin met een volledig circulair productieproces. De webshop moest dit ambacht 1-op-1 vertalen én unieke features dragen, impact counter, geo-locatie bomen, winkel finder en workshop booking, zonder concessies aan de visuele kwaliteit.

02Aanpak

WooCommerce als basis, custom features op maat

In samenwerking met het design bureau bouwden we een pixel perfecte WooCommerce shop op WordPress. Elementor en ACF leveren de beheerbaarheid voor de marketingcontent, terwijl Google Maps API en LatePoint de unieke features aandrijven. Elke fles krijgt een uniek nummer dat aan een vierkante meter bos op de Veluwe wordt gekoppeld.

03Resultaat

Een platform dat het verhaal vertelt

Een webshop die meer is dan alleen een verkoopkanaal. Klanten kunnen hun eigen vierkante meter bos bezoeken, vinden via geo-locatie de dichtstbijzijnde verkooppunten en boeken eenvoudig een workshop. De ambachtelijke en duurzame filosofie wordt zo tastbaar gemaakt.

Werkzaamheden
Figma naar WordPressPixel Perfect DesignImpact CounterGeo-locatie BomenWinkel FinderWorkshop Booking
Tech stack
WordPressWooCommerceElementorACFLatePointGoogle Maps API
Het proces

Custom features die het verhaal vertellen.

Een pixel perfect ontwerp met custom functionaliteiten die het duurzame verhaal van Kegel Spirits perfect ondersteunen, in vier stappen.

01Pixel perfect design

Van Figma naar WordPress, 1-op-1

Het uitgesproken Figma design is tot in detail nagebouwd in WordPress met Elementor en custom CSS. Typografie, kleuren, spacing en interacties matchen exact, zodat de ambachtelijke uitstraling van de stokerij in elke pixel terugkomt.

  • Pixel perfect implementatie van het Figma design
  • Volledig responsive op mobiel, tablet en desktop
  • Custom typografie en kleurpalet voor herkenbare merkbeleving
Kegel Spirits homepage met ambachtelijk design en hero
02Impact Counter & Geo-locatie

Elke fles een eigen vierkante meter bos

Elke verkochte fles krijgt een uniek nummer dat bijdraagt aan 1 vierkante meter bos. Klanten voeren hun flesnummer in op de impact pagina en zien via Google Maps direct waar precies hun boom geplant wordt op de Veluwe. Een unieke manier om duurzame impact tastbaar te maken.

  • Uniek flesnummer gekoppeld aan een specifieke locatie
  • Google Maps integratie toont de exacte boom-locatie
  • Fysiek bezoekbaar op de Veluwe, duurzaamheid in het echt

Verkochte fles

Uniek nummer #00427

Gekoppeld aan boom-locatie

Geplant op

de Veluwe

Live via Google Maps

Impact per fles

1 m² nieuw bos

BiologischHoutgestooktCirculairVeluwe
03Smaakbeleving

Productpagina's die de smaak laten zien

Elke gin heeft een uniek smaakprofiel dat visueel tot leven komt door hover animaties op de productpagina. Klanten zien in een oogopslag de smaakintensiteit en unieke kenmerken van elk product, een subtiele maar effectieve manier om ambachtelijke producten te presenteren.

  • Visuele smaakprofielen per product
  • Hover animaties voor interactieve productbeleving
  • Intuïtieve productpresentatie met biologische certificeringen
Productpagina met interactief smaakprofiel en biologische certificeringen
04Winkel Finder & Workshops

Online vinden, fysiek beleven

De winkel finder gebruikt geo-locatie om bezoekers direct de dichtstbijzijnde verkooppunten te tonen. Daarnaast kunnen bezoekers eenvoudig workshops en rondleidingen boeken via het geïntegreerde LatePoint booking systeem, een complete klantervaring van online ontdekking tot fysieke beleving.

  • Geo-locatie voor dichtstbijzijnde winkels en verkooppunten
  • Online workshop reservering via LatePoint integratie
  • Database met verkooppunten, openingstijden en contactgegevens
Winkel finder met geo-locatie en kaartweergave van verkooppunten
UX in de praktijk

Wat gebruikers echt zien en doen.

Vijf schermen die laten zien hoe de shop voelt, van homepage tot impact counter, productbeleving en checkout.

Kegel Spirits homepage met ambachtelijk design en hero
Klik om te vergroten
01 / 05Screenshot

Homepage, Ambachtelijk design

De homepage vertelt direct het verhaal van Kegel Spirits: ambachtelijk, biologisch en circulair. Een strak, natuurlijk design dat past bij hun filosofie.

Bladeren
Impact & Resultaten

Wat het opleverde.

Van pixel perfect ontwerp naar tastbare impact: een webshop die het circulaire verhaal van Kegel Spirits niet alleen vertelt, maar ook bewijst.

011m²

Duurzame impact per fles

Elke verkochte fles draagt bij aan 1 vierkante meter bos op de Veluwe. Klanten kunnen via een uniek flesnummer en Google Maps integratie hun exacte boom-locatie zien en zelfs fysiek bezoeken.

02100%

Pixel perfect Figma-vertaling

Het Figma design is tot in detail nagemaakt in WordPress. Custom animaties, een moderne ambachtelijke uitstraling en volledig responsive gedrag zorgen voor een merkbeleving die exact aansluit bij het verhaal.

034

Custom features op maat

Van impact counter tot winkel finder, smaakprofielen en workshop booking, alle features zijn op maat ontwikkeld voor een complete klantervaring die past bij Kegel Spirits.

De webshop van Kegel Spirits is meer dan alleen een verkoopkanaal. Het is een platform dat hun circulaire verhaal vertelt en klanten betrekt bij hun duurzame missie. Door unieke features zoals de impact counter en geo-locatie wordt de ambachtelijke en duurzame filosofie tastbaar gemaakt, wat resulteert in een authentieke en betrokken klantbeleving. Wil je zelf een WooCommerce webshop laten maken met dit soort maatwerk? Dan denken we graag met je mee.

Klaar voor jouw next win?

Wil je ook een webshop met echt verhaal?

Laat ons je helpen om een pixel perfect WooCommerce webshop te bouwen met custom features die jouw verhaal vertellen, zoals bij Kegel Spirits met impact counter, geo-locatie en workshop booking.