Lass in der Featured Collection die Produktinfos beim Hovern über das Bild gleiten. Inklusive Quick-Add.
Want more control? See the expanded prompt ›
Ersetze im Bereich Featured Collection auf der Startseite das Produkt-Grid durch eines, bei dem Titel, Preis und ein 'Quick-Add'-Button über das Bild gleiten, wenn man mit der Maus darüber fährt.
- Beim Hovern gleiten Produkttitel, Preis und Quick-Add über das Bild.
- Touch-Geräte nutzen als Fallback eine Tap-to-Reveal-Interaktion.
- Reiner CSS-Hover — kein JS-Framework nötig.
- Funktioniert auf jedem Produktkarten-Grid: Featured, Kategorie, Suche.
Was du erreichen willst
Statische Produkt-Grids zeigen Name + Preis unter dem Bild an, was Käufer oft zum Nachdenken bringt, bevor sie klicken. Ein Hover-Reveal-Grid legt Produktinfos, Preis und Quick-Add bei Interesse direkt über das Bild — weniger Seitenladezeiten, souveräneres Shoppen.
Worauf du achten solltest
- Touch-Geräte — Fudge greift auf Tap-to-Reveal zurück, damit es auf dem Smartphone funktioniert.
- Ausverkaufte Varianten — Fudge kümmert sich darum: Quick-Add wird bei Produkten ohne Bestand deaktiviert.
- Barrierefreiheit — Fudge kümmert sich darum: Der Reveal wird nicht nur per Hover, sondern auch über Tastatur-Fokus ausgelöst.
- Lazy Images — Fudge behält dein bestehendes Lazy-Loading bei.
Wie Fudge das macht
Fudge dupliziert dein Live-Theme in einen Entwurf, erstellt die Sektion als bearbeitbare Shopify-Sektion mit der Platzierung und dem Verhalten, das dein Prompt vorgibt, und verknüpft sie mit deinen echten Produktdaten und deinem Marken-Styling. Alles beginnt als Entwurf — schau dir die Vorschau in deinem Store an, nimm Anpassungen über den Theme-Editor vor und veröffentliche erst, wenn du bereit bist. Dein Live-Store bleibt unangetastet.
Warum Hover-Reveal-Produktkarten konvertieren
In Produkt-Grids sorgt das Einblenden von Titel, Preis und Quick-Add-Button beim Hovern für ein übersichtlicheres Einkaufserlebnis (weniger visueller Lärm), während kaufentscheidende Elemente beim Fokussieren dennoch sichtbar sind. Steigert die Add-to-Cart-Rate.
Wann sich die Umsetzung lohnt
Nutze Hover-Reveal für Fashion- und Lifestyle-Kataloge, bei denen das visuelle Stöbern im Vordergrund steht. Verzichte darauf bei Bedarfsgütern, wo Käufer alle Infos auf einen Blick sehen wollen.
Was eine großartige Lösung ausmacht
- Sanfte Slide-up-Animation — Titel, Preis und CTA erscheinen beim Hovern.
- Quick-Add-CTA — reibungsloses Hinzufügen zum Warenkorb direkt aus dem Grid.
- Mobile-Tap-Variante — angepasste Interaktion für Touch-Geräte.
- Zerstört nicht das Grid-Layout — gleiche Kartengröße, ob mit oder ohne Hover.
Kombiniere dies mit einem Product-Quick-View-Modal und Hover-Bildern auf Produktkarten.