Butchery
Een online slagerij die verder gaat dan de webshop: Hyvä, eigen checkout, pakket-configurator en Pick2Light
Sinds oktober 2021 de vaste technische partner. Ruim 3.000 commits later draait Butchery op Magento 2.4.9 + Hyvä, voor Nederland en België, met een WMS met batchpicken, Pick2Light en een FAK-koppeling erachter.
De uitdaging
Butchery is een ambachtelijke slagerij, sinds 1946, die vers vlees flash-frozen door heel Nederland en België bezorgt, "vanavond in huis" of op een zelfgekozen moment. De Magento-webshop is in 2016 gebouwd en daarna door een ander bureau doorontwikkeld. Toen wij hem in 2021 overnamen, draaide hij op een zwaar, verouderd thema met een standaard one-step-checkout. Vlees verkopen is bovendien geen gewone e-commerce: je verkoopt per gewicht, je levert gekoeld op een vast moment, en het magazijn moet duizenden orders foutloos picken.
- Een verouderd Magento Blank-thema met een generieke checkout, traag en lastig uit te breiden
- Bezorgen op een vast moment met beperkte capaciteit per dag en gekoeld transport
- Handmatig orderpicken: foutgevoelig bij pieken zoals BBQ-seizoen en kerst
- Groei naar België en naar de zakelijke markt
- Features nodig die je niet als standaardextensie koopt: pakketten samenstellen, cadeaubonnen ontwerpen, inloggen zonder wachtwoord
Onze oplossing
We bouwden de complete frontend opnieuw op Hyvä, met Hyvä Checkout, en hebben daar sindsdien stap voor stap eigen functionaliteit omheen gebouwd: van de checkout en bezorgmomenten tot een pakket-configurator, een cadeaubon-designer en tooling voor het magazijn, de winkel en de kassa. Alles draait op Magento 2.4.9, op Hypernode, met een deploy-pipeline in Bitbucket.
- Hyvä-theme (Tailwind + Alpine.js) met 359 eigen templates, en Hyvä Checkout
- Storeviews voor Nederland, België (NL + FR) en Engelstalige klanten, plus B2B
- Eigen checkoutflow: e-mail eerst, inloggen met een code of een passkey
- Bezorgmomenten kiezen en achteraf zelf wijzigen, met capaciteit per dag
- Pakket-configurator en cadeaubon-designer, volledig eigen modules
- Pick2Light-integratie in het magazijn, plus kiosk-, tablet- en kassatooling voor de winkel
De homepage van butchery.nl op Hyvä (oktober 2026)
Een rondleiding door de webshop
Een greep uit wat we voor Butchery hebben gebouwd. De screenshots zijn gemaakt op de live shop in oktober 2026.
Een eigen Hyvä-theme met een megamenu per vleessoort
De frontend is helemaal opnieuw opgebouwd op Hyvä: Tailwind CSS en Alpine.js in plaats van de zware RequireJS/Knockout-stack van standaard Magento. Het thema telt inmiddels 359 eigen templates. Het megamenu toont per vleessoort de bestsellers, de steaks met bot, de special steaks en bijzondere selecties in één overzicht, en wordt per storeview vertaald.
- Hyvä Default als basis, met 359 eigen templates
- Megamenu met kolommen per vleessoort en een "Bekijk alle"-link
- Storeviews voor NL, BE-NL, BE-FR en EN
Verkopen per gewicht, met voorraad per stuk
Een ribeye is niet "1 stuk": de klant kiest een gewichtsklasse, en elke klasse heeft een eigen prijs en voorraad, zichtbaar in de keuzelijst. Onder de prijs staan aanvullende smaakmakers zoals kruidenboter, jus of saus, die je met één vinkje meebestelt. Na het toevoegen verschijnt een popup met wat andere klanten vaak meekochten.
- Gewichtsklassen met eigen prijs en voorraad
- Smaakmakers als opties direct bij het product
- Een popup na toevoegen met aanvullende producten
Stel je eigen BBQ-pakket samen, prijs per persoon
De Packages-module is een generieke configurator van ruim 12.000 regels code. Een pakket bestaat uit secties (burgers, worst, spiesen, brood), en per sectie bepaalt de beheerder hoe er gekozen wordt: een vaste vulling, vrij kiezen, één optie of een blok. De prijs kan vast zijn of meebewegen met de keuzes. Met de "X personen"-switch spring je naar dezelfde opzet voor meer of minder personen, en een upsell-stap sluit de configuratie af.
- Secties met de vulmodi vervangen, blok, vrij en radio
- Vaste of dynamische prijs, zichtbaar per persoon
- Een personen-switch tussen pakketvarianten
- Een upsell-stap aan het einde van de configuratie
Een cadeaubon ontwerpen in de browser
Op /cadeaubon ontwerp je in vier stappen je eigen cadeaubon: bedrag en aantal, een afbeelding, een persoonlijk bericht en de verzending. Kies een van de ontwerpen of upload een eigen foto en snijd hem bij in de browser, met zoomen, rechtzetten en draaien. Het bericht kan emoji bevatten, en de kiezer biedt alleen emoji die de pdf-fonts ook echt kunnen weergeven. Alles verschijnt direct in een live preview van de bon. Kies tussen digitaal, naar jezelf of direct naar de ontvanger, of een fysieke luxe giftcard. Op de achtergrond genereert een eigen giftcard-suite de pdf, het saldo en de beheerschermen.
- Wizard in vier stappen met een live preview
- Foto uploaden en bijsnijden, bericht met emoji
- Digitaal of als fysieke luxe giftcard
- Eigen modules voor de pdf, het saldo en het beheer
Een checkout zonder wachtwoorden
De checkout is opgebouwd op Hyvä Checkout met een eigen flow: je vult eerst je e-mailadres in, en bestaande klanten loggen in met een eenmalige code per e-mail of met een passkey (WebAuthn) via Face ID, Touch ID of een security key. Geen wachtwoord dat je vergeet en geen wachtwoord dat kan lekken. Een account maak je pas na de betaling aan. Het adres wordt aangevuld via Postcode.nl.
- E-mail eerst, daarna een inlogcode of een passkey
- Een account aanmaken na de betaling
- Postcode.nl-adrescheck en MultiSafepay
- Het snelste afhaalmoment staat direct in de samenvatting
Bezorgmomenten met capaciteit per dag, en achteraf zelf wijzigen
Vers vlees bezorg je niet "ergens deze week". De klant kiest in de checkout een bezorg- of afhaalmoment, en de beschikbaarheid hangt af van de capaciteit per dag. De prijs kan per datum verschillen. Na de bestelling kan de klant via /bezorgmoment zijn moment zelf verplaatsen, zonder de klantenservice te bellen. Voor gekoeld transport is de koelvervoerder direct gekoppeld.
- Bezorg- en afhaalmomenten met capaciteit per dag
- Een prijs per datum en per aantal dagen vooruit
- Bezorgmoment achteraf zelf wijzigen
- Directe koppeling met de koelvervoerder
Beefcoins en de Butchery Club
Klanten sparen Beefcoins bij elke bestelling en wisselen die in voor gratis producten. Het saldo staat al in de winkelwagen ("Je spaart 9 Beefcoins"), en de spaaracties lopen via Klaviyo-flows. De Butchery Club heeft een eigen landingspagina en clubshop, en in de winkel scan je je clubpas bij de kiosk.
- Beefcoins sparen en inwisselen, ook in de winkelwagen zichtbaar
- Klaviyo-koppeling voor de spaar- en clubflows
- Clubpas scannen bij de kiosk in de winkel
Bestellen met één hand
Vlees bestel je vaak op je telefoon, op de bank of in de supermarkt als je bedenkt dat je zaterdag wilt barbecueën. Daarom zijn de productpagina, de pakket-configurator en de cadeaubon-designer allemaal ontworpen voor een klein scherm. Bij de cadeaubon schuift het formulier als een sheet onder de preview omhoog.
Van betaalde order tot gekoeld pakket
Achter de webshop draait het complete warehouse-proces op dezelfde Magento-installatie: van orderpicking en Pick2Light tot de koppeling met het kassasysteem FAK en de koelvervoerder. Zo blijft alles in één systeem, van bestelling tot aflevering.
- 1
Besteld
De order is betaald en klaar voor verwerking.
- 2
Aangemeld
De zending wordt automatisch vooraangemeld bij de vervoerder.
- 3
Gepickt
Pickers verzamelen meerdere orders in één ronde.
- 4
Gesorteerd
Pick2Light wijst per product het juiste vak aan.
- 5
Verzonden
Label, verzendbevestiging en track & trace gaan automatisch.
Slim orderpicken
Pickers lopen niet per order het magazijn door, maar verzamelen meerdere orders tegelijk in een geoptimaliseerde looproute. Dat scheelt meters, tijd en fouten, juist op piekdagen.
- Meerdere orders in één looproute
- Scannen met een eigen scanner-app
- Minder lopen, minder fouten
Pick2Light
Na het picken wijst een Pick2Light-installatie per gescand product het juiste vak aan. Is een order compleet, dan volgen de zending, het label en de mail aan de klant automatisch.
- Lichtsignalen per vak
- Zending, label en mail automatisch
- Hardware in samenwerking met TBWB
FAK-koppeling
FAK is het kassa- en slagerijsysteem van Butchery. Producten, prijzen en klanten blijven gesynchroniseerd met de webshop, en orders van de kassa in de winkel komen ook in Magento terecht.
- Producten en prijzen uit FAK
- Klanten in twee richtingen gesynchroniseerd
- Kassaorders uit de winkel in Magento
Koudeketen & vervoerders
Vers vlees moet gekoeld en op tijd aankomen. Zendingen worden automatisch aangemeld bij de koelvervoerder, labels worden direct op de vloer geprint, en statusupdates komen vanzelf binnen.
- Automatische vooraanmelding
- Labels direct geprint
- Afleverstatus automatisch bijgewerkt
Voorraad & dashboards
Vlees heeft geen vast gewicht. Kostprijs en voorraadwaarde worden daarom per variant berekend, en live dashboards geven het team inzicht in de dagplanning, productie en inkoop.
- Kostprijs per variant
- Live warehouse-dashboard
- Productie- en inkoopplanning
Scanner-app
Het magazijn werkt met een Android-scanner-app die rechtstreeks met Magento praat, voor picken, aanvullen, voorraad en retouren, en ook voor winkel- en kassaorders.
- Picken, aanvullen en voorraadscans
- Winkel- en kassaorders
- Automatische app-updates
Dezelfde Magento, ook achter de toonbank
Butchery heeft ook een fysieke winkel. Ook daarvoor bouwden we de tooling op dezelfde Magento-installatie, zodat voorraad, klanten en Beefcoins overal hetzelfde zijn.
Afhalen in de winkel
Afhaalorders worden met een scanner in de winkel uitgegeven. De klant krijgt er een Apple Wallet-pas bij.
Kiosk & tablet
Een kiosk die de clubpas scant, en een tablet-app voor Beefcoins en het saldo van cadeaubonnen.
Telefonische orders
EasyOrder: medewerkers zetten telefonische bestellingen in en sturen de klant een betaallink.
Core Web Vitals: groen, gemeten bij echte bezoekers
Lighthouse-scores zeggen weinig. Wat telt is hoe snel de shop is voor echte bezoekers op hun eigen telefoon en verbinding. Dat meten we met RUMvision (Real User Monitoring). De cijfers hieronder zijn van 8 oktober 2026, voor mobiele bezoekers op het 75e percentiel: dezelfde maatstaf die Google gebruikt. Daaronder staat de CrUX-historie van Google: al tien maanden groen.
Hoe we daar kwamen
Hyvä in plaats van RequireJS
De grootste winst: geen Knockout/RequireJS-stack meer, maar Alpine.js en een kleine Tailwind-build.
Critical CSS & WebP
Critical CSS inline, alle afbeeldingen als WebP, en de zware Fotorama-galerij vervangen.
LCP eerst
De LCP-afbeelding laadt nooit lazy en krijgt fetchpriority; de overige afbeeldingen worden uitgesteld.
Minder third parties
Hotjar en Clerk-JS zijn verwijderd, en afbeeldingen onder de vouw worden uitgesteld.
Varnish & cache-warmer
Varnish voor de full page cache, en een cache-warmer na elke deploy, zodat de eerste bezoeker niet hoeft te wachten.
Snellere backend
Product-labels in batches, preloaders voor productlijsten en bundel-opties, en een geoptimaliseerde sales-rule-query.
Vijf jaar doorontwikkeling
- 2016
Start op Magento 2
Een ander bureau bouwt de eerste Magento 2-webshop; daarna ontwikkelt een tweede bureau hem door.
- Okt 2021
Coding.nl neemt over
Bitbucket Pipelines, Hypernode, upgrades, en de eerste snelheidsslag met critical CSS en WebP.
- 2023–2024
Hyvä + Hyvä Checkout
De frontend en de checkout volledig opnieuw opgebouwd op Hyvä.
- 2024
Pick2Light & batchpicken
Pick2Light in het magazijn en orderpicken in geoptimaliseerde looproutes.
- 2025
Winkel, kiosk & FAK v2
Afhalen in de winkel met Apple Wallet-passen, een tablet-app, de kiosk, Varnish en een vernieuwde FAK-koppeling.
- 2026
Checkout, pakketten & cadeaubonnen
Passkeys, bezorgmomenten, de pakket-configurator, de cadeaubon-designer, Magento 2.4.9 en de Belgische markt.
Technische highlights
Magento 2.4.9 + Hyvä
Eigen Hyvä-theme met 359 templates, op PHP 8.3
Hyvä Checkout
Eigen flow: e-mail eerst, inlogcode of passkey
Passkeys / WebAuthn
Inloggen zonder wachtwoord en phishing-bestendig
Packages
Een generieke pakket-configurator (12k regels)
Giftcard-suite
Designer, pdf, saldo en beheer
Bezorgmomenten
Capaciteit per dag, prijs per datum, achteraf wijzigen
Pick2Light
Lichtgestuurd sorteren in het magazijn
FAK-koppeling
Producten, prijzen, klanten en kassaorders
Apple Wallet
Afhaalpassen voor afhalen in de winkel
Meertalig
Storeviews voor NL, BE-NL, BE-FR en EN
Klaviyo
Beefcoins, back-in-stock en flows voor bestelde producten
Varnish + Hypernode
Full page cache en een cache-warmer na de deploy
Security-hardening
Request-guard, IP-whitelist voor de admin, StyleSmuggler-fix
Koudeketen
Automatische aanmelding bij de koelvervoerder
Volgende case
Outlaw Racing →Klaar voor jouw succesverhaal?
Laten we bespreken hoe we jouw project kunnen realiseren.
Start een gesprek