Das Wichtigste in Kürze
- Viele moderne Shopify-Themes unterstützen das Hover-Bild von Haus aus – schau im Theme-Editor > Kategorie-Einstellungen nach.
- 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 dies nicht unterstützt, brauchst du Code-Änderungen oder Fudge.
Die meisten Shopify-Themes, einschließlich Dawn, haben eine Einstellung Zweites Bild beim Hover anzeigen im Produkt-Grid-Abschnitt der Kategorie-Seite. Aktiviere sie und jede Karte zeigt das zweite Bild des Produkts, wenn ein Käufer mit der Maus darüber fährt (Hover).
Warum du uns vertrauen kannst
Wir haben Hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt, den KI-Operator für Shopify-Shops, mit einer Bewertung von 4.9 im Shopify App Store. Änderungen an Produktkarten sind eines der Dinge, die es als Entwurf in einem Theme umsetzen kann.
Überprüfe, ob dein Theme Hover-Bilder nativ unterstützt
Bevor du Code schreibst, prüfe, ob dein Theme diese Funktion bereits in den Einstellungen versteckt hat.
Schritt 1. Gehe zu Onlineshop > Themes > Anpassen.
Schritt 2. Navigiere zu einer Kategorie-Seite.
Schritt 3. Klicke in der linken Seitenleiste auf den Abschnitt Kategorie (oder “Produkt-Raster”, je nach Theme).
Schritt 4. Suche nach einer Einstellung namens “Zweites Bild beim Hover anzeigen”, “Bild beim Hover” oder ähnlich. Sie befindet sich möglicherweise unter einem Unterabschnitt “Produktkarte”.
Schritt 5. Aktiviere sie und speichere.
Wenn diese Option existiert, bist du fertig. Das Theme zeigt automatisch das zweite Bild aus der Medien-Galerie jedes Produkts an, wenn ein Kunde mit der Maus über die Karte fährt.
Um auszuwählen, welches Bild als zweites erscheint, siehe Produktbilder in Shopify neu anordnen.
Welche Shopify-Themes unterstützen Hover-Bilder nativ?
Einige der kostenlosen und beliebtesten Themes von Shopify haben dieses Feature integriert:
- Dawn - ja, unter Kategorie > Produktkarten-Einstellungen
- Sense - ja, an derselben Stelle
- Craft - ja
- Crave - ja
- Refresh - ja
- Impulse (kostenpflichtig) - ja
- Prestige (kostenpflichtig) - ja
Ältere oder sehr einfache Themes – sowie einige Drittanbieter-Themes – bieten diese Option möglicherweise nicht. Wenn du sie im Theme-Editor nicht siehst, unterstützt dein Theme dies leider nicht nativ.
Wie du das Hover-Bild richtig einrichtest
Das Hover-Bild ist immer das zweite Bild im Medienbereich deines Produkts. Das erste Bild ist das Haupt-/Standardbild; das zweite wird zum Hover-Zustand.
Damit das gut funktioniert:
- Stelle sicher, dass für jedes Produkt mindestens zwei Bilder hochgeladen sind.
- Halte das zweite Bild vom Stil her konsistent – die meisten Shops verwenden eine Lifestyle-Aufnahme, eine Rückansicht oder ein Flat-Lay.
- Passe das Seitenverhältnis beider Bilder an, damit die Karte beim Hover nicht ihre 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.
Um das zusätzliche Bild klein zu halten, siehe Bilder in Shopify komprimieren.
Was ist, wenn dein Theme keine Hover-Bilder unterstützt?
Wenn die Theme-Editor-Einstellung in deinem Theme nicht existiert, hast du zwei Optionen:
Option 1 - Wechsle zu einem Theme, das dies unterstützt. Wenn du ein älteres Theme verwendest, ist der Wechsel zu Dawn (kostenlos) oder einem anderen modernen Theme vielleicht der sauberste Weg – du erhältst Hover-Bilder plus eine Reihe weiterer Verbesserungen.
Option 2 - Füge es per Code hinzu. Die Umsetzung erfordert CSS-Transitions und eine kleine Liquid-Änderung, um das zweite Bild innerhalb der Produktkarte zu rendern. Das ist machbar, erfordert aber das direkte Bearbeiten von Theme-Dateien.
Du kannst Fudge, dem KI-Operator für Shopify-Shops, im Shop-Editor beschreiben, was du möchtest: “Zeige auf Kategorie-Seiten das zweite Produktbild an, wenn jemand mit der Maus über eine Produktkarte fährt. Blende zwischen den beiden Bildern über.” Fudge generiert den Code und zeigt dir einen Entwurf, bevor sich etwas in deinem Live-Shop ändert.
Verhalten auf dem Smartphone
Hover-Effekte werden auf Touchscreens nicht ausgelöst – auf Smartphones gibt es keinen Hover-Status. Das ist so vorgesehen und auch völlig in Ordnung. Das Hover-Bild wird mobil einfach nicht angezeigt, stattdessen bleibt das Hauptbild zu sehen.
Einige Themes fügen als Begleitfunktion eine Wischgeste auf mobilen Produktkarten hinzu. Das erfordert jedoch zusätzlichen Code über den Standard-Schalter für Hover-Bilder hinaus.
Mehr als nur Hover-Bilder
Wenn du mehr Kontrolle darüber haben möchtest, wie Produktkarten aussehen – animierte Übergänge, Quick-Add-Overlays, benutzerdefinierte Platzierung von Badges oder unterschiedliche Bild-Layouts pro Kategorie –, geht das über die Optionen des Theme-Editors hinaus. Fudge kann diese direkt in dein Theme einbauen, basierend auf einer einfachen Beschreibung in natürlicher Sprache.
FAQ
Kann das Hover-Bild auch auf dem Handy funktionieren?
Nicht als echtes Hovern, nein – Mobilgeräte haben keinen Hover-Zustand. Was möglich ist: Tippen-und-Halten (tap-and-hold) zum Wechseln, Wischen (swipe) zum Weitergehen oder automatische Rotation. Der Standard-Toggle im Theme-Editor wirkt sich nur auf Desktop aus. Für jede dieser Optionen kannst du Fudge beschreiben, was du möchtest ("rotiere auf mobilen Karten alle 3 Sekunden automatisch zwischen den ersten beiden Produktbildern"), und es bearbeitet das Produktkarten-Snippet direkt.
Kann ich auswählen, welches Bild beim Hovern angezeigt wird, anstatt nur das zweite?
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, sortiere die Medien des Produkts neu, sodass dein bevorzugtes Hover-Bild an Position 2 steht. Für mehr Flexibilität (z. B. Auswahl per Metafeld oder Verwendung eines getaggten Bildes) benötigst du eine Code-Änderung.
Warum ist mein Hover-Bild verzerrt oder verändert die Kartengröße?
Das liegt fast immer an einem nicht übereinstimmenden Seitenverhältnis. Das Hover-Bild benötigt dasselbe Verhältnis wie das primäre Bild, andernfalls ändert die Karte beim Bildwechsel ihre Größe. Exportiere das zweite Bild entweder mit denselben Abmessungen neu oder weise beiden Bildern mit CSS über aspect-ratio und object-fit: cover ein festes Seitenverhältnis zu.
Kann ich einen Fade oder eine Animation zum Hover-Übergang hinzufügen?
Ja. Die meisten modernen Themes verwenden bereits eine CSS-Opacity-Transition beim Bildwechsel. Um sie anzupassen, suche das CSS für die Produktkarte in deinem Theme (normalerweise card-product.css oder ähnlich) und passe die Eigenschaft transition beim Hover-Bild an – zum Beispiel transition: opacity 0.3s ease; für ein langsames Überblenden.
Machen Hover-Bilder meine Kategorie-Seite langsamer?
Geringfügig – jede Produktkarte lädt zwei Bilder statt einem. Du kannst das mit Lazy Loading (moderne Themes tun dies standardmäßig) und richtig dimensionierten Bildern abmildern. Bei Kategorien mit weniger als 50 Produkten sind die Auswirkungen auf die Performance in der Regel vernachlässigbar.
