Wisepops logo
cover7

Last updated Wed Feb 21 2024

Sticky Bars: Examples and How to Create [Guide]

Sticky bars are a highly effective method to increase conversions.

That's why we see them on so many websites these days.

In this guide, we'll find out more about sticky bars, why they're effective, and see examples and best practices for using bars on your website.

Click to go to sections:

Add a sticky bar to your website. Use pre-made templates. Increase your conversions
Get website bars ➡️
bar on website template

What is a sticky bar?

A sticky bar is a fixed horizontal bar that appears at the top or bottom of a website, often even if the visitor scrolls down. Sticky bars are effective tools to point visitors' attention to a call-to-action (CTA), drive them to a specific page, or share a marketing message.

Sticky bars increase the discoverability of content and marketing offers while keeping the website more organized. That's why online businesses often share messages through sticky bars to keep their website (especially the homepage) cleaner.

What you can promote with sticky bars

Sticky website bars are an effective way to promote pretty much any marketing message. But here are the most common messages businesses share with bars:

  • Discount codes

  • Free shipping promos

  • Flash sales announcements

  • New product announcements

  • Updates like shipping delays

  • Buttons with links to new products and collections

  • Links to a dedicated newsletter signup page

  • Links to a loyalty program signup page

  • Links to the latest brand news update (a collab, a community project, etc.)

  • A free trial offer or an app demo sign-up (SaaS)

  • Links to a lead magnet or a document (report, video, podcast, etc.)

Here are 18 discount and coupon code ideas to try for your bar campaigns and get more conversions

Sticky bar examples

Here are examples of sticky bars from ecommerce and SaaS businesses:

  • A "free shipping" promo bar (Black Ember)

  • A discount announcement bar with a code applicator (Charlotte Bio)

  • A dual banner with loyalty program signup and a promo (Soko Glam)

  • A software demo signup sticky bar (Mailmodo)

  • A special offer bar with a countdown timer (Fashion Nova)

  • An announcement bar on a mobile website (Blume)

  • A lead generation banner with signup fields (Recess)

A free shipping promotion bar (Black Ember)

Black Ember has a dark website bar promoting a free shipping offer for orders over $149. This sticky bar example catches our eye thanks to the contrasting color, which allows to promote the offer effectively and encourages customers to buy more to get free shipping.

sticky bar example 6

Here's a closer look at the message:

sticky bar example 7
logo

“Our first priority is to provide our community with a positive, engaging, and easy-to-use UX. We have found Wisepops to perfectly complement the design and functionality of our website.”

Black Ember

Learn how Black Ember engaged 4k visitors with only a few onsite campaigns.

A discount announcement bar with a code applicator (Charlotte Bio)

This is an awesome example of how website sticky bars can help businesses get more sales on Shopify. Charlotte Bio, a Shopify cosmetics store, used a bar in combination with discount popups to announce the sale and share the discount code with website visitors.

The popup appeared first (see below) and the bar was visible only to those who closed the popup without applying the code:

bar example

Let's take a close look at the bar.

The website bar contained a few elements:

  • a flash sale announcement

  • a discount code

  • a button to apply the discount to the cart

  • a countdown until the end of the sale

website sticky bar
marilou bertrand

“We added the bar with the countdown to reinforce the sense of urgency for those who did not apply the code in the popup, which was key to success.”

Marilou Bertrand, Director of Digital Marketing, Charlotte Bio

What Marilou meant by "success" was that 236 visitors applied the code through the bar (which, by the way, was 99 clicks more compared to the popup):

website bar performance

Learn more details about this successful campaign:

A dual banner with loyalty program signup and a promo (Soko Glam)

Soko Glam, a leader in Korean beauty products, has dual sticky bars (on the top and the bottom) to promote their marketing messages.

The top bar, designed in a subtle, understated color scheme, promotes a special offer in which visitors are encouraged to book a consultation with a skincare expert to get a discount code.

The bottom sticky bar has the same design and offers 200 points for signing up for Soko Rewards, the brand's customer loyalty program.

sticky bar example 5

The bottom bar is also quite interesting because it launches a popup form that allows to get started with the loyalty program:

sticky bar for loyalty program

A software demo signup sticky bar (Mailmodo)

MailModo, an email marketing app, uses a sticky bar to encourage sign-ups for a free 30-day trial, keeping the compelling offer visible while visitors scroll. This sticky bar example is also located at the bottom of the website.

Having the two buttons in the bar is also great and allows to drive visitors directly to the demo and signup landing pages:

wisepops bar example

Here's a close look at this sticky bar example:

sticky bar example 1

MailModo created this bar with Wisepops, an onsite marketing platform. See how businesses use Wisepops to convert visitors.

"A special offer" bar with a countdown timer (Fashion Nova)

This sticky bar is another great example of how bars can help ecommerce stores drive a sense of urgency and sell.

Fashion Nova, a popular fashion store, promotes a limited-time offer (free one-day shipping) with a sticky bar. The campaign, designed with a contrasting black background, is hard to miss.

The campaign (see below) contains:

  • an announcement of the offer (in all caps)

  • a countdown timer (animated)

  • a button with a link to New Arrivals

sticky bar example 3

And a close look at this sticky bar example:

sticky bar example 2

Another thing is that Fashion Nova runs a few versions of this campaign at the same time.

For instance, I've seen this variation as well:

fashionnova website bar

An announcement bar on a mobile website (Blume)

Blume, a self-care brand, promotes a special offer, free shipping, with this bar at the top of its website. As you can see, it's a mobile-friendly sticky bar example, as it's perfectly readable on a small mobile screen. The Blume's bar shows us that sticky bars work perfectly on mobile versions of websites.

mobile sticky website bar example
Blume converts 5% of its visitors with popup campaigns:

A lead generation banner with signup fields (Recess)

You can also generate leads with sticky bars. It's done by adding signup fields, a button, and an additional bar window to confirm a successful subscription.

That's exactly what Recess has: this colorful sticky bar example helps the brand collect the names of potential customers and their emails:

sticky bar example

And a close look:

sticky website banner example

When a visitor signs up, they see the second bar window with a confirmation and a call to get the discount in their inbox:

sticky bar example confirmation

See how successful websites convert visitors: 50+ website popup examples

How to make a sticky bar

Follow these steps to make a sticky bar for your website:

  1. Create a new bar campaign

  2. Choose a sticky bar template

  3. Customize the template

  4. Add the link to the button

  5. Publish your campaign

In this tutorial, we're going to make this beautiful dark sticky bar that announces a new product collection (but you'll be able to customize it, of course):

sticky bar template

If you prefer video, check out this tutorial below. The textual step-by-step instructions begin right below the video.

To start, we need a reliable app.

We're going to use Wisepops— a popular platform for creating pop-ups, sticky bars, forms, and more.

Unlimited free trial, no cc needed

trustpilot

"We have been using Wisepops for months and the results have been fantastic. Wisepops is easy to implement and makes designing pop ups, bars and embeds simple. You can also effortlessly monitor displays, clicks, CTR etc. We have used this system to drive our newsletter sign ups and sales..."

Adam, a review from Trustpilot

1. Create a new bar campaign

Once in Wisepops dashboard—

Go to Create campaign > Campaign Assistant > Drive sales > Announcement:

creating a sticky bar

2. Choose the bar template

Click Bars in the format menu at the top of the page to see templates for sticky bars. Then, choose the template you'll see:

choosing sticky bar template

3. Customize the bar template

We will customize the design of this sticky bar template now—so you'll know how to change everything to match your website's style.

Let's begin with the text—

To change it, just click the text. The formatting menu will appear directly above to help you make sure the font and the size and perfect:

customizing sticky bars

Next—

Let's change the colors.

Click the body of the campaign and go to Background to change the color to black to make our sticky banner more contrasting with the rest of the website.

Note: you can also add an image as a background (look for Background image in Design > Style).

background bar color

Then—

We need to make sure that the texts we have remain visible.

Make sure the text color settings look like this for the main text:

website bar customization

And—

Like that for the button text:

website bar customization colors font

Note:

Choose the colors that look natural on your website—we want the bar to stand out and look in line with your design.

Let's see how to place our bar on your website.

We will leave it at the top (which is the most common position for website bars), but if you'd like to change it, go to Design > Position. All the settings you need are there:

top bottom position website sticky bar

More great tips on how to make your sticky bar match your website's design:

4. Add the link to the button

We will drive our visitors to the page with the new collection, so let's add the link to that page to the Shop Now button.

Click the button to see the customization menu and add the link:

customization sticky bar

At this point—

Your sticky website bar is good to go! Good job!

Take a look at it one more time by clicking Preview in the top right corner of the screen!

If you're happy with the design, hit Save and Done editing:

save wisepops bar campaign

5. Publish the campaign

Time to start displaying the awesome sticky bar you've made on your website.

To add it to your website, go to Settings > Install.

There, you'll get the code snippet to connect Wisepops to your website. It's super lightweight and free.

More details on the installation here.

installing popup app

Make sure to track the performance of your sticky bar by using Wisepops analytics.

A/B testing is also available to help improve the performance by learning more about how your visitors interact with your campaigns: A/B testing guide.

Summary

By using Sticky Bars strategically on your website, you can provide visitors with a clear and prominent focal point that draws their attention to a specific CTA.

While there are several ways to do this effectively, it's important to choose a single, specific action that you want visitors to take and make it highly visible within the Sticky Bar. By following these best practices and adding sticky bars to your website, you can increase your conversion rates.

Oleksii Kovalenko

Oleksii Kovalenko is a digital marketing expert and a writer with a degree in international marketing. He has seven years of experience helping ecommerce store owners promote their businesses.

Related articles

strategies

2/19/2024

Get effective customer retention strategies with examples from real businesses in this guide.

ecommerce CS

12/20/2023

Check out these ecommerce case studies with examples of successful marketing and sales strategies.

Help