> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Create an announcement bar on online store

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2025-02-26-at-12570_1rcf0zz.png)
###### In this article:
1. [Introduction](#2-1-introduction)
2. [Installation of Announcement Bar](#2-2-installation-of-announcement-bar)
3. [FAQ that you should know](#2-3-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

${youtube}[How To Set Up Announcement Bar](K4u_zTuRMoY)

**Step 1**: From your [EasyStore Admin](https://admin.easystore.co) > Apps > Explore Apps > Search **Announcement Bar >** click Install this app 

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2025-02-26-at-10227_eivys6.png)

**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.

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2025-02-26-at-11758_1yjzkyr.png) 
**Step 3**: Enter your **banner message** here

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2025-02-26-at-24256_1d7ck68.png)
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)

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2025-02-26-at-24847_1vji3a9.png)
|| 💡 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:

1. Go to **Channels > Online Store > Edit Source > assets > theme.js**  

2. 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:

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/1440-x-705px-gif-35_xt8okj.gif)