Claude.ai gebruiken om AOV verhogende webshop modules te maken

Ik hoor je denken: "wat is Claude.ai nou weer?" Laat ik er kort over zijn. Claude is ook een LLM (Large Language Model) net zoals bijvoorbeeld ChatGPT of Gemini. Wij gebruiken Claude.ai vooral om code te genereren voor onze webshops. Dit kan ChatGPT of Gemini ook, maar Claude.ai is bij uitstek erg krachtig voor dit soort taken. Claude kent ook Claude Code, wat een commandline tool is waarmee ontwikkelaars codeertaken direct vanuit hun terminal aan Claude kunnen delegeren. Ik zal je hier voor nu niet mee vermoeien. Ik wil het graag bij de LLM van Claude houden en je laten zien wat je er mee kunt bouwen (of laten bouwen) en hoeveel tijd en geld het je zal schelen.

De "Vaak samen gekocht" module

Allereerst wil ik zeggen dat er talloze plugins bestaan die de "vaak samen gekocht", recommendations of recently viewed kunnen ondervangen. Sterker nog, vaak is dit al onderdeel van het thema dat je hebt aangekocht. Uiteraard kun je deze secties gewoon gebruiken, vervolgens zelf inrichten of de AI van Shopify dit laten doen. Maar vaak staan deze onderdelen onder je PDP of onder je Cart. Wat nou als je dit niet wilt of als je geen plugin wilt implementeren, die net niet doet wat je wilt?

Dan moet je het custom laten bouwen! Althans, dit deden wij vroeger heel erg vaak. En sorry naar alle developers, want we waren daar ook altijd heel erg blij mee, maar een flinke investering was het altijd wel. En die moet je maar eens zien door te berekenen naar je klant. Of voor onze eigen shops moesten we die omzet eerst maar eens zien terug te verdienen.

Een vergelijkbaar, maar veel simpelere versie, van dit project heeft ons ooit 16 uur gekost. Ik heb Claude.ai even goed uitgevraagd wat dit project een developer zou kosten. En dit kwam eruit:

Junior/Medior Developer: 25-40 uur = €2.125 - €3.400
Senior Developer: 15-25 uur = €1.875 - €3.125

(en dit is zonder iteraties en zonder meetings over hoe het er allemaal uit moet zien)

Je kan erover discusieren of dit accuraat is, maar uit ervaring weet ik dat dit wel aardig in de buurt komt. Zeker omdat je al heel wat tijd nodig hebt om samen uit te tekenen wat je precies wilt en hoe het moet werken.

Nu de hamvraag: "hoe lang heb ik erover gedaan?"

... Ik begon om 20.03 en ik was om 23.07 klaar. Helemaal zoals ik wilde, zonder kleine aanpassingen. Iets langer dan 3 uur had ik ervoor nodig dus. (€255 inclusief iteraties en design meetings met mezelf en Claude ;))

Hoe ziet de module eruit?

Ja! Goeie. Dat is misschien ook belangrijk om te laten zien. Check onderstaande video.

Wat doet de module precies?

Zoals je kunt zien zit er nu een stap tussen het drukken op de "toevoegen aan winkelwagen" button en het daadwerkelijk openen van de winkelwagen (of niets doen als je dat hebt ingesteld). Dit is om de klant extra opties te geven die hij of zij kan toevoegen aan de winkelwagen. Zo hebben wij voor deze shop kortgeleden tuinplanten toegevoegd. Als iemand een plantenbak toevoegt, dan wil je wel dat men ook meteen een mooie boom of bodembedekker kan toevoegen aan de winkelwagen.

Je kan deze artikelen direct toevoegen door op het plusje te klikken, je kan verder gaan naar de winkelwagen of je kan ervoor kiezen om gewoon verder te winkelen. Klik je op het toevoegen dan update de cart icon in de header (van 0 naar 1) voeg je nog iets toe in de module dan update deze wederom. Ook geeft de icon een vinkje als het is gelukt. Per product wordt een aparte lijst met artikelen ingeladen. Dit is op basis van tags, maar dit kan ook op basis van andere elementen zoals collectie of titel. Voor nu hebben we hiervoor gekozen. Wil je dus een plant bestellen, dan krijg je, je raadt het nooit, plantenbakken te zien als upsell ;)

Eigenlijk is de module helemaal niet zo spannend aan de voorkant. En dat moet ook. Het moet er makkelijk uitzien. Het moet de klant helpen en de User Experience moet pico bello zijn.

Hoe werkt het aan de achterkant?

Grappig genoeg zou ik nu kunnen zeggen: "is dat belangrijk? AI heeft het gebouwd en het werkt toch?" Klopt. Maar door je uit te leggen dat er best wat gebeurt aan de achterkant zal je zien dat een developer dus best wat tijd nodig heeft om iets dergelijks te bouwen.

Ik zal het kort houden. 15 punten, want het zijn er veel meer:

• Formulier-interceptie - Vangt winkelwagen-formulier af vóór pagina refresh
• Automatische prijs-detectie - Herkent of prijs in euro's of centen is en converteert correct
• Tag-naar-collectie mapping - Koppelt product-labels aan collecties voor slimme aanbevelingen
• Triple fallback-strategie - Tags → Shopify AI → Nieuwste producten (altijd een backup)
• Multi-selector winkelwagen-teller - Probeert 10+ manieren om het cijfertje bij te werken
• Event Capture Phase - Onderschept formulieren vroeger dan andere scripts (voorkomt conflicten)
• Async/Await error handling - Elke API-call heeft try/catch voor robuustheid
• Product-filtering - Sluit net toegevoegd product uit van aanbevelingen
• Custom Event dispatching - Stuurt signalen door website dat winkelwagen gewijzigd is
• Dynamic DOM manipulation - Maakt/verwijdert elementen automatisch waar nodig
• Button state management - Disabled knoppen tijdens verwerking + visuele feedback
• Progressive enhancement - Werkt ongeacht wanneer JavaScript laadt
• Responsive grid system - 3/2/2 kolommen afhankelijk van schermgrootte
• Image handling fallbacks - Probeert 4 verschillende afbeelding-bronnen
• Escape-key functionaliteit - Sluit popup met ESC-toets (toegankelijkheid)

En dat allemaal in 3 bestanden, die je toevoegt aan Shopify.

• 1x HTML: Dit is de basis hoe je module opgebouwd moet worden -> zet dit in Snippets
• 1x Javascript: Dit doet de complexere zaken als het aanroepen van functies -> zet dit in Assets
• 1x CSS: Animaties en styling -> zet dit in Assets

En dan ben je er al. Easy does it!

Waar moet ik op letten bij het prompten?

Let erop dat je sowieso een aantal regels uit mijn vorige post gebruikt. Dus vertel Claude wat het moet zijn en wat het moet bouwen voor je:

• "Je bent een Senior Developer, die talloze keren met de UX designer heeft gesproken over deze module". Dan weet Claude in ieder geval waar het op moet letten en waar de nadruk op moet liggen.
• Wees duidelijk in wat je wilt. Als je een voorbeeld hebt geef die dan mee als screenshot. Dit gaat je echt heel erg helpen.
• Maak een lijstje van elementen die je belangrijk vindt. Dus bijvoorbeeld kleuren, maar ook zeker functionaliteiten die het wel of niet moet toevoegen.
• Wees nog duidelijker als er zaken niet goed werken. Je bent soms geneigd om snel de fix te willen uitrollen, maar dan gaat Claude te makkelijk te werk en dan krijg je een halve oplossing of maakt iets anders kapot.
• Claude werkt erg sterk, omdat het je de console laat checken. Voeg de code (inclusief console logs) toe, open F12 (of rechter muisknop en inspecteren) en maak een screenshot wat de console zegt. Doet de module namelijk niet wat het moet doen, dan staat dat daar. Geef dat terug aan Claude en het gaat weer voor je aan de slag.

De module zelf heb je in een minuut of 10. Daarna begint het schaven. Ik ben er dus 3 uur mee bezig geweest, omdat ik constant nieuwe ideeen kreeg om het te verbeteren. En dat is juist leuk. Je hebt straks iets wat je zelf hebt gebouwd, werkt en hopelijk de omzet laat groeien. Hoe tof is dat?!

Ik vind dit toch wel spannend. Is er niet iets makkelijkers?

Snap ik helemaal. Het is ook wel spannend om in de achterkant van je shop te sleutelen. Een paar dingen waar je op moet letten:

• Als je dit gaat doen, maak dat een kopie van je live shop. Doe dit nooit in je live omgeving. Gaat het mis, dan gaat je shop kapot. Dat wil je niet.
• Doe dit in nieuwe files. Claude vraagt je sowieso om die aan te maken, dus dat is top. Je kan in bestaande files van je huidige thema werken, maar dat is wat gevaarlijker, mocht er iets kapot gaan (in een kopie, kan je dit natuurlijk wel proberen).
• Wat altijd kan (voor grotere modules als deze is dat wel wat lastiger) kan je altijd de custom HTML embedded section in je front end van Shopify gebruiken. Lekker prompten en dan plakken. En voila. Check direct hoe het eruit ziet en werkt. Kan je ook hele leuke dingen mee maken.

Wat voor prompt heb je gebruikt?

Dit is de prompt. Hiermee krijg je echt al iets wat bizar goed werkt en echt wel de look and feel heeft van wat je wilt hebben. Vooral als je een mooie screenshot toevoegt. Maar je zal zeker moeten debuggen, want Claude gaat je bijvoorbeeld vragen hoe je cart werkt.

---

Je bent een Senior Shopify Developer met 10+ jaar ervaring en met expertise in e-commerce UX en JavaScript.

Ik wil een winkelwagen popup voor mijn Shopify webshop, precies zoals op de screenshot (screenshot toevoegen met wat je nou wilt hebben)

WAT IK WIL:
Als iemand op "Toevoegen aan winkelwagen" klikt, wil ik dat er een mooie popup
verschijnt in het midden van het scherm in plaats van dat de pagina herlaadt.

IN DE POPUP MOET IK ZIEN:
- Het product dat net is toegevoegd (met foto, naam en prijs)
- Een groen vakje met "Product toegevoegd aan winkelwagen"
- 6 vergelijkbare producten die de klant misschien ook wil
- Bij elk product een groen plusje om het direct toe te voegen
- Onderaan twee knoppen: "Verder winkelen" en "Afrekenen"

HOE MOET HET WERKEN:
- De popup sluit als ik ernaast klik, op het kruisje klik, of op ESC druk
- Als ik op het groene plusje klik, wordt dat product ook toegevoegd
- Het cijfertje bij mijn winkelwagen-icoontje moet automatisch omhoog gaan
- De "Afrekenen" knop moet naar mijn winkelwagen pagina gaan

WELKE PRODUCTEN MOET HET SUGGEREREN:
Ik verkoop tuinplanten. Gebruik deze regels:
- Als het product de tag "groot" heeft → toon producten uit mijn "bomen" collectie
- Als het product de tag "borderrand" heeft → toon producten uit "bodembedekkers"  
- Als het product de tag "keerwand" heeft → toon producten uit "tuinplanten"
- Als het product de tag "klein" heeft → toon producten uit "tuinplanten"

Als er geen tag match is, toon dan gewoon vergelijkbare producten of de nieuwste.

KLEUREN DIE IK WIL GEBRUIKEN:
- Hoofdkleur (knoppen): #762B16 (bruin)
- Success melding: lichtgroen
- Plusjes bij producten: groen (#4CAF50)
- Achtergrond popup: wit

HOE HET ERUIT MOET ZIEN:
- Op computer: 3 producten naast elkaar
- Op tablet: 2 producten naast elkaar  
- Op telefoon: 2 producten naast elkaar, popup vult het hele scherm

TEKSTEN IN HET NEDERLANDS:
- "Product toegevoegd aan winkelwagen"
- "Ook interessant" (boven de suggesties)
- "Verder winkelen" (knop)
- "Afrekenen" (knop)
- "Toevoegen..." (tijdens het laden)

WAT IK NODIG HEB:
Geef me 3 bestanden die ik kan copy-pasten in Shopify:
1. Een CSS bestand voor de styling
2. Een JavaScript bestand voor de functionaliteit  
3. Een HTML snippet dat ik in mijn theme moet plaatsen

Maak het zo simpel mogelijk zodat ik het alleen maar hoef te kopiëren en plakken.
Geen technische termen in comments, gewoon werkende code.

BELANGRIJK:
- Het moet werken zonder dat de pagina herlaadt
- Het moet werken op alle schermformaten (telefoon, tablet, computer)
- De prijzen moeten kloppen (€24,95 formaat)
- Het moet snel laden en soepel aanvoelen
- Als er iets fout gaat, mag de website niet crashen

[HIER SCREENSHOT TOEVOEGEN VAN GEWENSTE POPUP]

Extra info over mijn shop:
- Ik gebruik Shopify Dawn theme (of vertel welk theme je gebruikt)
- Mijn producten zijn allemaal tuinplanten
- Ik heb collecties: "bomen", "bodembedekkers", "tuinplanten", "plantenbakken"
- Mijn huisstijl is bruin/groen/naturel

Heel veel succes met prompten en bouwen. Bizar genoeg is dit pas de basis van wat je allemaal kunt met AI. Maar je moet ergens beginnen. Laat me weten als je toch wat hulp nodig hebt. Ik help je graag verder.