Das Wichtigste in Kürze
- Viele moderne Shopify-Themes unterstützen Hover-Bilder von Haus aus – schau dazu im Theme-Editor > Kategorie-Einstellungen nach.
- Das Hover-Bild ist immer das zweite Bild im Medienbereich des Produkts.
- Themes wie Dawn, Sense und Craft bringen dieses Feature standardmäßig mit.
- Wenn dein Theme das 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 so mehr Informationen vor dem Klick, was die Qualität des Traffics auf den einzelnen Produktseiten verbessert.
Warum Sie uns vertrauen können
Wir haben bereits hunderte Shopify-Storefronts erstellt und angepasst. Wir haben außerdem Fudge entwickelt – einen KI-Storefront-Editor mit einer Bewertung von 4.9 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 echten Hover-Effekt, nein – mobile Geräte haben keinen Hover-State. Was möglich ist: Gedrückt halten zum Wechseln, Wischen (Swipe) zum Weiterblättern oder Auto-Rotation. Der Standard-Toggle im Theme-Editor wirkt sich nur auf den Desktop aus. Für all das kannst du Fudge einfach beschreiben, was du möchtest ("rotiere auf mobilen Karten alle 3 Sekunden automatisch zwischen den ersten beiden Produktbildern") und es bearbeitet das Product-Card-Snippet direkt.
In den nativen Theme-Einstellungen, nein – 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 anordnen, dass dein gewünschtes Hover-Bild an Position 2 steht. Für mehr Flexibilität (z. B. Auswahl per Metafeld oder Nutzung eines getaggten Bildes) ist eine Code-Änderung nötig.
Fast immer liegt es an einem falschen Seitenverhältnis (Aspect Ratio). Das Hover-Bild braucht dasselbe Format wie das Hauptbild, sonst ändert sich die Größe der Karte beim Bildwechsel. Exportiere entweder das zweite Bild mit denselben Abmessungen neu oder gib beiden Bildern per CSS ein festes Seitenverhältnis mit aspect-ratio und object-fit: cover.
Ja. Die meisten modernen Themes nutzen bereits eine CSS-Opacity-Transition beim Bildwechsel. Um das anzupassen, such das CSS für die Produktkarten in deinem Theme (meist card-product.css oder ähnlich) und pass die Eigenschaft transition beim Hover-Bild an – zum Beispiel transition: opacity 0.3s ease; für einen langsamen Fade-Effekt.
Ein wenig – jede Produktkarte lädt zwei Bilder statt einem. Das lässt sich mit Lazy Loading (bei modernen Themes Standard) und richtig skalierten Bildern abschwächen. Der Performance-Einfluss ist bei Collections unter 50 Produkten normalerweise vernachlässigbar. Bei sehr langen Collection-Grids solltest du in Erwägung ziehen, das zweite Bild erst per Lazy Loading zu laden, wenn die Karte in den Viewport kommt.
