Wichtige Erkenntnisse
- Viele moderne Shopify-Themes unterstützen das Hover-Bild nativ – prüfe dazu den Theme-Editor > Kategorie-Einstellungen.
- Das Hover-Bild ist immer das zweite Bild im Medienbereich des Produkts.
- Themes wie Dawn, Sense und Craft enthalten diese Funktion standardmäßig.
- Wenn Ihr Theme dies nicht unterstützt, benötigen Sie Code-Anpassungen oder Fudge.
Das Anzeigen eines zweiten Produktbildes beim Hovern – in der Regel ein Lifestyle-Foto oder eine andere Perspektive – ist eine kleine UX-Änderung, die Kategorieseiten spürbar verbessert. Kunden erhalten mehr Informationen, bevor sie klicken, was die Qualität des Traffics auf den einzelnen Produktseiten erhöht.
Warum Sie uns vertrauen können
Wir haben hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer 5,0-Bewertung im Shopify App Store.
Prüfen Sie, ob Ihr Theme Hover-Bilder nativ unterstützt
Bevor du Code schreibst, prüfe zuerst, ob dein Theme diese Funktion bereits in den Einstellungen versteckt hat.
Schritt 1. Gehe zu Online Store > Themes > Anpassen (Customize).
Schritt 2. Navigiere zu einer Kategorie-Seite (Collection page).
Schritt 3. Klicke in der linken Seitenleiste auf den Abschnitt Kategorie (oder „Produkt-Grid“, je nach Theme).
Schritt 4. Suche nach einer Einstellung namens „Zweites Bild beim Hover anzeigen“, „Bild bei Mouseover“ oder ähnlich. Sie befindet sich möglicherweise unter einem Unterabschnitt „Produktkarte“.
Schritt 5. Aktiviere die Option und speichere.
Wenn diese Option existiert, bist du fertig. Das Theme zeigt automatisch das zweite Bild aus der Mediengalerie jedes Produkts an, wenn ein Kunde mit der Maus über die Karte fährt.
Passend dazu: Produktbilder in Shopify neu anordnen.
Passend dazu: Produkt-Badges in Shopify hinzufügen.
Passend dazu: Kategorie-Seiten in Shopify anpassen.
Welche Shopify-Themes unterstützen Hover-Bilder nativ?
Mehrere der kostenlosen und beliebten Themes von Shopify enthalten diese Funktion:
- Dawn – ja, unter Kategorie > Produktkarten-Einstellungen
- Sense – ja, am gleichen Ort
- Craft – ja
- Crave – ja
- Refresh – ja
- Impulse (kostenpflichtig) – ja
- Prestige (kostenpflichtig) – ja
Ältere oder einfachere Themes – sowie einige Drittanbieter-Themes – enthalten diese Option möglicherweise nicht. Wenn Sie sie nicht im Theme-Editor sehen, unterstützt Ihr Theme sie nicht nativ.
So richten Sie das Hover-Bild korrekt ein
Das Hover-Bild ist immer das zweite Bild im Medienbereich deines Produkts. Das erste Bild ist das Hauptbild (Featured Image); das zweite wird zum Hover-Zustand.
Damit das gut funktioniert:
- Stelle sicher, dass bei jedem Produkt mindestens zwei Bilder hochgeladen sind
- Halte das zweite Bild im Stil konsistent – die meisten Shops nutzen einen Lifestyle-Shot, eine Rückansicht oder ein Flat Lay
- Achte darauf, dass das Seitenverhältnis (Aspect Ratio) beider Bilder übereinstimmt, damit sich die Größe der Karte beim Hover nicht verändert
Wenn einige Produkte nur ein Bild haben, wird der Hover-Effekt für diese Produkte einfach nicht ausgelöst – es gibt einen sauberen Fallback.
Passend dazu: Bilder in Shopify komprimieren.
Was, wenn Ihr Theme keine Hover-Bilder unterstützt?
Wenn die Einstellung im Theme-Editor nicht vorhanden ist, haben Sie zwei Möglichkeiten:
Option 1 – Wechseln Sie zu einem Theme, das es unterstützt. Wenn Sie ein älteres Theme verwenden, ist der Wechsel zu Dawn (kostenlos) oder einem anderen modernen Theme oft der sauberste Weg – Sie erhalten Hover-Bilder plus eine Reihe anderer Verbesserungen.
Option 2 – Per Code hinzufügen. Die Umsetzung erfordert CSS-Transitions und eine kleine Änderung im Liquid-Code, um das zweite Bild innerhalb der Produktkarte zu rendern. Das ist machbar, erfordert aber die direkte Bearbeitung von Theme-Dateien.
Sie können Fudge einfach beschreiben, was Sie möchten: „Zeige auf Kategorieseiten das zweite Produktbild an, wenn jemand über eine Produktkarte hovert. Blende weich zwischen den beiden Bildern über.“ Fudge generiert den Code und zeigt Ihnen einen Entwurf, bevor Änderungen an Ihrem Live-Shop vorgenommen werden.
Verwandt: Reorder Product Images in Shopify.
Verwandt: Compress Images in Shopify.
Verhalten auf Mobilgeräten
Hover-Effekte werden auf Touchscreens nicht ausgelöst – es gibt keinen Hover-Zustand auf dem Smartphone. Das ist normal und völlig okay. Das Hover-Bild wird auf dem Handy einfach nicht angezeigt, stattdessen wird das Vorschaubild verwendet.
Einige Themes fügen auf mobilen Produktkarten eine Swipe-Geste als ergänzendes Feature hinzu. Das erfordert jedoch zusätzlichen Code über den Standard-Hover-Toggle hinaus.
Mehr als nur Hover-Bilder
Wenn Sie mehr Kontrolle über das Aussehen der Produktkarten haben möchten – animierte Übergänge, Quick-Add-Overlays, individuelle Badge-Platzierung oder unterschiedliche Bild-Layouts pro Kategorie – gehen diese über die Optionen des Theme-Editors hinaus. Fudge kann all dies basierend auf einer einfachen Beschreibung direkt in Ihr Theme einbauen.
