Sticky bar

Wat is een sticky bar?

Een sticky bar is een slanke balk die op dezelfde schermpositie — meestal bovenaan of onderaan — is vastgezet terwijl de rest van de pagina erlangs scrolt. Technisch gezien is deze opgebouwd met de CSS-eigenschap position: sticky of position: fixed. In een webwinkel houdt dit een boodschap of een actie constant in het zicht, ongeacht hoe ver de klant naar beneden heeft gescrold.

Waarom is een sticky bar belangrijk?

Een sticky bar biedt een vaste plek voor de boodschap die u klanten absoluut niet wilt laten missen: een kortingscode, een drempel voor gratis verzending of een duidelijke call to action. Omdat de balk de klant naar beneden volgt, werkt deze vooral goed op mobiele apparaten en op lange productpagina’s, waar de koopknop anders uit het zicht zou verdwijnen. Keerzijde is dat deze schermruimte inneemt, en als deze te laat of zonder gereserveerde ruimte wordt geladen, kan dit een lay-outverschuiving veroorzaken (CLS).

Veelvoorkomende use cases

• Aankondigingsbalk met een kortingscode, campagne of drempel voor gratis verzending bovenaan het scherm.
• Sticky koopknop (sticky add-to-cart) op mobiel, om de bestelknop zichtbaar te houden op lange productpagina’s.
• Cookie- en toestemmingsbanner die onderaan of bovenaan is vastgezet totdat de gebruiker een keuze maakt.
• Aftelklok of voorraadwaarschuwing die tijdsdruk toevoegt tijdens een campagne.
• Permanente zoekbalk of menubalk in een vastgezette header.

Shopify-perspectief

De meeste Online Store 2.0-thema’s worden geleverd met een ingebouwde sectie voor een aankondigingsbalk en vaak een “sticky header”-optie, maar een permanent vastgezette balk of een sticky add-to-cart vereist meestal themacode of een app. Test altijd op zowel mobiel als desktop of de balk geen belangrijke inhoud of afrekenknoppen bedekt, en de lay-out niet verstoort. Een verwante, minder opdringerige variant is een slide-in, die vanaf de zijkant naar binnen glijdt in plaats van een vaste balk in te nemen.