6 Sticky Bar Examples With Templates to Copy Now

TL;DR:

• Sticky bars are fixed, full-width strips that stay visible during scrolling to deliver focused messages without disrupting content. They should align with specific goals like promoting sales or capturing emails and be paired with behavior-triggered popups for high-intent moments. Prioritizing simple, targeted messages that measure downstream actions improves their conversion impact significantly.

A sticky bar is a thin horizontal strip pinned to the top or bottom of your viewport that stays visible as visitors scroll, delivering one focused message without blocking content. The highest-impact types marketers use are:

• Top promo bar — sitewide discount or flash-sale announcement
• Free-shipping threshold bar — dynamic progress toward a cart minimum
• Countdown/urgency bar — ticking clock tied to a sale end or limited offer
• Bottom email-capture bar — passive newsletter opt-in on content pages
• Social proof / low-stock alert — trust signal or scarcity nudge
• Product page CTA bar — persistent buy or add-to-cart prompt

One quick rule before you pick: use a sticky bar when you need a message visible at all times without interrupting the user. Use a popup when you want to capture a high-intent moment triggered by behavior (exit intent, scroll depth, time on page). Bars and popups work best together, not as substitutes.

Table of Contents

• What are sticky bars and where should you place them?
• Which use case matches which bar type?
• 6 sticky bar examples you can copy right now
• Ready-to-use templates and a minimal HTML/CSS snippet
• How to create a sticky bar from scratch
• How to test sticky bars and which metrics actually matter
• Design, copy, and accessibility rules that prevent common mistakes
• What the research says and the mistakes that hurt performance
• Troubleshooting common sticky-bar conflicts
• Key Takeaways
• The case for keeping it boring on purpose
• Seo-analytic can handle the setup and testing for you
• Useful sources
• FAQ

What are sticky bars and where should you place them?

A sticky bar is a fixed-position, full-width strip that stays anchored to the top or bottom of the browser window regardless of scroll position. It is thinner than a modal, lighter than a banner ad, and far less disruptive than a popup. Most implementations sit between 40px and 60px tall on desktop, which keeps them under the 7% viewport-height threshold that NN/g recommends for sticky chrome.

Top placement gives you maximum visibility. Every visitor sees it the moment the page loads, which makes it the default choice for time-sensitive promotions and sitewide announcements. The trade-off is potential conflict with a fixed navigation header. If your site already has a sticky nav, a top bar stacks above it and can push content down enough to hurt the above-the-fold experience on mobile.

Bottom placement is quieter. Visitors encounter it after they have already started reading, which makes it better suited for passive lead capture on blog posts and long-form content. Top bars suit urgent sitewide discounts; bottom bars suit passive email capture on content pages.

A third variant, the reveal-on-scroll-up bar, hides when the user scrolls down and reappears when they scroll back up. It is the cleanest pattern for mobile, where screen real estate is tight.

Common variants at a glance:

• Announcement bar — new product launch, policy change, store hours
• Promo/discount bar — percentage off, dollar threshold, coupon code
• Countdown bar — sale deadline with live timer
• Email-capture bar — opt-in field or link to a lead magnet
• Social-proof bar — review count, recent purchases, low-stock alert
• Cart-threshold bar — “Add $X more for free shipping” with progress indicator

Which use case matches which bar type?

Picking the wrong bar type for your goal is the fastest way to waste the placement. Here is how goals map to formats:

1. Drive sitewide sales → top promo bar, full width, high-contrast background, coupon code visible without clicking.
2. Reduce cart abandonment → free-shipping threshold bar on product and cart pages; show a dynamic dollar amount that updates as items are added.
3. Grow your email list → bottom email-capture bar on blog and resource pages; keep the form to one field (email only).
4. Announce a product or feature → top announcement bar with a “Learn more” link; no discount needed, just clarity.
5. Create urgency → countdown bar with a real deadline; pair it with a sale collection page for maximum relevance.
6. Build trust → social-proof bar showing recent purchase count, star rating, or low-stock alert on product pages.

On blog and content pages, a bottom bar outperforms a top bar for email capture because readers are already engaged and a bottom prompt feels like a natural next step rather than an interruption. On product and cart pages, a top bar with a free-shipping threshold or urgency message matches the visitor’s buying mindset. On checkout pages, keep bars minimal or off entirely — you do not want anything pulling attention away from the payment form.

Bars handle always-on visibility. When a visitor hits a high-intent trigger (30 seconds on a product page, scrolling 70% through a post), a behavior-triggered popup can layer on top to capture the moment. The two formats are complementary, not competing.

6 sticky bar examples you can copy right now

Flash-sale top bar

Copy: “Flash Sale: 20% off everything. Code FLASH20 — ends midnight.”

Why it works: The payoff is in the first three words. The code is visible without any click, and the deadline creates genuine urgency. Effective announcement bar copy stays under 10 words and front-loads the benefit — this hits both.

Design notes: Use a high-contrast color (brand accent or red) against white text. Height: 48px desktop, 40px mobile. No animation needed; static is faster to load and less distracting.

Targeting: Sitewide, all pages except checkout. Schedule to match the actual sale window.

Free-shipping threshold bar with progress

Copy: “You’re $12 away from free shipping. Keep shopping →”

Why it works: The dynamic dollar amount makes the bar feel personal. Visitors know exactly what action to take, and the progress framing turns a cost into a goal. This format is best placed on product and cart pages where the purchase decision is live.

Design notes: 52px tall, progress bar beneath the text (thin, 4px), green fill. Update the dollar figure client-side as cart value changes.

Targeting: Product pages and cart page only. Hide on homepage and blog.

Subscribe-and-save bottom bar

Copy: “Get 10% off your first order. Drop your email →”

Why it works: One field, one benefit, zero friction. Bottom placement means it appears after the visitor has already shown interest by scrolling. Pairing a discount with an email ask consistently outperforms a plain “subscribe” prompt. For more copy patterns, see these lead magnet ideas that pair well with email-capture bars.

Design notes: White bar, dark text, single email input + “Get 10%” button. 56px tall on desktop. On mobile, collapse to a single-line prompt that opens a small overlay on tap.

Targeting: Blog posts and content pages. Exclude product and cart pages where a promo bar already runs.

Countdown-to-sale bar

Copy: “Summer Sale ends in: [HH:MM:SS] — Shop now”

Why it works: A live countdown is the most direct urgency signal available. The timer makes the deadline concrete rather than vague. Keep the rest of the copy minimal so the clock is the visual anchor.

Design notes: Dark background, bold white timer digits, accent-color CTA button. 48px tall. Use a JavaScript countdown that stops (does not loop) when the deadline passes.

Targeting: Sale collection pages and homepage during the sale window. Remove immediately when the sale ends — a fake countdown destroys trust.

Low-stock social-proof bar

Copy: “Only 3 left in stock — 47 people are viewing this right now.”

Why it works: Scarcity and social proof together. The specific numbers (3, 47) feel real; round numbers feel fabricated. This bar works hardest on individual product pages where the visitor is already evaluating a purchase.

Design notes: Subtle amber or warm background, 44px tall, small fire or eye icon. Keep it understated — aggressive red can read as manipulative.

Targeting: Product pages only, triggered when inventory is below a set threshold. Do not show sitewide.

Blog email-capture bar

Copy: “Enjoying this? Get weekly tips in your inbox. Subscribe free →”

Why it works: The conversational opener (“Enjoying this?”) matches the reading context. It acknowledges what the visitor is doing rather than interrupting with an unrelated pitch. Bottom placement reinforces the low-pressure tone.

Design notes: Light gray or white bar, 52px tall, single CTA link (no inline form on mobile). Reveal after 40% scroll depth.

Targeting: Blog and resource pages only. Suppress for subscribers (use a cookie or list-membership check).

Ready-to-use templates and a minimal HTML/CSS snippet

Copy templates

• Promo bar: “[X]% off sitewide — use code [CODE] at checkout. Shop now →”
• Free-shipping progress: “Add $[X] more to unlock free shipping →”
• Newsletter capture: “Get [benefit] every week. Join [X] readers — subscribe free →”
• Countdown urgency: “[Event] ends in [HH:MM:SS]. Grab yours →”

Keep every headline under 10 words. Put the payoff first, the CTA last.

Minimal HTML/CSS snippet

<!-- Sticky announcement bar -->
<div
  id="sticky-bar"
  role="region"
  aria-label="Site announcement"
  style="
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #1a1a2e;
    color: #fff;
    text-align: center;
    padding: 10px 16px;
    font-size: 14px;
    box-sizing: border-box;
  "
>
  <span>Free shipping on orders over $50 — </span>
  <a
    href="/shop"
    style="color: #ffd700; font-weight: bold; text-decoration: underline;"
    aria-label="Shop now for free shipping"
  >Shop now</a>
  <button
    onclick="document.getElementById('sticky-bar').style.display='none'"
    aria-label="Close announcement bar"
    style="
      background: none;
      border: none;
      color: #fff;
      font-size: 18px;
      cursor: pointer;
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
    "
  >×</button>
</div>

<!-- Push page content below the bar -->
<style>
  body { padding-top: 44px; }
  @media (max-width: 600px) {
    #sticky-bar { font-size: 12px; padding: 8px 36px 8px 8px; }
  }
</style>

Accessibility attributes included: role="region", aria-label on the container and both interactive elements, and a keyboard-accessible close button.

Implementation notes

• WordPress: Paste inside <body> via your theme’s header.php, or use a plugin like Insert Headers and Footers to avoid editing theme files directly.
• Shopify: Add as a new section in your theme’s sections/ folder, then include it in layout/theme.liquid above {{ content_for_layout }}.
• Wix / Elementor: Use a sticky header strip element set to “fixed” position; paste the copy into the text block and link the CTA button to your target page.

Pro Tip: On Shopify, use {% if template == 'product' %} conditional logic inside your section to show a free-shipping bar only on product pages without creating a separate section file.

How to create a sticky bar from scratch

1. Define your goal and primary KPI. Checkout starts? Email subscribers? Add-to-cart rate? Every other decision flows from this. Vague goals produce vague bars.
2. Pick placement and variant. Top bar for urgency and promotions; bottom bar for passive capture. Choose the variant (static, countdown, dynamic threshold) that matches your goal.
3. Write the headline and CTA. One message, one CTA, under 10 words for the headline. Put the benefit before the ask.
4. Design for size and contrast. Stay under 7% of viewport height. Use a background color that contrasts with your site’s header so the bar reads as a distinct element, not part of the nav.
5. Implement with a snippet or plugin. Use the HTML/CSS above, a WordPress plugin, or your platform’s built-in section editor. Add body { padding-top: [bar height]px; } to prevent content overlap.
6. Set page targeting and frequency rules. Targeted bars consistently outperform sitewide bars because the message matches the visitor’s decision stage. Exclude checkout pages.
7. Add behavior rules. For mobile, implement hide-on-scroll-down and reveal-on-scroll-up to preserve reading space.
8. Schedule and activate. Set a start and end date for time-limited campaigns. A bar that outlives its sale is worse than no bar.
9. QA before launch. Check the list below.

QA checklist:

• Renders correctly on Chrome, Safari, Firefox, and Edge (desktop and mobile)
• Does not overlap with an existing sticky header or cookie consent banner
• Close button is reachable by keyboard (Tab key) and works with screen readers
• scroll-padding-top is set on html to match bar height so anchor links land correctly
• CTA tap target is at least 44×44px on mobile
• Bar hides on checkout and payment pages

For a broader implementation framework, the step-by-step CRO guide covers how sticky bars fit into a full conversion funnel.

How to test sticky bars and which metrics actually matter

Testing a sticky bar on click-through rate alone is a trap. A bar can generate clicks without moving revenue if the page it sends visitors to is weak. PulseCRO recommends prioritizing downstream behaviors like checkout starts and add-to-cart rates over simple banner clicks.

Testing roadmap:

1. Write a hypothesis tied to your goal: “Adding a free-shipping threshold bar on product pages will increase checkout starts by reducing perceived cost uncertainty.”
2. Set up event tracking (Google Analytics 4 custom events or UTM parameters on the CTA link).
3. Run an A/B test: 50% see the bar, 50% do not. Use your platform’s native split-testing or a tool like Google Optimize’s successor, VWO, or Convert.
4. Run the test until you reach a meaningful result. A common rule of thumb: at least 100 conversions per variant before drawing conclusions, and a minimum of two full business weeks to account for day-of-week variation.
5. Measure the downstream metric, not just CTR.

For conversion tracking setup that feeds these metrics correctly, tag your CTA links with UTM parameters and fire a custom event on bar close as well as on CTA click. You want both signals.

Design, copy, and accessibility rules that prevent common mistakes

Dos:

• Single message per bar, always. Two offers in one bar split attention and reduce both.
• Headline under 10 words, payoff first.
• One CTA, clearly labeled with an action verb (“Shop,” “Subscribe,” “Claim”).
• High contrast between bar background and text (WCAG AA minimum: 4.5:1 ratio for normal text).
• Minimum 44×44px tappable area for the CTA and close button on mobile.
• Keep bar height under 7% of viewport height on desktop; smaller on mobile.
• Use scroll-padding-top on html equal to bar height so anchor links do not land behind the bar.

Don’ts:

• No gratuitous animation. If you use a transition, keep it at 300–400ms with an ease curve. Faster feels jarring; slower feels broken.
• No auto-playing video or GIF in the bar.
• Do not block the virtual keyboard on mobile — a bottom bar that sits above the keyboard input area will cover form fields.
• Do not run two sticky bars simultaneously (top and bottom) unless they serve completely different audiences and you have tested the combination.

Accessibility checklist:

• role="region" and aria-label="[descriptive name]" on the bar container
• Close button has aria-label="Close announcement" and is reachable via Tab
• Focus order: bar CTA and close button come before main content in the DOM, or use tabindex to manage order
• Test with VoiceOver (macOS/iOS) and NVDA (Windows) to confirm the bar is announced correctly
• Smashing Magazine’s sticky-menu UX guidelines recommend keeping sticky elements short and managing focus carefully — the same rules apply to bars

For mobile, the hide-on-scroll-down / reveal-on-scroll-up pattern is the most practical solution. It preserves reading space during active scrolling and brings the bar back when the user pauses or reverses direction. See the responsive design guide for broader mobile layout considerations.

What the research says and the mistakes that hurt performance

The evidence on sticky bars points in one direction: simplicity wins. EaseNotify’s analysis of high-performing announcement bars found that effective copy stays under 10 words and front-loads the payoff. In one cited case, a coupon reminder bar drove a 19.32% conversion uplift — not because the design was elaborate, but because the message was specific and the code was immediately visible.

Common mistakes that reduce performance:

• Multiple competing messages or offers in a single bar
• Burying the payoff (discount, benefit) after filler copy
• Forgetting to enable sticky/fixed positioning — the bar scrolls away and becomes invisible
• Running the same bar sitewide when page-level targeting would triple relevance
• Oversized bars on mobile that cover 20–30% of the screen
• Letting a sale bar run after the sale ends

Agency action tips:

• Prioritize page-level targeting from day one. A free-shipping bar on product pages outperforms the same bar on the homepage because the visitor is already in buying mode.
• Rotate bar copy every 2–4 weeks for returning visitors. Familiarity breeds blindness.
• Measure checkout-start lift, not just clicks. A bar that gets clicked but does not move checkout starts is a design problem, not a traffic problem.
• Combine a persistent bar with a behavior-triggered popup for high-intent moments. The bar maintains visibility; the popup closes the gap.

Pro Tip: Before you run any A/B test on bar design, run one week of baseline data with the bar live and no changes. Dismissal rate above 40% usually signals a copy problem, not a design problem — fix the headline first.

For more on conversion optimization strategies that complement sticky-bar campaigns, the full CRO framework covers testing cadence and prioritization.

Troubleshooting common sticky-bar conflicts

Bar overlaps existing sticky header. The most common issue on sites with a fixed navigation. Fix: set top: [nav height]px on the bar instead of top: 0, or restructure so the bar sits above the nav in the DOM and the nav’s top value accounts for bar height.

Bar covers cookie consent banner. Cookie banners often use high z-index values. Check your consent tool’s z-index (commonly 99999 or higher) and set your bar’s z-index one level below it, or use a stacking context that places the consent banner above the bar in the DOM.

Anchor links land behind the bar. Add scroll-padding-top: [bar height]px to your html selector. Without it, clicking an in-page anchor scrolls the target element under the bar.

Bar disappears on mobile after scroll. Usually a CSS specificity conflict where a theme stylesheet overrides position: fixed. Add !important to the position rule as a temporary fix, then trace the conflicting rule and remove it properly.

Elementor or Wix bar does not stay fixed. Both builders wrap content in containers that can break fixed positioning. In Elementor, set the section’s position to “Fixed” in the Advanced tab and set a high z-index. In Wix, use a Header strip set to “Always show” with sticky behavior enabled in the design panel.

Bar breaks layout on iOS Safari. iOS Safari handles position: fixed differently when the address bar is visible. Use -webkit-overflow-scrolling: touch on the body and test on a real device, not just the simulator. A 1px transparent border on the bar element can also resolve a known iOS rendering bug.

Plugin conflict in WordPress. If two plugins both inject a top bar, they stack and double the height. Disable one, or consolidate bar management into a single plugin. Check for admin-bar conflicts if you are testing while logged in — the WordPress admin bar adds 32px at the top that shifts fixed elements.

Key Takeaways

Sticky bars work when they carry one message, match the page context, and measure downstream conversion rather than raw clicks.

The case for keeping it boring on purpose

Most sticky-bar advice focuses on making bars more eye-catching. Bolder colors, animated timers, pulsing CTAs. The instinct makes sense, but the evidence points the other way.

The bars that consistently move downstream metrics are the ones that feel almost invisible in terms of effort. Short copy. One action. A color that contrasts without screaming. The reason is simple: a bar that demands attention competes with the page. A bar that sits quietly at the edge of awareness and says one clear thing gets acted on when the visitor is ready.

The mistake most teams make is launching a bar and measuring clicks, seeing a decent number, and calling it a win. Clicks are easy. What you actually want to know is whether checkout starts went up on the pages where the bar ran. That number is almost always smaller than the click count, and it is the only one that matters.

One more thing worth saying: the best sticky bar is the one you actually test. Not the one with the cleverest copy or the most sophisticated targeting logic. Ship something simple, measure the right metric, and iterate. A bar that runs for six months unchanged is almost certainly underperforming because returning visitors stop seeing it.

Seo-analytic can handle the setup and testing for you

If you have read this far and your main thought is “I know what I want but I do not have time to build and test it,” that is exactly where Seo-analytic fits in. The team designs sticky bars matched to your specific conversion goal, implements them cleanly across your platform (WordPress, Shopify, Wix, or custom builds), sets up the event tracking so you are measuring checkout starts and not just clicks, and runs structured A/B tests with a clear success metric before scaling.

The difference between a bar that sits there and one that moves revenue is usually targeting and copy, not technology. Seo-analytic’s conversion optimization service covers both, along with the analytics setup that makes results visible. If you need broader site help alongside the bar work, the website building guide is a good starting point for understanding what a full implementation looks like. Reach out to Seo-analytic to get a plan scoped to your site and goals.

Useful sources

• EaseNotify — Website Announcement Bar: Why the #1 Conversion Tool on Your Site Is Probably Broken: The most detailed practitioner breakdown of what makes announcement bars convert, including the short-copy rule, page targeting, and real case examples.
• NN/g — Sticky Headers: 5 Ways to Make Them Better: The authoritative UX source on sticky element sizing, animation timing, and accessibility considerations.
• PulseCRO — Banner Testing and Announcement Bars Best Practices: Practical testing guidance focused on downstream metrics rather than vanity clicks.
• Smashing Magazine — Designing Sticky Menus: UX Guidelines: Covers accessibility risks, focus management, and scroll-padding rules for sticky elements.
• Superpopups — What Is a Sticky Bar Popup and When Should You Use One?: Clear placement guidance on top vs. bottom bars and when each format fits.
• EasyAppsEcom — Shopify Announcement Bar Performance Data and Patterns: Mobile-specific patterns including the hide-on-scroll-down / reveal-on-scroll-up implementation.
• Kiyfi — Sticky Bars vs. Pop-ups: When to Use Each for Conversions: Practical comparison of bars and popups with use-case guidance for combining both formats.
• Seo-analytic — UI Design Strategies for Boosting Engagement: Design principles that apply directly to sticky-bar visual decisions and contrast choices.

FAQ

What is a sticky bar on a website?

A sticky bar is a thin, full-width strip fixed to the top or bottom of the browser viewport that stays visible as the user scrolls, used to display one persistent message such as a promotion, announcement, or email opt-in.

What is an example of a sticky CTA?

A free-shipping threshold bar on a product page that reads “You’re $12 away from free shipping — keep shopping” is a common sticky CTA; it stays visible as the visitor browses and updates dynamically as cart value changes.

When should you use a sticky bar instead of a popup?

Use a sticky bar when the message should be visible at all times without interrupting browsing; use a popup when you want to capture a high-intent moment triggered by a specific behavior like exit intent or scroll depth.

What is the sticky bars strategy?

The sticky bars strategy treats the bar as a single-message, always-on conversion tool targeted to specific pages, paired with behavior-triggered popups for high-intent moments, and measured on downstream metrics like checkout starts rather than clicks.

How do you make a sticky bar accessible?

Add role="region" and aria-label to the bar container, make the close button keyboard-reachable with a descriptive aria-label, and set scroll-padding-top on the html element equal to the bar height so anchor links land correctly below it.

Recommended

• 7 Effective Website Layout Examples for Your Business – seo analytic
• 8 Essential Website Features Every Business Needs – seo analytic
• 7 Powerful Marketing Personalization Examples You Can Use – seo analytic
• 7 Best Blog Post Formats to Boost E-Commerce Engagement – seo analytic