Sticky bar

Vad är en sticky bar?

En sticky bar är en smal stapel som är fäst på samma plats på skärmen – vanligtvis överst eller nedtill – medan resten av sidan rullar förbi. Tekniskt sett är den gjord med CSS position: sticky eller position: fixed. I en webshop används den för att hålla ett meddelande eller en åtgärd ständigt synlig, oavsett hur långt kunden har scrollat ​​ner på sidan.

Varför är en sticky bar viktig?

En sticky bar ger dig en fast plats för meddelandet som du helst inte vill att kunden ska förbise: en rabattkod, en fri fraktgräns eller en tydlig uppmaning. Eftersom den följer med ner på sidan fungerar den särskilt bra på mobilen och på långa produktsidor, där köpknappen annars försvinner från skärmen. Å andra sidan stjäl det utrymme i visningsporten, och om det sätts in för sent eller utan reserverat utrymme kan det utlösa layoutskift (CLS).

Typiska användningssituationer

• Announcement bar med rabattkod, kampanj eller fri fraktgräns överst.
• Sticky add-to-cart på mobilen, så köpknappen är alltid synlig på långa produktsidor.
• Cookie- och samtyckesbanner som bifogas tills användaren tagit ställning.
• Nedräkning eller lageravisering som skapar tidspress under en kampanj.
• Ihållande sökning eller menyrad i en fäst rubrik.

Shopify-perspektiv

De flesta Online Store 2.0-teman har en inbyggd meddelandefältssektion och ofta ett “sticky header”-alternativ, men en ihållande fastnålad stapel eller klibbig tillägg i kundvagn kräver vanligtvis temakod eller en app. Testa alltid på både mobil och desktop att stapeln inte täcker viktigt innehåll eller kassaknappar och att den inte trycker på layouten. En relaterad mindre påträngande variant är en slide-in som glider in från sidan istället för att uppta en fast bar.