Create an announcement bar on online store

In this article:
Introduction
Installation of Announcement Bar
FAQ that you should know
1. Introduction
Now, you can highlight important messages at the top of your store with a customizable banner and button. Easily set it up to match your brand while ensuring key promotions or announcements don’t go unnoticed. To grab attention, use a full-width banner with a contrasting color. The added button makes it easy for customers to take action instantly. 🚀
2. Installation of Announcement Bar
Step 1: From your EasyStore Admin > Apps > Explore Apps > Search Announcement Bar > click Install this app

Step 2: Choose your animation type & customize appearance settings
Select an animation type:
Slider - Eye-catching sliding updates
Marquee - Smooth scrolling promotions
You can also personalize colors and additional settings as shown in the screenshot below. You can preview how it will appear on your Online Store and see any changes in real-time.

Step 3: Enter your banner message here

You can choose to enable a button and countdown for your banner:
Button – Customize the button text and link to direct customers to a specific page (e.g., collections, new arrivals, promotions).
Countdown – Add a timer to create urgency for limited-time offers and promotions. (You may choose your preferred style)

💡 You may add up to 5 banners
Step 4: Save your changes, and you're all set! 🎉
3. FAQ that you should know
Q1: What should I do if my Announcement Bar is blocking my website’s top bar?
A1: If your Announcement Bar is overlapping with your website's top bar, follow these steps to fix it:
Go to Channels > Online Store > Edit Source > assets > theme.js
Scroll to the bottom of the file and add the following code & save
if($('#announcement-bar-top').length){ $('.header-bar.sticky-topbar').css('top',$('#announcement-bar-top').height() +'px'); }
Q2: Can I create multiple Announcement Bars?
A2: Yes, you can! 😊👌 If you create more than one Announcement Bar, they will be displayed as follows on your website
GIF as reference:

Updated on: 26/02/2025
Thank you!