https://oliereus.nl/products/fanfaro-lsx-5w30-vol-synthetische-motorolie-5-liter
De PDP staat er technisch en commercieel redelijk tot goed voor: prijs-per-liter, BTW/verzend-transparantie, Fanfaro-differentiator en de buy-box-hiërarchie zijn sterk, vooral op tablet/desktop. De belangrijkste reële problemen zijn mobiel: prijs en de primaire ATC-CTA vallen onder de vouw (koper ziet eerst alleen breadcrumb/titel/afbeelding), de storefront serveert Engelse cart-strings (en.default.json) aan Nederlandse klanten, en de breadcrumb/JSON-LD bevat de niet-hierarchische kenteken-collectie. De geclaimde KRITIEK cookie-consent-blocker is op de meegeleverde live mobile-screenshots niet reproduceerbaar en wordt als render-artefact gedowngraded; de echte mobiele blocker is de scroll-afstand tot de koopactie, niet een consent-overlay. Daarnaast staat er een set kleinere a11y- (desktop quantity-label uitgecommentarieerd, ARIA-misuse, ontbrekende product-naam op ATC) en CRO-kansen (spec-garantie in buy-box, maathint, cross-sell) klaar die met beperkte inzet conversie en toegankelijkheid verbeteren.
| Rol | Model | Score | Bevindingen |
|---|---|---|---|
| UX + Accessibility | sonnet | 6/10 | 8 |
| Frontend + Performance | copilot/sonnet | 6/10 | 8 |
| CRO + conversie | opus | 7/10 | 8 |
Op 390px ziet de koper eerst breadcrumb, titel en afbeelding; prijs (46,95) en de gele koopknop staan pas na de afbeelding. De sticky ATC-bar verschijnt pas bij verder scrollen. Bevestigd op de live screenshots (pdp-390-atf.png eindigt bij thumbnails, prijs/CTA pas in pdp-390-buybox.png). Dit vertraagt de kooptaak direct op het belangrijkste device.
Fix Comprimeer de mobiele productafbeelding (kleinere max-height) zodat prijs + ATC binnen de eerste viewport vallen, of toon de sticky ATC-bar direct op PDP-mobiel in plaats van pas bij scroll-trigger.
Cart-drawer en cart-notification tonen 'Your shopping cart' en 'Item added to your cart'. MEMORY.md bevestigt dat de storefront op lang=en draait. nl.json bevat de juiste vertalingen. Dit raakt vertrouwen en consistentie op een conversie-kritiek moment.
Fix Forceer storefront-locale op nl via Shopify Admin > Markets > Primary market (published locale = nl), verifieer nl.json-keys, push nl.json --allow-live, invalideer de render-snapshot en controleer de H2 in de cart-drawer live.
In de desktop buy-box is het 'Aantal'-label uitgecommentarieerd, waardoor het Quantity-desktop-input geen programmatisch label heeft (WCAG 1.3.1 + 4.1.2, niveau A). De mobile variant heeft dit correct. Concrete A11y-regressie, eenvoudig op te lossen.
Fix Verwijder de twee comment-wrappers op regels 363-364 en herstel het label voor Quantity-desktop-{{ section.id }}, identiek aan het mobile-patroon op regel 198.
breadcrumbs.liquid itereert alle product.collections, waardoor 'Motorolie obv kenteken' (een tool-filterresultaat, geen hierarchie-node) in zowel de visuele breadcrumb als het JSON-LD-pad belandt. Levert een misleidend 6-staps pad voor gebruikers en een verwarrende structuur voor Google.
Fix Filter collecties waarvan de handle 'motorolie-obv-kenteken' bevat uit zowel de visuele breadcrumb als de JSON-LD-loop. Overweeg een max-diepte van 3-4 niveaus en/of een primary_collection-metafield.
De sceptische doelgroep twijfelt of Fanfaro motorschade geeft. De bewijzende specs (ACEA C3, API SN, OEM-goedkeuringen) zitten in een ingeklapte accordeon ver onder de buy-box, terwijl de koopbeslissing in de buy-box valt. De 'zelfde specs'-claim mist bewijs op het beslissingsmoment.
Fix Plaats 1-2 kern-OEM-goedkeuringen of de hoofdnorm als badge-rij direct in de buy-box bij de Fanfaro-USP.
In de desktop buy-box (main-product.liquid r363-364) is het 'Aantal'-label uitgecommentarieerd; het Quantity-desktop-input mist een programmatisch gekoppeld label. Mobile heeft dit correct (r198). Schending WCAG 1.3.1 en 4.1.2 niveau A.
Aanbeveling Verwijder de twee comment-wrappers op r363-364 en herstel het label for=Quantity-desktop-{{ section.id }}, conform het mobile-patroon op r198.
Cart-drawer en cart-notification tonen 'Your shopping cart' en 'Item added to your cart' uit en.default.json. MEMORY.md bevestigt storefront op lang=en. nl.json heeft de juiste NL-vertalingen.
Aanbeveling Forceer storefront-locale op nl via Shopify Admin > Markets > Primary market (published locale = nl), verifieer nl.json-keys, push nl.json --allow-live, invalideer render-snapshot en check de H2 live in de cart-drawer.
Op 390px is de ATF-volgorde breadcrumb > titel > afbeelding; prijs (46,95), eenheidkeuze en de gele CTA staan pas na de afbeelding. Sticky ATC-bar verschijnt pas bij verder scrollen. Bevestigd op pdp-390-atf.png (eindigt bij thumbnails) en pdp-390-buybox.png (prijs/unit/CTA als aparte scroll-positie).
Aanbeveling Comprimeer de mobiele afbeelding (kleinere max-height) zodat prijs + ATC binnen de eerste viewport vallen, of toon de sticky ATC-bar direct (niet pas bij scroll-trigger) op PDP-mobiel.
breadcrumbs.liquid (r13-17) itereert product.collections | reverse en neemt elke collectie op in visuele breadcrumb en JSON-LD. Levert 6 items inclusief 'Motorolie obv kenteken', een filterresultaat en geen hierarchie-node. Misleidend navigatiepad.
Aanbeveling Voeg een skip-conditie toe: {%- unless c.handle contains 'obv-kenteken' -%}...{%- endunless -%} in zowel de JSON-LD- als de visuele breadcrumb-sectie.
In main-product.liquid (r93-114) heeft de thumbnail-galerij div[role=list] met button[role=listitem]. WAI-ARIA 1.2 staat role=listitem niet toe op button; screenreaders kondigen dit inconsistent aan.
Aanbeveling Verwijder role=listitem van de buttons. De div[role=list] met aria-label volstaat. Voor lijst-semantiek: ul/li met button daarbinnen.
Metadata telt 20 images zonder srcset. De galerij-hoofdafbeelding en thumbnails hebben wel srcset; payment-icons (7 SVGs) en mogelijk content-secties (extra_description IMG-tags) niet. SVGs zijn schaalloos en tellen feitelijk niet mee.
Aanbeveling Controleer via DevTools welke 20 images het betreft. SVG-iconen hoeven geen srcset. Verifieer dat product-recommendations via product-card.liquid rendert (heeft srcset) en check content-secties op img_url zonder srcset.
breadcrumbs.liquid itereert product.collections | reverse als ListItem; levert 6 items inclusief 'Motorolie obv kenteken', een handmatige tool-collectie die niet in het canonieke breadcrumb-pad hoort. Google ziet verwarrende padstructuur.
Aanbeveling Filter de kenteken-collectie uit de BreadcrumbList ({% unless c.handle == 'motorolie-obv-kenteken' %}). Overweeg max-diepte 3-4 niveaus.
main-product.liquid heeft een eigen Product JSON-LD (4.7/49); Shopify injecteert via content_for_header een tweede Product-schema zonder aggregateRating (intentioneel). De Organization JSON-LD in theme.liquid heeft echter hardcoded 4.7/45 (reviewCount 45) terwijl Product 4.7/49 toont. Data-inconsistentie die Google kan signaleren.
Aanbeveling Pas Organization-schema in theme.liquid aan naar reviewCount 49 (of gebruik een gedeelde settings-variabele). Verifieer in GSC of dubbele Product-items validatiefouten geven; langetermijn Shopify-auto-schema deactiveren.
Visuele analyse claimt dat de consent-banner ATF-content wegduwt. Op de daadwerkelijk meegeleverde live mobile-screenshots (pdp-390-atf.png) is GEEN consent-banner zichtbaar. Gedowngraded naar LAAG: niet reproduceerbaar, waarschijnlijk render-artefact. Het reële mobiele probleem is de scroll-afstand tot prijs/CTA (zie aparte bevinding).
Aanbeveling Verifieer eerst live (incognito, eerste bezoek) of er überhaupt een consent-banner boven de buy-box rendert vóór dev-tijd. Configureer indien wel aanwezig als compacte bottom-bar (max 56-60px).
De omschrijving-collapse (main-product.liquid r130-143) gebruikt details/summary met de volledige productomschrijving als summary-content; screenreaders kondigen de hele tekst aan als naam van de disclosure-button.
Aanbeveling Voeg aria-label='Productomschrijving uitklappen' toe aan summary, of verplaats de Lees meer-toggle buiten de content-area als standalone button na de details-wrapper.
De prijs toont '9,39/L · incl. BTW, excl. verzendkosten', wat Richtlijn 98/6/EG en BW-transparantie dekt en bezwaar over verzendkosten vooraf wegneemt. Positieve CRO-factor.
Aanbeveling Behouden. Overweeg de prijs-per-liter ook in de sticky ATC-bar te tonen zodat de waardevergelijking meeschuift bij scroll.
Het multimodale rapport meldt een consent-banner die ATF-content blokkeert (KRITIEK/HOOG). Op alle meegeleverde mobile-screenshots is GEEN consent-banner zichtbaar; ATF toont normaal breadcrumb/titel/afbeelding. Render- of analyse-artefact. Door arbiter zelf geverifieerd op pdp-390-atf.png en pdp-390-buybox.png: geen banner aanwezig.
Aanbeveling Verifieer eerst live (incognito) of een consent-banner boven de buy-box rendert vóór dev-tijd. Het reële mobiele CRO-probleem is de scroll-afstand tot prijs/CTA.
Een 6-item breadcrumb (Home > Olie > Motorolie obv kenteken > Motorolie > 5W30 > product) communiceert geen duidelijke hierarchie maar een mixed-set collecties. Gevolg van product in meerdere collecties, geen bewuste UX-keuze.
Aanbeveling Kies een primaire navigatie-collectie via custom.primary_collection-metafield of bepaal de route via de assortiment-linklist. Beperk tot max 3 stappen: Home > [categorie] > product.
De vehicle-compat snippet embedt de volledige JSON inline (~165KB raw / ~25KB gzipped voor 2753 items). Alpine bouwt bij elke accordion-expand synchroon een tree; op low-end Android kan dit 50-200ms kosten en INP richting 200ms duwen. JSON-parse bij DOMContentLoaded, niet lazy.
Aanbeveling Beperk de inline JSON tot eerste ~500 items en laad de rest async bij accordion-open, of gebruik requestIdleCallback voor de initiële parse. Meet INP via CrUX voor/na.
form | payment_button rendert 2× (r259 mobile, r403 desktop). Shop Pay/Apple Pay iframe-injectie veroorzaakt mainthread-werk bij page-load; op mobile staat de button boven de vouw. Bekende Shopify-gotcha; eerder niet verwijderd wegens conversie-risico.
Aanbeveling Overweeg de payment_button op mobile lazy te laden via Alpine x-intersect/IntersectionObserver. Weeg af tegen het Shop Pay-removal experiment (post-v29, 1.2% conversie via wallet-buttons). Meet via CrUX INP voor/na.
De kern-conversiezin 'Zelfde fabrikant als grote merken · scherpe prijs' neemt de kwaliteitsangst weg maar staat op mobiel onder de afbeelding (zichtbaar in pdp-390-buybox.png, niet in eerste viewport). Op desktop staat hij wel ATF.
Aanbeveling Verplaats de USP-regel op mobiel direct onder de titel (vóór de afbeelding) of integreer als pill bij de prijs, zodat de differentiator in de eerste viewport landt.
Varianten 1L/5L/20L/60L tonen als pills zonder hint welke maat past bij de carterinhoud. De niet-technische doelgroep weet vaak niet of 4L of 5L volstaat. Kenteken-/best-match-logica bestaat al elders maar wordt op de PDP niet ingezet.
Aanbeveling Toon bij de eenheidkeuze een korte hint ('De meeste auto's hebben 4-5L nodig') of een link 'Niet zeker? Check op kenteken'.
De specs (ACEA C3, API SN, OEM-goedkeuringen) zitten in een ingeklapte accordeon ver onder de buy-box, terwijl de koopbeslissing in de buy-box valt. Een korte spec-garantie ontbreekt op het beslissingsmoment.
Aanbeveling Plaats 1-2 kern-OEM-goedkeuringen of de hoofdnorm als badge-rij direct in de buy-box bij de Fanfaro-USP.
Visuele analyse claimt een consent-overlay die ATF-content op 390px blokkeert. Conflicteert met de live screenshots (geen banner). Gedowngraded naar LAAG en samengevoegd met de niet-reproduceerbaar-bevinding; alleen relevant als live verificatie de banner alsnog aantoont.
Aanbeveling Controleer welke consent-app de banner serveert (Shopify Admin > Apps) en configureer als bottom-bar max 60px, MAAR alleen na live reproductie. Anders geen actie.
De ATC-buttons (main-buy-box-atc-desktop/-mobile) hebben als toegankelijke naam alleen 'In mijn winkelwagen', zonder productnaam. Collectiekaarten hebben dit via v2026.06-28 al correct (aria-label met product.title).
Aanbeveling Voeg aria-label='{{ product.title | escape }} toevoegen aan winkelwagen' toe aan beide PDP-ATC-buttons, consistent met collection-product-card.liquid (K2).
In product-content-sections.liquid (r50/69/106/130) openen accordeon-panelen via x-show zonder x-transition; grotere content-blokken verschijnen visueel rauw. De prefers-reduced-motion CSS-safety-net is aanwezig.
Aanbeveling Voeg x-collapse toe aan elk panel (de @alpinejs/collapse plugin is al geladen): vervang x-show=openSections.X door x-show=openSections.X x-collapse.
theme.liquid r26 preloadt alleen red-hat-display-latin.woff2. Er zijn 4 woff2 (latin/latin-ext × normal/italic). Italic of latin-ext tekens laden on-demand na render → mogelijke FOUT en kleine CLS.
Aanbeveling Controleer of PDP-body italic RHD gebruikt (bv. extra_description rich text). Zo ja in ATF-content: voeg preload voor red-hat-display-italic-latin.woff2 toe. Latin-ext zelden ATF, acceptabel.
De knop 'In mijn winkelwagen' beschrijft een toestand, geen actie, en draagt geen waarde/urgentie. Voor een zekerheid-zoekende DIY-koper mist overtuigingskracht.
Aanbeveling Test een actiegerichte variant ('Toevoegen aan winkelwagen' of 'In winkelwagen — voor 2-3 werkdagen geleverd'), gele primary-kleur consistent houden.
De fanfaro-cross-sell-snippet (Mannol>Fanfaro) rendert niet op een Fanfaro-PDP. Er is geen alternatieve cross-sell (oliefilter, trechter, 1L bijvul), terwijl 82% van de orders 1-item is.
Aanbeveling Voeg een 'Vaak samen besteld'-blok toe (passende oliefilter, vultrechter, of 1L bijvul-variant naast 5L) om AOV te verhogen.