Sticky Bars: Examples and How to Create [Guide]

Sticky bars are a highly effective method to increase website 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:

• What is a website bar?

• What you can promote with sticky bars

• Examples of sticky bars on websites

• How to create a sticky bar

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.)

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.

Here's a closer look at the message:

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:

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

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):

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.

The bottom bar is also quite interesting because it launches a popup form that allows to get started with the 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:

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

"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

And a close look at this sticky bar example:

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:

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.

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:

And a close look:

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

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):

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

1. Create a new bar campaign

Once in Wisepops dashboard—

Go to Create campaign:

2. Choose the bar template

Click Bars in the format menu on the left to see templates for sticky bars.

Then, choose this 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:

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).

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:

And—

Like that for the button text:

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:

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:

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:

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.

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.