Füge ein Hover-Bild auf Produktkarten hinzu — zeigt das zweite/alternative Bild. Auf Mobile: Antippen für einen Wechsel für 2 Sekunden.
Want more control? See the expanded prompt ›
Füge auf jeder Produktkarte auf der gesamten Website ein Hover-Bild hinzu, das eingeblendet wird, wenn der Nutzer darüber fährt — verwende das zweite Produktbild (die Rückseite/alternative Ansicht). Auf mobilen Geräten sollen die Bilder beim Antippen wechseln und nach 2 Sekunden wieder zum Original zurückkehren.
- Hover-Crossfade zu einem zweiten Produktbild.
- Tap-to-Toggle auf Mobile (wechselt nach 2s automatisch zurück).
- Zieht automatisch das zweite Produktbild.
- Wird problemlos übersprungen, wenn ein Produkt nur ein Bild hat.
Was du erreichen willst
Ein Produktbild zeigt eine Perspektive. Das Hovern zum zweiten Bild ist eine kleine Interaktion, mit der Kunden die Rückseite eines Pullovers, das Innere einer Tasche oder die Textur eines Hautpflegeprodukts sehen können — ohne auf die PDP klicken zu müssen. Kleine Änderung, große Steigerung des Vertrauens auf dem Weg von der Übersicht ins Detail.
Worauf du achten solltest
- Produkte mit nur einem Bild — Fudge überspringt den Hover für Produkte, die nur ein Bild haben.
- Mobile UX — Fudge kümmert sich darum: Tap-Toggle wechselt nach 2s zurück, damit der Nutzer weiter scrollen kann.
- Lazy Loading — Fudge kümmert sich darum: Das Hover-Bild wird erst vorausgeladen, wenn die Karte im Sichtfeld ist.
- Bildkonsistenz — Fudge kann Produkte markieren, bei denen sich Bild 2 dramatisch von Bild 1 unterscheidet.
Wie Fudge das macht
Fudge dupliziert dein Live-Theme in einen Entwurf, baut die Section als bearbeitbare Shopify-Section mit der Platzierung und dem Verhalten, das dein Prompt vorgibt, und verknüpft sie mit deinen echten Produktdaten und deinem Branding. Alles beginnt im Entwurf — schau dir die Vorschau in deinem Store an, passe sie über den Theme-Editor an und veröffentliche erst, wenn du bereit bist. Dein Live-Store bleibt unangetastet.
Warum Hover-Bilder auf Produktkarten die Absprungrate senken
Ein zweites Produktbild beim Hovern anzuzeigen (die Rückansicht, ein Lifestyle-Foto, eine alternative Farbvariante) gibt Kunden mehr Informationen, ohne dass sie klicken müssen. Das reduziert „Ist das, was ich will?“-Abbrüche und steigert die Add-to-Cart-Rate.
Wann sich die Umsetzung lohnt
Baue Hover-Bilder ein, wenn deine Produkte sinnvolle alternative Ansichten oder Bilder haben. Lass es weg, wenn deine Produkte immer nur aus einer Perspektive gezeigt werden (wie bei den meisten Nicht-Bekleidungs-Kategorien).
Was eine gute Umsetzung ausmacht
- Zweites Produktbild verwendet — Rückansicht oder Lifestyle-Foto.
- Weicher Fade-Übergang — kein abrupter Wechsel.
- Mobile-friendly Variante — Tap-to-Swap mit automatischem Zurückwechseln nach 2 Sekunden.
- Kein Layout Shift — gleiche Maße wie das Hauptbild.
Kombiniere das mit einer Hover-Reveal-Collection und einem Produkt-Quick-View-Modal.