Toon meer van het product met één beweging van de cursor.
Kowal Catalog Hover Image
Vervang de afbeelding in de productlijst wanneer de cursor over de afbeelding beweegt. Toon een tweede weergave, detail of andere zijde van het product zonder de productpagina te openen.
Tweede afbeelding · Detailweergave · Instellingen per product
HOE HET IN DE PRAKTIJK WERKT
01 · Je kiest de tweede afbeelding In de productgalerij wijs je een afbeelding toe aan de hover-rol.
02 · De klant beweegt de cursor over de afbeelding De lijst toont de toegewezen alternatieve afbeelding.
03 · De cursor verlaat het product De originele afbeelding wordt opnieuw weergegeven.
Wat levert het je winkel op?
Ontdek de functies, toepassingen en instellingen van de module.
Maak kennis met de module
Catalogus Hover Image is een module voor Magento 2 (versies 2.3.* en 2.4.*) die de productlijst verrijkt met interactieve functionaliteit. Wanneer de cursor over een willekeurig product in de lijst beweegt, wordt een tweede afbeelding weergegeven, de zogenaamde hover image, die je voor elk product afzonderlijk in het beheerpaneel kunt instellen.
Belangrijkste functies van de module
Interactief producten bekijken: Hiermee kunnen klanten snel een alternatieve productafbeelding bekijken zonder naar de detailpagina te gaan.
Eenvoudige configuratie: In het Magento-beheerpaneel kun je voor elk product een hover image toewijzen, waardoor je volledige controle hebt over de presentatie van het assortiment.
Grotere visuele aantrekkelijkheid van de winkel: Het dynamische effect waarbij de afbeelding bij mouse-over verandert, trekt de aandacht van klanten en kan de betrokkenheid en conversieratio verhogen.
Voordelen van het gebruik van de module
Verbetering van de gebruikerservaring: Maakt het klanten gemakkelijker om het product te leren kennen, wat kan leiden tot snellere aankoopbeslissingen.
Personalisatie van de productpresentatie: Biedt de mogelijkheid om verschillende aspecten van het product te tonen, zoals andere kleuren, patronen of details.
Compatibiliteit en betrouwbaarheid: De module is getest en volledig compatibel met Magento 2.3.* en 2.4.*.
Zo werkt het
Installatie van de module: Het installatieproces is eenvoudig en vereist geen geavanceerde technische kennis.
Hover image instellen: Ga in het beheerpaneel naar de productbewerking en voeg een extra afbeelding toe als hover image.
Effect op de winkelpagina: Wanneer de cursor over een product in de lijst beweegt, wordt automatisch de ingestelde tweede afbeelding weergegeven.
Ondersteuning en documentatie
Installatie-instructies: Gedetailleerde installatiestappen zijn beschikbaar in de meegeleverde documentatie.
Technische ondersteuning: Bij vragen of problemen met de module bieden wij professionele technische ondersteuning.
Het gebruik van de module Catalogus Hover Image is een eenvoudige manier om de functionaliteit van de winkel te verbeteren en de klanttevredenheid te verhogen door producten interactiever en aantrekkelijker te presenteren.
Afbeeldingsrol en lijstgedrag
Je schakelt de module in via Stores → Configuration → Kowal → Hover Catalog Image. De toegewezen afbeelding wordt opgeslagen in het attribuut hover_catalog. Als dit ontbreekt, controleert de code de productthumbnail als vervangende afbeelding.
Wanneer de cursor de afbeelding verlaat, wordt de oorspronkelijke afbeelding hersteld. Het script ondersteunt ook het bijwerken van de lijstinhoud. De implementatie gebruikt jQuery en RequireJS; integratie met een andere manier van renderen van productlijsten moet op het thema worden afgestemd.
Installatie via Composer
Pakket: kowal/hover-image; module: Kowal_CatalogHoverImage. Nadat je toegang tot de Kowal-repository hebt geconfigureerd, installeer je het pakket, schakel je de module in, voer je de Magento-update uit en leeg je de cache. Houd voor de productiemodus rekening met compilatie en deployment van statische content die bij de omgeving passen.
Van configuratie tot resultaat
1. Je kiest de tweede afbeelding In de productgalerij wijs je een afbeelding toe aan de hover-rol.
2. De klant beweegt de cursor over de afbeelding De lijst toont de toegewezen alternatieve afbeelding.
3. De cursor verlaat het product De originele afbeelding wordt opnieuw weergegeven.
Details al zichtbaar in de catalogus
Voorbeeld: de hoofdafbeelding toont het product van voren, terwijl de hover-afbeelding de achterkant of een close-up van het materiaal toont. De klant leert tijdens het bekijken van de lijst meer details kennen.
Het effect wordt door de cursor geactiveerd. Op touch-apparaten moet de manier van presenteren in het gebruikte thema worden gecontroleerd.
Voeg de composer-repository toe aan de configuratie:
De toegangsgegevens voor de Composer-repository (e-mailadres van de klant en licentietoken) ontvang je na aankoop per e-mail. Ze zijn ook beschikbaar in het klantpaneel nadat je bent ingelogd op kowal.store. Vervang TWOJ_EMAIL_KLIENTA door het e-mailadres van je account en TWOJ_TOKEN door de ontvangen token. Voer de opdrachten uit in de hoofdmap van Magento.
Maakt de module het mogelijk om de tweede productafbeelding weer te geven wanneer je met de cursor over de miniatuur in de productlijst (catalogus) beweegt?
Antwoord
Ja — met de module kun je aan elk product in Magento 2 een zogenaamde “hover image” (tweede afbeelding) toewijzen, die wordt getoond wanneer je met de cursor over het product in de lijst beweegt.
Vraag
In welke versies van Magento 2 werkt deze module?
Antwoord
De module is compatibel met Magento 2.3.* en Magento 2.4.*.
Vraag
Vereist de installatie van de module wijzigingen in de corebestanden van Magento of het thema?
Antwoord
Nee — de installatie van de module vereist geen bewerking van de corebestanden van Magento 2; deze werkt als een extensie volgens de Magento-architectuur.
Vraag
Hoe ziet de configuratie eruit — moet ik voor elk product handmatig een tweede afbeelding toewijzen?
Antwoord
Ja — de beheerder kan in het Magento-paneel voor elk product een “hover image” toewijzen, die wordt weergegeven wanneer de cursor eroverheen beweegt.
Vraag
Heeft de module invloed op de prestaties van de winkel?
Antwoord
De invloed is minimaal — hoewel de module een visueel ‘hover’-effect toevoegt, vraagt hij geen zware belasting en zorgt hij niet voor een merkbaar tragere werking van de winkel als de afbeeldingen zijn geoptimaliseerd. (Algemene kennis over dit type uitbreidingen)
Vraag
Werkt het hover-effect ook op mobiele apparaten?
Antwoord
Meestal kan een hover-effect minder intuïtief zijn op touchscreens (telefoons, tablets) — het is de moeite waard om te controleren of de module geschikt gedrag voor ‘aanraken’ heeft of om een alternatief gedrag op mobiele apparaten te behouden.
Vraag
Kan ik instellen dat het hover-effect alleen in bepaalde categorieën of voor bepaalde productgroepen werkt?
Antwoord
Hoewel de hoofdbeschrijving van de module het heeft over het toewijzen van een hover-afbeelding aan een product, is het de moeite waard om de documentatie te raadplegen of de fabrikant te vragen naar de beschikbaarheid van filters als je voorwaardelijke werking nodig hebt (bijv. alleen voor specifieke categorieën).
Vraag
Kan dit visuele effect helpen bij conversie en gebruikersbetrokkenheid?
Antwoord
Ja — een extra afbeelding bij het bewegen van de cursor eroverheen laat de klant sneller een alternatief perspectief van het product bekijken (bijv. een andere kleur, patroon of detail), wat de gebruikerservaring kan verbeteren en de kans op aankoop kan vergroten.
Vraag
Moet de hover-afbeelding een nieuw bestand zijn, of kan het een van de al geüploade productafbeeldingen zijn?
Antwoord
Meestal kun je bestaande afbeeldingen gebruiken als hover image — je hoeft dus niet per se een nieuw bestand te uploaden als je de afbeelding al in de productgalerij hebt. (Typische functionaliteit voor dit soort modules)
Vraag
Krijg ik na aankoop van de module technische ondersteuning en updates?
Antwoord
Ja — de fabrikant van de module geeft aan gratis updates en technische ondersteuning voor zijn extensies te bieden.
