Do you have something special offer to announce and look for the best way to inform your readers? It could be frustrating to find the most effective way to communicate information.

But there is a solution: Notification Bars or Announcement Bars.

In this post I want you to learn more about them both, how to set up for your blog, or for your online shops such as Shopify and Woocommerce.

By the end of this post, you will exactly know how to set the notifications up so you could easily inform readers and costumers.

This post contains an affiliate link and if you purchase via my link I will receive a small percentage in commission but at no extra cost to you. Thanks for your support!

Pin this for later:

Learn more about how to create your notifications bars on your blog or online ship at #ecommercetips #bloggingtips #shop


It is a small banner that you can see mostly top of your blog which is helpful when you want to provide your visitor’s information but without getting in the way of your content. I think you have noticed on the blogs you regularly visit yourself. They look like this:

OptinMonster website notification bar

There a few types of campaigns where you can share information with notifications bars, these are the most used one:

  • New promotional offers
  • Urgency promo with count down timer
  • Growing your email list

In this post, we will work the powerful and easy to use OptinMonster to set up your notification bars for your blog and also announcement bars for your Shopify or Woocommerce shops.


Before you create them with OptinMonster make sure you join and create your account. After joining log in to your account.

Then, in the top right-hand side of your dashboard, click Create New Campaign:

Create a new campaign final picture

Now you’ll choose your camping type. For this tutorial, we’re going to select a Floating Bar:

Floating Bar Campaign min

And then you’ll need to choose your template:

Select your template min

OptinMonster has over 50 templates that you can use to save time when creating your website banner alert. Because we have so many options, you’re likely to find one that already matches the look you’re going for.

But if you don’t see a template that you like, that’s ok.

You can simply build your website notification bar from scratch and customize it exactly how you’d like with our blank template, Canvas:

Floating bar canvas template for website notification bars

In this tutorial, we’re going to use a template called Alert:

Alert floating bar templateThe reason to use this template is that it has a bright red color that grabs your visitor’s attention right away.

If you find that you like the template but not the color, that’s ok too. You can change the color to match your professional or personal brand’s particular style.

Now, your website notification bar template is in your OptinMonster editor:

Floating Bar in the Editor

The first thing that you do to your template is to change the position and make it rest at the top of the page. To do that, go click Floating Settings on the left-hand side editor:

Floating Settings

Then click the toggle switch to change the position of the Floating Bar:

Put Floating Bar on the Top of the Page

Now your Floating Bar campaign will be on the top of your editor:

Floating bar at the top of the page

Then we need to change the text of your campaign. With OptinMonster’s easy-to-use campaign editor, this is super simple.

Just click the text that you want to modify, and you’ll be able to change the text in the left-hand side menu:

Change the text of your floating bar campaign

Even though we’re using this website notification bar to communicate service changes to your customers, you still want to use a headline that will grab their attention.

If you do want to change some aspect about your button, you simply need to click the button element in the editor. Then you can modify every part of your button in the left-hand side menu, like the text:

Change Button Text for Floating bar

In the OptinMonster editor, you can customize just about anything for your website notification bar button that you want. You can change the:

  • Width
  • Alignment
  • Color
    And so much more.

Edit Button Options

The default text “Read More” will work for basic service announcement updates. So let’s look at some other things you can change for your website alert message.

In some cases, the bright red background might be too bold for the type of announcement that you want to make. In that case, you can change the background color by simply clicking on the background in your editor:

Change the campaign color

When you click on the color icon (shown above), you can choose a color that better matches your brand and message:

Choose your color from the color palette

Ok, at this point, we’ve seen how you can change your website banner alert’s text, button, and background. But what happens when someone clicks on your call to action?

To change what happens when someone clicks on your call to action, you need to click on the button element in your campaign editor. That will pull up the button editing tools:

Button Editing Tools

Then you’ll need to click on the Action tab in the left-hand side editor menu:

Click Action Button

By default, your call to action button will redirect your visitors to another web page. You’ll want to put the URL of the web page with more information about your service changes in the Redirect URL field:

Insert Redirect URL

And that’s it!

You now have a notification bar to let all of your visitors know about important company-wide announcements and service changes.

Now there’s just one more minor change to help you better target your customers. Head over to the Display Settings at the top of your editor menu:

Click Display Rules in the Top Editor

By default, your campaign will appear to visitors who are on your page for 5 seconds or longer. We suggest changing the Is at least setting to Is immediate:

Change to Is Immediate-min

That’s because, for important service updates like we’re discussing today, you should try to make your Floating Bar campaign embed seamlessly with your site.

Avoiding a popup for information without a value proposition will enhance your user experience (UX).

And there you have it. You have a fully functional Floating Bar website notification bar to give your visitors updates.

All that’s left is to hit Save:

Don't forget to save

And publish your campaign! You now have a fully functional website notification bar at the top of your website.


I’m pretty sure that you as an online shop owner also need something to announce sales and promotions for your products.

That’s why using OptinMonster is also helpful for your shop.

First, see how you can set up for your Shopify store.

Here is a great video to see how you can set up for Shopify:

The set up of the announcement bar for Woocommerce is the same as for the notification bar for your blog but for more information go here.

Join today to OptinMonster and watch your blog traffic and online shop sales explode.