Was ist Sticky Add to Cart?

Sticky Add to Cart bezeichnet ein Kauf-Control, das beim Scrollen der Produktseite sichtbar bleibt. Statt über dem sichtbaren Bereich zu verschwinden, bleibt der Button in einer Leiste am oberen oder unteren Viewport-Rand verankert, oft zusammen mit Produktname, Bild, Preis und Variantenauswahl. Am häufigsten ist das Muster auf mobilen Produktdetailseiten, weil lange Beschreibungen, Bewertungen und Empfehlungsmodule den ursprünglichen Button weit aus dem Blickfeld schieben. Die Leiste erscheint typischerweise, sobald der Inline-Button nach oben aus dem Bild läuft, und verschwindet wieder, sobald er zurückkehrt.

Definition

Sticky Add to Cart ist ein Darstellungsmuster und keine eigene Commerce-Funktion: Es ruft dieselbe Warenkorbaktion auf wie der Inline-Button und teilt dessen Zustand, einschließlich der Deaktivierung bei nicht verfügbaren Varianten. Die Varianten unterscheiden sich im Umfang. Eine minimale Leiste zeigt nur den Button, eine vollständige Leiste wiederholt Thumbnail, Titel, Preis und Variantensteuerung, damit eine Auswahl ohne Zurückscrollen möglich ist. Gestaltungsgrenzen sind relevant: Die Leiste verbraucht vertikalen Raum, kollidiert leicht mit Browserleisten, Consent-Bannern und Chat-Widgets und darf weder Formularfelder noch den Safe-Bereich des Geräts verdecken. Doppelte Buttons brauchen zudem eigene Analytics-Kennungen, damit die Zuordnung lesbar bleibt.

Warum es zählt

In einer entkoppelten Storefront ist die Sticky-Leiste eine Frage der Storefront-Komposition und wird vollständig in der Präsentationsschicht gelöst, während Preis, Bestand und Warenkorbmutationen hinter der Commerce-API bleiben. Wird die Leiste aus demselben Produktzustand gerendert wie der Inline-Button, entsteht bei einem Variantenwechsel keine Abweichung. Da das Element fixiert und oft animiert ist, zählt es zum Hydration-Budget der Seite und sollte den Main-Thread beim initialen Laden nicht blockieren. Die Sichtbarkeit über einen Intersection Observer statt über Scroll-Listener zu steuern, schützt Layoutstabilität und Eingabebereitschaft. Warenkorbmutationen laufen über denselben API-Client, sodass optimistische Updates und Fehlerbehandlung an einer Stelle bleiben.

Anwendungsfälle

Die typische Platzierung ist die Produktdetailseite auf kleinen Bildschirmen, wo die Leiste erscheint, sobald der Hero-Bereich den Viewport verlässt. Auf dem Desktop entspricht dem eine sticky Spalte, die Preis und Kauf-Controls neben langen Inhalten hält. Schnellansichten und Bundle-Konfiguratoren nutzen dasselbe Muster, um die primäre Aktion erreichbar zu halten. Auf Kategorieseiten kann eine sticky Leiste statt einer Warenkorbaktion eine Filterauswahl oder eine Vergleichsaktion zusammenfassen. In Checkout-Strecken trägt das Muster die Weiter-Aktion. Wo Platz vorhanden ist, nimmt die Leiste zusätzlich Lieferzeitangaben, Bestandsstatus oder ein Merken-Control auf.

Verwandt

Mehr dazu: Mobile Commerce · Conversion Rate Optimization (CRO).