Füge jeder Produktkarte in Kategorie-Grids einen Quick-Add-Button hinzu. Legt per AJAX in den Warenkorb, öffnet den Cart Drawer.
Want more control? See the expanded prompt ›
Füge auf jeder Produktkarte im Kategorie-Grid einen 'Quick Add'-Button hinzu, der die erste verfügbare Variante per AJAX in den Warenkorb legt und den Cart Drawer öffnet. Deaktivieren, wenn ausverkauft.
- Quick-Add-Button auf jeder Produktkarte; ~30 Zeilen Liquid + ~40 Zeilen JS.
- Funktioniert mit den meisten Warenkorb-Drawern, einschließlich Dawn-Style, Custom und App-basierten; Fudge testet deinen im Entwurf.
- Deaktiviert sich automatisch bei ausverkauften Varianten mit einem 'Ausverkauft'-Label.
- Feuert
add_to_cartan GA4 und Meta Ads, damit dein Tracking intakt bleibt.
Was du erreichen willst
Für Shops mit einfachen Varianten-Strukturen oder Katalogen mit vielen Bestsellern ist die PDP ein Reibungspunkt. Quick-Add verwandelt eine Kategorie-Seite in einen One-Tap-Weg in den Warenkorb — der Unterschied zwischen drei Klicks und einem Klick, angewandt auf jedes Produkt im Grid.
Worauf du achten solltest
- Varianten: Bei Produkten mit zwingend erforderlichen Varianten (Größe, Farbe) kann Fudge standardmäßig die erste verfügbare auswählen oder einen kleinen Varianten-Picker öffnen — deine Entscheidung.
- Ausverkauft: Buttons deaktivieren sich automatisch und zeigen den Text 'Ausverkauft'.
- Warenkorb-Drawer-Hook: Funktioniert mit den meisten Warenkorb-Drawern; Fudge erkennt die bestehende Implementierung, klinkt sich dort ein und testet es im Entwurf.
- Tracking: Fudge feuert ein
add_to_cart-Event, damit GA4 und Meta Ads Pixel die Aktion erfassen.
Wie Fudge das macht
Fudge dupliziert dein Live-Theme in einen Entwurf, baut die Section als bearbeitbare Shopify-Section mit der von dir gewünschten Platzierung und dem Verhalten deines Prompts, 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 Quick-Add-Buttons auf Kollektionskarten Käufern helfen, schneller einzukaufen
Für Käufer, die wissen, was sie wollen, überspringt ein Quick-Add-Button auf der Produktkarte den Schritt über die PDP komplett. Das Hinzufügen per AJAX öffnet den Warenkorb-Drawer, der Käufer sieht den neuen Artikel und kann entweder zur Kasse gehen oder weiterstöbern.
Wann sich die Umsetzung lohnt
Nutze Quick-Add für Kategorie-Grids in Katalogen mit einfachen Varianten-Strukturen. Lass es lieber bei Produkten, die detaillierte Konfigurationen (Größenauswahl, Personalisierung) erfordern.
Was einen guten Button ausmacht
- Logik für erste verfügbare Variante — wählt bei Produkten mit mehreren Varianten die erste aus, die auf Lager ist.
- AJAX-Add, kein Neuladen der Seite — öffnet sofort den Warenkorb-Drawer.
- Deaktivierter Zustand bei Ausverkauf — fehlerfreie Handhabung.
- Einheitlich über alle Kollektions-Raster hinweg — konsistente UX.
Kombiniere das mit dem Produkt-Quick-View-Modal und der Warenkorb-Drawer Gratisversand-Leiste.
Fudge baut dies im Rahmen seiner Merchandising-Arbeit ein.