Sticky Add to Cart-Elemente bieten Kunden eine Kaufaktion, nachdem sie durch eine lange Produktseite gescrollt haben. Diese Shops wiederholen die Hinzufügen-Aktion, bauen Auswahlmöglichkeiten in die Leiste ein oder führen den Kunden zu den Hauptoptionen zurück. Der richtige Ansatz hängt davon ab, welche Entscheidungen noch getroffen werden müssen.
Ritual zeigt seine Kaufleiste an, nachdem der Hauptkaufbereich aus dem Blickfeld verschwindet. Auf dem Desktop ist sie oben verankert, auf Mobile unten platziert. Preis und eine Kauf-Aktion bleiben verfügbar, während die Kunden lesen. Überprüfe die Leiste zusammen mit dem Header der Website, um zu verstehen, wie viel festen Platz sie einnehmen.
Für deinen Shop
Plane die Kaufleiste zusammen mit dem Rest der fixierten Benutzeroberfläche.
Die Desktop-Leiste von Smith Teamaker zeigt den Produkttitel, den Startpreis und „Choose Options“. Die Aktion scrollt zurück zum Hauptformular, anstatt einen unbestimmten Artikel hinzuzufügen. Das aufgezeichnete mobile Material ließ keine verlässlichen Schlüsse zu, weshalb sich dieses Beispiel nur auf den Desktop bezieht. Es eignet sich für Produkte, deren Format oder Lieferoption mehr Aufmerksamkeit erfordert.
Für deinen Shop
Führe zu den Hauptoptionen zurück, wenn die Bestellung noch nicht vollständig konfiguriert ist.
Momentous synchronisiert Änderungen an Variante, Menge und Kaufart (Einzelkauf oder Abo) zwischen der Hauptkaufbox und der unteren Leiste. Die Leiste erscheint, nachdem der Hauptproduktbereich aus dem Sichtfeld gescrollt ist. Ein Kunde, der weiterliest, kann sie mit demselben Produkt und denselben Kaufbedingungen nutzen, die bereits im Hauptformular ausgewählt wurden.
Für deinen Shop
Halte alle Kauf-Elemente mit derselben Auswahl verbunden.
maxbone integriert Dropdowns für Farbe und Größe zusammen mit dem Produkttitel und Preis in seiner unteren Leiste. Auch in der mobilen Ansicht sind diese Elemente vorhanden, obwohl ihre Interaktion in der Untersuchung nicht getestet wurde. Die Auswahlfelder benötigen genug Platz, um in dem kompakten Bereich lesbar und bedienbar zu bleiben.
Für deinen Shop
Füge nur wesentliche Auswahlmöglichkeiten hinzu und teste ihre mobile Bedienung.
Horizn Studios zeigt einen blauen mobilen Button, nachdem der Hauptkaufbereich weggescrollt ist. Der kontrastreiche Button bleibt auf dem Rest der Produktseite verfügbar. Diese kompakte Version setzt voraus, dass die Produktauswahl bereits klar ist; fehlende Pflichtoptionen erfordern eine definierte Reaktion.
Für deinen Shop
Überprüfe den Status für unvollständige Auswahl genauso wie den kaufbereiten Status.
Our Place nutzt auf dem Desktop eine obere Leiste mit Produkttitel, Preis und Aktion, auf Mobile dann einen Button unten. Er erscheint, wenn der Hauptkaufbereich aus dem Sichtfeld gerät. Die mobile Position benötigt Platz über den Rändern des Displays und muss mit anderen fixierten Elementen zusammen funktionieren.
Für deinen Shop
Halte den Kaufzugriff verfügbar, ohne die Produkterklärung zu verdecken.
Ten Thousand ändert das mobile Label je nach Kaufstatus zwischen „Select Size“ und „Add to Bag“. Auf dem Desktop werden zusätzlich ein Thumbnail und eine Zusammenfassung der Variante angezeigt. Das Label zeigt den Kunden an, ob ein Tippen den Artikel hinzufügt oder sie zu einer noch fehlenden Auswahl führt.
Für deinen Shop
Sorge dafür, dass der Button die im aktuellen Status verfügbare Aktion beschreibt.
REP Fitness wiederholt Produktname, Preis und die Hinzufügen-Aktion in einer unteren Leiste, nachdem die ursprüngliche Kaufbox weggescrollt ist. Kunden behalten diesen Kontext, während sie die Spezifikationen der Ausrüstung lesen. Für jede erforderliche Konfiguration muss es immer noch einen klaren Ort geben, an dem sie vor dem Hinzufügen des Artikels abgeschlossen werden kann.
Für deinen Shop
Behalte Produktidentität und Preis bei langen Spezifikationen im Blick.
Die Desktop-Leiste von Slowdown Studio enthält ein Thumbnail, einen Titel, den Preis und einen Kauf-Button. Das kleine Bild identifiziert die Textilie, während Kunden weiter unten auf der Seite lesen. Da die Leiste über dem Inhalt liegt, benötigen die letzten Seitenabschnitte genügend Platz, um darüber sichtbar zu bleiben.
Für deinen Shop
Nutze eine kompakte Bild-Erinnerung und lass Platz für Inhalte unter der Leiste.
House of Spoils nutzt auf Mobile eine schwebende Karte, die Kunden zu den Produktoptionen zurückführt. Ihr Thumbnail spiegelt die Rahmenwahl wider, während die Leiste auf dem Desktop am unteren Rand platziert ist. Die Entscheidungen zu Größe und Rahmung des Kunstwerks verbleiben im Hauptkonfigurationsbereich, während die Karte einen Weg zurück bietet.
Für deinen Shop
Fasse detaillierte Konfigurationen zusammen und mach es einfach, zu ihnen zurückzukehren.
Die mobile Toolbar von DedCool enthält einen Kauf-Button in voller Breite und ein Wunschlisten-Symbol, die während des gesamten Lesens sichtbar bleiben. Der Desktop nutzt eine kompakte Aktion am oberen Rand. Die mobile Toolbar teilt sich den begrenzten Platz auf dem Bildschirm mit Chat, Cookie-Zustimmung und Promo-Elementen, daher müssen diese Kombinationen zusammen überprüft werden.
Für deinen Shop
Überprüfe alle fixierten Elemente zusammen auf dem kleinsten Bildschirm.
Allies of Skin integriert Dropdowns für Kaufart (Einzelkauf oder Abo) und Größe in seine untere Leiste. Diese Bedienelemente machen Optionen zugänglich, die sich sowohl auf den Artikel als auch auf die Bedingungen für wiederkehrende Bestellungen auswirken. Die Studie hat nicht geklärt, ob sich Änderungen zurück zum Hauptformular synchronisieren; dieses Verhalten bleibt also essenziell zu überprüfen.
Für deinen Shop
Halte den ausgewählten Einzelkauf oder Abo-Plan in beiden Kaufformularen konsistent.
Proud Mary Coffee integriert den Preis, eine Kauf-Aktion und Express-Checkout-Optionen in seine mobile Leiste. Die Bestellinformationen bleiben sichtbar, während die Kunden etwas über den Kaffee lesen. Mehrere Zahlungsaktionen erhöhen auch die Höhe der Leiste, weshalb Abstände und eine klare Hauptaktion auf dem Smartphone wichtig sind.
Für deinen Shop
Halte den Preis lesbar und gib einer Aktion optische Priorität.
Dinosaur Designs packt Produktidentität, Preis und „Select Option“ in seine Sticky-Leiste. Die Aktion führt zurück zum Haupt-Variantenraster, wo visuelle Entscheidungen mehr Platz haben. Kunden können weiterlesen, ohne den Weg zurück zur vollständigen Auswahl zu verlieren.
Für deinen Shop
Verlinke zurück zu einem visuellen Selektor, wenn dieser mehr Platz braucht, als die Leiste zulässt.
Versed zeigt auf Mobile einen Sticky Kauf-Button, sobald der ursprüngliche Kaufbereich nicht mehr im Bild ist, wobei der Preis auf dem Label steht. Das erfasste Desktop-Layout nutzt diese Leiste nicht. Das Feature geht gezielt auf die Anforderungen kleiner Bildschirme ein, unabhängig vom Desktop-Layout.
Für deinen Shop
Füge Sticky-Elemente dort hinzu, wo das Layout sie tatsächlich braucht.
Ten Thousand ändert sein mobiles Label von „Select Size“ zu „Add to Bag“, wenn der Kaufstatus dies zulässt. Der „Choose Options“-Button von Smith Teamaker führt zum Hauptformular zurück, und Dinosaur Designs schickt die Kunden zurück zur Varianten-Auswahl. Die Aktion sollte beschreiben, was passiert, wenn ein Artikel noch nicht vollständig spezifiziert ist.
Eine kleine Auswahlmöglichkeit kann für eine einfache Entscheidung ausreichen. maxbone integriert Farbe und Größe in seiner Leiste, während Allies of Skin die Kaufart einbindet. Wenn die Leiste Bedienelemente aus dem Hauptformular dupliziert, benötigen beide den gleichen ausgewählten Artikel, Preis und Kaufmodus. Momentous hat diese Synchronisierung demonstriert; bei der Aufnahme von Allies of Skin wurde dies nicht festgestellt, sodass dieses Verhalten noch getestet werden muss.
Ritual und Our Place verschieben ihre Desktop-Top-Bars auf Mobilgeräten an den unteren Rand. Versed nutzt einen mobilen Button ohne dieselbe Desktop-Leiste. Diese Beispiele gehen auf das unterschiedlich große Platzangebot und die verschiedenen Entfernungen zum Haupt-Kaufformular ein. Überprüfe jede Bildschirmgröße für sich.
Teste die Leiste, wenn die mobile Tastatur, der Chat, das Cookie-Banner und Werbeangebote eingeblendet sind. Proud Mary Coffee fügt mehrere Zahlungsaktionen ein, während das Overlay von Slowdown Studio genug Platz braucht, damit der finale Seiteninhalt sichtbar bleibt. Halte den Preis und die Aktion lesbar, ohne wichtige Details zu verdecken. Teste neben dem normalen Scrollen auch Zoom, Tastaturfokus und den nutzbaren Bereich an den Rändern des Bildschirms.
Diese Beispiele beinhalten keine gemessene Conversion-Steigerung. Ein Sticky-Element kann den Kaufbereich leichter erreichbar machen, verdeckt aber möglicherweise auch Inhalte oder führt zu widersprüchlichen Auswahlen. Teste es am echten Kaufprozess.
Verwende ein Label wie „Select size“ oder „Choose options“ und führe den Kunden zu dieser Auswahl. Vermeide es, stillschweigend eine willkürliche Variante hinzuzufügen.
Nutze sie dort, wo Kauf-Elemente sonst schwer zu erreichen sind. Eine lange mobile Seite und ein Desktop-Layout mit sichtbarer Kaufspalte können ein unterschiedliches Verhalten erfordern.
Es handelt sich um ein Kauf-Element, das verfügbar bleibt, während der Kunde aus dem eigentlichen Kaufbereich herausscrollt. Es kann den gewählten Artikel hinzufügen, kompakte Auswahlmöglichkeiten bieten oder den Kunden zu den erforderlichen Optionen zurückführen. Sein Label sollte diese Aktionen klar unterscheiden.
Halte die ausgewählte Variante, die Menge, den Preis und die Option auf Einmalkauf oder Abonnement konsistent. Änderungen in beiden Formularen sollten im jeweils anderen gespiegelt werden. Die Aufnahme von Momentous zeigt dieses Verhalten; die Screenshots bestätigen es nicht für jeden Shop.
Gib Fudge ein Ziel und eine Referenz. Das Tool schlägt Änderungen für deinen Shop vor, erstellt einen Entwurf in deinem Shopify-Theme und gibt dir Rückmeldung. Du überprüfst jede Änderung, bevor sie live geht.
Sieh dir an, wie der Shop-Editor funktioniert