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 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
Als echten Hover nicht, nein – mobile Geräte haben keinen Hover-State. Was möglich ist: Tap-and-Hold zum Wechseln, Swipen zum Weiterblättern oder eine Auto-Rotation. Der Standard-Toggle im Theme Editor wirkt sich nur auf Desktop aus. Für all diese Wünsche beschreibe Fudge einfach, was du möchtest („auto-rotate between the first two product images on mobile cards every 3 seconds“), 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 Produktmedien neu anordnen, sodass dein gewünschtes Hover-Bild an Position 2 steht. Für mehr Flexibilität (z. B. Auswahl über ein Metafield oder durch getaggte Bilder) ist eine Anpassung am Code nötig.
Meistens liegt das an einem falschen Seitenverhältnis (Aspect Ratio). Das Hover-Bild muss dasselbe Format haben wie das Hauptbild, sonst verändert sich die Größe der Karte beim Bildwechsel. Exportiere das zweite Bild entweder mit den gleichen Maßen neu, oder gib beiden Bildern in CSS ein festes Seitenverhältnis mithilfe von aspect-ratio und object-fit: cover.
Ja. Die meisten modernen Themes nutzen bereits eine CSS-Opacity-Transition beim Bildwechsel. Um das anzupassen, suche das CSS der Produktkarte in deinem Theme (meistens card-product.css oder ähnlich) und passe die transition-Eigenschaft für das Hover-Bild an – zum Beispiel transition: opacity 0.3s ease; für ein langsames Ein- und Ausblenden (Fade).
Ein bisschen – jede Produktkarte 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 Collections mit weniger als 50 Produkten in der Regel vernachlässigbar. Bei sehr langen Collection-Grids solltest du erwägen, das zweite Bild erst dann per Lazy Loading zu laden, wenn die Karte im Viewport erscheint.
