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. Ein Hover-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 die Produktseite öffnen zu müssen.
Worauf du achten solltest
- Produkte mit nur einem Bild: Fudge überspringt den Hover-Effekt bei Produkten mit nur einem Bild.
- Mobile UX: Der Tap-to-Swap wechselt nach 2 Sekunden automatisch zurück, damit die Kunden weiter scrollen können.
- Lazy Loading: Das Hover-Bild wird erst geladen, wenn die Karte in den sichtbaren Bereich gescrollt wird.
- Bildkonsistenz: Fudge kann Produkte markieren, bei denen sich Bild 2 sehr stark 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, der Lifestyle-Shot, die alternative Farbvariante) gibt Käufern mehr Informationen, ohne dass sie klicken müssen. Es beantwortet die Frage “Wie sieht die Rückseite aus?” ganz ohne Klick.
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 wird verwendet — Rückansicht oder Lifestyle-Shot.
- Sanfter Fade-Übergang — kein abrupter Wechsel.
- Mobilfreundliche Variante — Tap-to-Swap mit automatischem Zurücksetzen nach 2 Sekunden.
- Kein Layout Shift — gleiche Abmessungen wie das Hauptbild.
Kombiniere das mit der Hover-Reveal Collection und dem Product Quick-View Modal.
Fudge integriert dies im Rahmen seiner Merchandising-Arbeit; für eine Schritt-für-Schritt-Anleitung, sieh dir Wie man ein Hover-Bild zu Shopify-Produktkarten hinzufügt an.