Sticky bar
En sticky bar er en bjælke, der bliver fastgjort samme sted på skærmen, mens brugeren scroller – ofte til tilbud, kurv eller køb-knap.
Hvad er en sticky bar?
En sticky bar er en smal bjælke, der bliver fastgjort samme sted på skærmen – typisk i toppen eller bunden – mens resten af siden scroller forbi. Rent teknisk laves den med CSS position: sticky eller position: fixed. I en webshop bruges den til at holde en besked eller en handling konstant synlig, uanset hvor langt kunden er scrollet ned på siden.
Hvorfor er en sticky bar vigtig?
En sticky bar giver dig en fast plads til det budskab, du helst ikke vil have kunden overser: en rabatkode, en fri fragt-grænse eller en tydelig call to action. Fordi den følger med ned ad siden, virker den især godt på mobil og på lange produktsider, hvor køb-knappen ellers forsvinder ud af skærmen. Til gengæld stjæler den plads i viewporten, og hvis den indsættes for sent eller uden reserveret plads, kan den udløse layoutforskydning (CLS).
Typiske brugssituationer
- Announcement bar med rabatkode, kampagne eller fri fragt-grænse i toppen.
- Sticky add-to-cart på mobil, så køb-knappen altid er synlig på lange produktsider.
- Cookie- og samtykkebanner, der bliver fastgjort til brugeren har taget stilling.
- Countdown eller lagerbesked, der skaber tidspres under en kampagne.
- Vedvarende søge- eller menubjælke i en fastgjort header.
Shopify-perspektiv
De fleste Online Store 2.0-temaer har en indbygget announcement bar-section og ofte en “sticky header”-indstilling, men en vedvarende fastgjort bjælke eller sticky add-to-cart kræver typisk temakode eller en app. Test altid på både mobil og desktop, at bjælken ikke dækker vigtigt indhold eller checkout-knapper, og at den ikke skubber layoutet. En beslægtet mindre påtrængende variant er en slide-in, der glider ind fra siden i stedet for at optage en fast bjælke.