Website Notification Bar Generator

We’re live on ProductHunt right now! Support us and get your exclusive LIFETIME DISCOUNT!
Text
Banner URL
Text color
Text size
Background color
Height
We’re live on ProductHunt right now! Support us and get your exclusive LIFETIME DISCOUNT!

Generate a custom website announcement bar for your website

A free tool for making a website alert bannerr with your preferred design

Customize the bar

Add the text, modify the color, size, background color, and height

Get the code

Hit the "Get the code" button to copy the code to your clipboard

Add on your site

Add the announcement bar code to your site

FAQ

Yes, you can easily create a WordPress notification bar as well. Just follow the instructions below to add the code to your WordPress site.

Yes, if you follow the steps below, you’ll be able to add the alert banner to your Shopify store in a few quick steps.

If you need a Squarespace notification bar, that will work the same as for any other site.

Yes, you need to add the notification banner code to the header or footer area of your Wix site.

Yes, just paste the code in the header or footer area of your WooCommerce store.

This website is built on Softr

Join 500,000+ companies and creators already using Softr.

Want to create yours?

About Announcement Bar Generator

The announcement bars are used to display a custom message at the top of your website (usually the home page). It is a great way to notify your visitors/customers about a sale, promotion, maintenance, a change in business hours or service, or just any important update.


ο»ΏWith our free tool, you can quickly create such a notification bar for your website, styling it as you wish. We’ve included a number of customization options to allow you to adjust the banner layout as needed in accordance with your branding and site design. Below you can find some common use cases for the alert banner generator.

Use Case: Shopify Announcement Bar


Let's see how you can add your custom announcement bar to your Shopify store. As soon as you've customized the banner, just click the "Get the code" button to save the code to your clipboard. Now let's see how you can add the announcement bar code to your Shopify store.


In your Shopify store admin panel, navigate to Online Store => Themes and select Edit Code under your theme's Actions.


editing shopify theme code

Next, locate the Header file and add the code anywhere inside the Header as shown in the image below.

locating shopify theme header file

That's it, now, after saving all the changes, you should see the announcement bar appear at the top of your Shopify store.

notification bar added on shopify store

Use Case: WordPress Notification Bar

Another common use case is adding the notification bar to a WordPress site. After customizing the banner, click the Get the code button to save the code to your clipboard.


Now let's add the code to our WordPress site. There are several ways of doing that: manually, through theme's built-in header/footer code feature, using a plugin. You can find out more about the different ways of adding the code in this article, but for our case, we are going to add the notification bar code manually into the header (adding it to the footer would work as well) of our WordPress site . To do that, inside the WordPress admin panel, we need to navigate to Appearance => Editor and locate the header file.

locating the header file of the wordpress site

Further on, we are going to insert the notification bar code anywhere before the closing </head> tag as shown in the image below.

adding notification bar code to wordpress header

And we're done. As soon as we save the changes, the banner should start appearing at the top of our WordPress site.

Other Free Tools By Softr

JavaScript Scroll to Top Button Generator

A free tool for generating a custom Back to Top button for your website

SVG Shape Generator

A free design tool to create colorful, random, unique, and organic-looking SVG shapes.

SVG Wave Generator

A free design tool to create colorful, multilayer, random, unique, and organic-looking SVG waves.

Client Portal | Internal Tools | Web App Builder | Free Website Builder Made with Softr