Das Wichtigste in Kürze
- Viele moderne Shopify-Themes unterstützen Hover-Bilder von Haus aus – prüfe 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 dein Theme es nicht unterstützt, brauchst du Code-Anpassungen oder Fudge.
Ein zweites Produktbild beim Hovern anzuzeigen – meistens ein Lifestyle-Foto oder ein anderer Blickwinkel – ist eine kleine UX-Anpassung, die Kategorie-Seiten spürbar aufwertet. Kunden erhalten mehr Informationen vor dem Klicken, was die Qualität des Traffics auf den einzelnen Produktseiten verbessert.
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 du mehr Kontrolle über das Aussehen deiner Produktkarten willst – animierte Übergänge, Quick-Add-Overlays, benutzerdefinierte Badge-Platzierungen oder verschiedene Bild-Layouts pro Collection – dann geht das über die Optionen des Theme Editors hinaus. Fudge kann all diese Features anhand einer einfachen englischen Beschreibung direkt in dein Theme einbauen.
FAQ
Nicht als echtes Hovern, nein – mobile Geräte haben keinen Hover-Status. Was stattdessen möglich ist: Gedrückthalten (Tap-and-Hold) zum Wechseln, Wischen (Swipe) zum Weiterschalten oder Auto-Rotation. Der Standard-Toggle im Theme-Editor betrifft nur die Desktop-Ansicht. Beschreibe für all diese Fälle einfach, was du haben möchtest, an Fudge ("rotiere auf mobilen Cards alle 3 Sekunden zwischen den ersten beiden Produktbildern") und es bearbeitet das product-card-Snippet direkt.
In den nativen Theme-Einstellungen nicht – es ist immer das zweite Bild in der Medien-Galerie des Produkts. Um zu steuern, welches Bild angezeigt wird, musst du die Medien des Produkts so sortieren, dass dein gewünschtes Hover-Bild an zweiter Stelle steht. Für mehr Flexibilität (z. B. Auswahl über Metafelder oder ein getaggtes Bild) ist eine Code-Änderung erforderlich.
Das liegt fast immer an unterschiedlichen Seitenverhältnissen (Aspect Ratio). Das Hover-Bild muss das gleiche Format wie das Hauptbild haben, da sich die Card sonst beim Bildwechsel vergrößert oder verkleinert. Exportiere entweder das zweite Bild mit denselben Maßen neu oder lege für beide Bilder per CSS ein festes Seitenverhältnis mit aspect-ratio und object-fit: cover fest.
Ja. Die meisten modernen Themes nutzen bereits eine CSS-Opacity-Transition beim Bildwechsel. Um das anzupassen, suche die Product-Card-CSS in deinem Theme (meistens card-product.css oder ähnlich) und ändere die transition-Eigenschaft für das Hover-Bild – zum Beispiel transition: opacity 0.3s ease; für einen langsamen Fade.
Ein wenig – jede Product Card lädt zwei Bilder statt einem. Dem kannst du mit Lazy Loading (bei modernen Themes Standard) und richtig skalierten Bildern entgegenwirken. Die Auswirkungen auf die Performance sind bei Kategorien mit weniger als 50 Produkten normalerweise vernachlässigbar. Bei sehr langen Grids solltest du erwägen, das zweite Bild per Lazy Loading erst zu laden, wenn die Card im sichtbaren Bereich (Viewport) auftaucht.
