> ## 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).

# 【擴充功能】Announcement Bar 公告欄


![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/6ygp55so5pa85ywo5pa55qgi_s5fbf1.png)


 

你可以透過這個擴充功能把重要訊息顯示在官網的上方並且還能附加一個按鈕，供客戶點擊了解更多相關資訊。

 




### 步驟一： 安裝 Announcement Bar 公告欄
 

1. 前往 EasyStore 後台 → 安裝擴充  → 更多 → 搜尋 Announcement Bar → 安裝 Announcement Bar

 



![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_4bz8kh.png)

### 步驟二：設定 Announcement Bar 擴充功能

1. 設定外觀顏色


![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1adtjl0.png)

💡  小提示： Announcement Bar 公告欄的背景顏色應該比首頁的背景顏色更突出才能讓顧客察覺到

2. 編輯公告欄的信息，是否啟用按鈕，倒計時等等設定


![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_2ewji0.png)
 

3.  可以新增更多公告欄，只需點擊「添加新公告」即可
*目前最多可以設定 5  個公告欄。


![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_15oqy84.png)

 
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/1_pt61au.gif)

4. 左方為預覽


![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_7jhqc9.png)

步驟三：點擊儲存，完成！

 
---

###### 🔸注意：
如果公告欄覆蓋了你的網站主選單，你可以按照以下步驟操作：
 

**如果使用 Candy 或之前發佈之佈景主題：**
 

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1bb1npr.png)

銷售管道 > 品牌官網 > 佈景主題 > HTML/CSS > theme.js，並將以下代碼添加到文件底部（不要分行） > 儲存

 

if($('#announcement-bar-top').length){ $('.header-bar.sticky-topbar').css('top',$('#announcement-bar-top').height() +'px'); }
 

**如果是使用 Aroma 或更新發佈版之佈景主題：**

 

複製以下代碼 》貼到Theme liquid 原始碼文件裡（大約 172行）

if(document.getElementById('announcementBarTop')) { document.getElementById('announcementBarTop').style.display = 'block'; document.getElementById('easystore-section-header').style.top = document.getElementById('announcementBarTop').offsetHeight + 'px'; }

 
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1p8w56i.png)