Sticky Bar
Eine Sticky Bar ist eine Leiste, die beim Scrollen an derselben Position fixiert bleibt – oft für Angebote, den Warenkorb oder einen Kauf-Button.
Was ist eine Sticky Bar?
Eine Sticky Bar (fixierte Leiste) ist eine schmale Leiste, die an einer festen Position auf dem Bildschirm fixiert ist – üblicherweise am oberen oder unteren Rand –, während der Rest der Seite daran vorbeiscrollt. Technisch wird sie mit CSS über position: sticky oder position: fixed realisiert. In einem Online-Shop sorgt sie dafür, dass eine wichtige Botschaft oder eine Aktion ständig sichtbar bleibt, unabhängig davon, wie weit der Kunde nach unten gescrollt hat.
Warum ist eine Sticky Bar wichtig?
Eine Sticky Bar bietet Ihnen einen festen Platz für die Botschaft, die Ihre Kunden auf keinen Fall verpassen sollen: einen Rabattcode, die Versandkostenfreigrenze oder einen klaren Call to Action. Da sie dem Kunden beim Scrollen folgt, funktioniert sie besonders gut auf Mobilgeräten und auf langen Produktseiten, bei denen der Kauf-Button andernfalls aus dem sichtbaren Bereich verschwinden würde. Im Gegenzug nimmt sie jedoch Platz auf dem Bildschirm ein. Wird sie verzögert oder ohne reservierten Platz geladen, kann sie zudem eine unerwünschte Layout-Verschiebung (CLS) auslösen.
Typische Anwendungsfälle
- Ankündigungsleiste (Announcement Bar) am oberen Rand mit einem Rabattcode, einer Aktion oder dem Schwellenwert für kostenlosen Versand.
- Sticky Add-to-Cart auf Mobilgeräten, wodurch der Kaufen-Button auf langen Produktseiten stets sichtbar bleibt.
- Cookie- und Consent-Banner, das so lange fixiert bleibt, bis der Nutzer eine Auswahl trifft.
- Countdown- oder Lagerbestands-Anzeige, um während einer Kampagne künstliche Verknappung zu erzeugen.
- Dauerhafte Suchleiste oder Menüführung innerhalb eines fixierten Header-Bereichs.
Shopify-Perspektive
Die meisten Online Store 2.0 Themes werden mit einem integrierten Abschnitt für eine Ankündigungsleiste und oft mit einer Option für einen „Sticky Header“ geliefert. Eine dauerhaft fixierte Leiste oder ein Sticky-Warenkorb-Button erfordern jedoch meist Theme-Code-Anpassungen oder eine separate App. Testen Sie stets sowohl auf Mobilgeräten als auch auf dem Desktop, dass die Leiste keine wichtigen Inhalte oder Checkout-Buttons verdeckt und das Layout nicht verschiebt. Eine verwandte, weniger störende Variante ist ein Slide-in, das von der Seite hineingleitet, anstatt eine feste Leiste einzunehmen.