Sticky bar

What is a sticky bar?

A sticky bar (also called an announcement bar or notification bar) is a narrow, horizontal banner that “sticks” to the top or bottom of the browser screen and remains visible no matter how far the user scrolls. It’s a discreet yet effective way to communicate important messages throughout your entire online store.

Unlike pop-ups, which interrupt the user’s flow, sticky bars are passive and non-intrusive. They remain visible without requiring any action, and users can typically close them by clicking an “X.”

Typical uses

• Free shipping threshold: “Free shipping on orders over 499 kr.” — one of the most effective messages for increasing order value.
• Active promotions: “Black Friday: 20% off everything with code BF2025”—visible to all visitors without being disruptive.
• Newsletter sign-up: “Sign up and get 10% off” with an input field directly in the header.
• Important announcements: “We’ll be closed December 24–26” or “Extended delivery times due to high demand.”
• Countdown: A countdown timer to the end of a campaign, creating a sense of urgency.
• USPs: "Free shipping ✓ 30-day return policy ✓ Danish customer service" — trust-building messages.

The Effect of Sticky Bars

• Increased average order value: A “free shipping on orders over X kr.” bar motivates customers to add more products.
• Higher coupon redemption: A visible discount code in a sticky bar is used more often than a code hidden in an email.
• Better communication: Important messages reach all visitors without cluttering the layout.
• Low annoyance factor: Unlike pop-ups, users rarely report that sticky bars are annoying.

Best Practices

• Keep it short: A sticky bar should be readable at a glance. Max 10–15 words. If the message requires more space, use a popup or a dedicated page instead.
• Use a contrasting color: The bar should stand out visually from the rest of the page, but still fit your brand.
• Make it closable: Let users close the bar with a “X.” Save their preference in a cookie so it doesn’t reappear.
• One message: Display only one message at a time. Multiple messages in rotation can be confusing.
• Mobile optimization: Make sure the banner doesn’t take up too much of the mobile screen. Google may penalize pages with intrusive interstitials on mobile.
• Test placement: The top typically works best for important announcements. The bottom may work better for CTA-focused messages.