Create an announcement bar on online store
In this article:
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)
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!