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 Sie Code schreiben, prüfen Sie, ob Ihr Theme diese Funktion bereits in den Einstellungen versteckt hat.
Schritt 1. Gehen Sie zu Onlineshop > Themes > Anpassen.
Schritt 2. Navigieren Sie zu einer Kategorieseite.
Schritt 3. Klicken Sie in der linken Seitenleiste auf den Bereich Kategorie (oder „Produkt-Grid“, je nach Theme).
Schritt 4. Suchen Sie nach einer Einstellung namens „Zweites Bild beim Hovern anzeigen“, „Bild bei Mouseover“ oder ähnlich. Sie kann sich unter einem Unterabschnitt „Produktkarte“ befinden.
Schritt 5. Aktivieren Sie sie und speichern Sie.
Wenn diese Option existiert, sind Sie fertig. Das Theme zeigt automatisch das zweite Bild aus der Mediengalerie des jeweiligen Produkts an, wenn ein Kunde mit der Maus über die Karte fährt.
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 Ihres Produkts. Das erste Bild ist das Vorschaubild/Standardbild; das zweite wird zum Hover-Zustand.
Damit das gut funktioniert:
- Stellen Sie sicher, dass für jedes Produkt mindestens zwei Bilder hochgeladen wurden.
- Halten Sie das zweite Bild im Stil konsistent – die meisten Shops verwenden ein Lifestyle-Foto, eine Rückansicht oder ein Flatlay.
- Achten Sie auf das gleiche Seitenverhältnis beider Bilder, damit die Karte beim Hovern nicht die Größe ä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.
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.
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.
