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 Grids zeigen Name und Preis unter jedem Bild an, sodass Kunden das Produkt öffnen müssen, um es hinzuzufügen. Ein Hover-Reveal-Grid legt Titel, Preis und den Quick-Add-Button beim Hovern über das Bild, sodass man Produkte direkt in den Warenkorb legen kann, ohne eine neue Seite laden zu müssen.
Worauf du achten solltest
- Touch-Geräte: Fudge weicht auf ein Tap-to-Reveal aus, damit es auch auf dem Smartphone funktioniert.
- Ausverkaufte Varianten: Quick Add ist für Produkte ohne Bestand deaktiviert.
- Barrierefreiheit: Der Tastatur-Fokus löst den Reveal ebenfalls aus, nicht nur das Hovern.
- Lazy-Images: Fudge lässt dein bestehendes Lazy-Loading intakt.
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 Produktkarten mit Hover-Reveal funktionieren
In Produkt-Grids sorgt das Einblenden von Titel, Preis und dem Quick-Add-Button beim Hovern für ein übersichtlicheres Stöbern (weniger visuelles Rauschen), während kaufbereite Elemente genau dann angezeigt werden, wenn man den Fokus darauf legt.
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
- Reibungslose Slide-up-Animation — Titel, Preis und CTA erscheinen beim Hovern.
- Quick-Add-CTA — reibungsloses Hinzufügen zum Warenkorb direkt aus dem Grid.
- Tap-Variante für Mobile — andere Interaktion für Touch-Geräte.
- Zerstört nicht das Grid-Layout — gleiche Kartenmaße, egal ob mit oder ohne Hover.
Kombiniere das mit dem Produkt-Quick-View-Modal und Hover-Bildern auf Produktkarten.
Fudge entwickelt dies als Teil seiner Merchandising-Arbeit.