Shopify Announcement Bar Templates, Examples & Inspiration

What are announcement bars or sticky bars?

An announcement bar is a short snippet of text shown at the top of your Shopify store. They’re usually used to tell visitors about a promotion, new stock alert, or a specific product you’ve got on sale. 

(They’re also known as sticky bars because they “stick” to the top of the page. The announcement follows them as they scroll.)

Your sticky bar can have various goals; it depends on the message. For example: you might be offering free shipping for new customers. In that case, your goal would be boosting the conversion rate of your first-time visitors.

The good news? It’s easy to create an announcement bar in Shopify. You don’t need a professional web designer to do it.

Before we dive in with the tutorial on how you can add a Shopify announcement bar, let’s take a look at the ecommerce stores already using one. 

1. Kylie Cosmetics' Shopify announcement bar

The first example is Kylie Cosmetics—one of the biggest beauty brands powered by the Shopify platform.

They’re using an announcement bar to tell customers what they’re doing during a crisis—important information their ideal shopper would want to know:

2. Tattly's shipping notice announcement bar

If you can’t do something, or your usual processes are thrown off for a situation outside of your control, don’t shy away from it. Your announcement bar is the best place to share it—like this example from Tattly, who tell customers their shipping times are longer than usual.

They also show appreciation for their customers through their sticky bar:

3. Sculpt Activewear's free shipping bar

Research shows that 26% of shoppers have abandoned their carts due to slow shipping. You can use an announcement bar to show this information before people add items to their online cart. 

‍Sculpt Activewear, for example, use their Shopify announcement bar to alleviate this problem for their customers. Their sticky bar promotes the fact they offer free delivery for orders over £25:

4. Brilliant's product launch sticky bar

You can use a Shopify sticky bar to announce new product launches. It’s ideal if you have lots of customers arriving on other category pages or blog content. They might not always see the feature image on your homepage.

Here’s a great example of it in-action from Brilliant:

5. Luxy Hair's discount announcement bar

A small percentage of first-time visitors to your website will be ready to buy. But that’s not to say you need to lose them altogether.

‍Luxy Hair uses their announcement bar to entice new visitors into purchasing a product. They’re offering a $15 discount for new customers:

6. Biko's brand mission announcement bar

Do you have a brand mission that you want to tell new customers about? It’s a great selling point—especially if it’s a unique mission. An announcement bar is the perfect way to show first-time visitors what you believe in.

Here’s what that looks like for Biko:

How to add an announcement bar to Shopify

Ready to add a sticky announcement bar to your Shopify site?

First, you'll want to import this free sticky bar template into your free ConvertFlow account. Just click on the template below to register your free account and then you'll be able to customize it.

On the next screen, you’ll see an editor. This is where you can customize your sticky bar, editing the text, colors, buttons, and size of each announcement.

What should I put on my Shopify announcement bar?

There’s no doubt that a Shopify announcement bar is one of the best ways to get messages out to your website visitors (without annoying them.)

But what should you include in your sticky bar? Here are some ideas of things to shout about in your announcement message:

• Flash sales
• Discount codes
• Requirements for free shipping (e.g. spend over $100 or order before 5pm)
• Important announcements
• New product launches
• Job openings

Remember: Your Shopify sticky bar is your chance to get quick messages across to people browsing your Shopify store. Whether that’s a sale, promotion, or launch notification, it’s a superb way to engage your potential customers… Even if they’re not ready to buy yet.

How to add an announcement bar to the top of your Shopify homepage

Once you’ve added the text for your sticky bar, you’ll need to apply specific settings to make sure the announcement bar shows at the right time, and in the right place on the page. 

You can customize when the announcement bar shows, too. Should the message appear when they show an intent to exit? Or scroll to a certain point? 

Think about what person you want to show the Shopify announcement bar to. You can customize this inside your launch settings.

At this stage, you can set rules for your announcement bar—including which page it is (and isn’t) shown on, and which contacts and customers see your sticky bar.

For example: you can choose to show the sticky bar to people tagged as a “Customer” in your Klaviyo account.

If all looks good, hit “Launch.”

Next, you’ll need to install ConvertFlow in your Shopify account. Grab the code from your ConvertFlow account.

Then, head to Shopify > Online Store > Themes > Edit HTML/CSS > Layout > theme.liquid. Paste your code between the <head> tags.

ConvertFlow has plenty of Shopify announcement bar templates to choose from. They're all fully customizable and can be launched super quickly—without touching any code 🙌

Here's a few favorites to get you started: