> ## 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 公告栏

### 在这篇文章中：

a. 介绍  
b. 安装 Announcement Bar 公告栏

![](https://storage.crisp.chat/users/helpdesk/website/32b8097665d4fc00/d0710636-73ef-4ee5-8917-16dbf7_139w9rz.png)

---

## a. 介绍

有时候您有一些重要讯息或优惠讯息想要传达给您的顾客但不知从何下手。Announcement Bar 公告栏是个容易上手且能任意编辑的扩充功能。现在您可以透过这个扩充功能把重要讯息显示在首页的上方并且还能附加一个按钮，供您的顾客点进去了解更多相关资讯

  
💡 **提示：** Announcement Bar 公告栏的背景颜色应该比首页的背景颜色更突出才能让顾客察觉到

---


## b. 安装 Announcement Bar 公告栏

**步骤 1:** [EasyStore 后台](https://admin.easystore.co/) > 安装扩充 > 更多 > 搜寻 **Announcement Bar**

**步骤 2 :**安装 Announcement Bar

![](https://storage.crisp.chat/users/helpdesk/website/3944f68cd1527e00/481aa006-02e4-4da5-b2ed-7bbaae_17fryi4.png)

**步骤 3 :** 填写 **您要提供的讯息** 并且编辑既有的设定

![](https://storage.crisp.chat/users/helpdesk/website/725a08be8b28bc00/2e7372e6-3984-4287-a6b2-294570_1mspfhp.png)

**步骤 4：** 您可以开启 “ **Enable Button** ” 以填入按钮的文字和按钮的链接

![](https://storage.crisp.chat/users/helpdesk/website/9540ecd066ea1000/f8178a05-30ee-47da-b106-2618a4_277ujr.png)

**📌 提示** ：当顾客点击该按钮时，他们会被重定向到您填入的链接  

**步骤 5 ：**您也可以为公告栏启用倒计时

![](https://storage.crisp.chat/users/helpdesk/website/4a8c4c6ceacc3000/e1496931-6bdf-437f-a2e2-c249e8_1og6wdr.png)

**步骤 6：**您可以在一下预览结果

![](https://storage.crisp.chat/users/helpdesk/website/cbc3201ccfb45000/df3dc495-f9d2-47ad-a602-2b7685_1icyanq.png)

**步骤 7 ：** 储存  

**💡 提示：**如果公告栏覆盖了您的网站 Top Bar，则可以按照以下步骤操作。

销售渠道 > 线上商店 > 布景主题 > HTML/CSS > **theme.js**，并将以下代码添加到文件底部 > 储存

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

---


**额外GIF 参考：**

![](https://storage.crisp.chat/users/helpdesk/website/f4d308bdef209800/a9c53da9-6edb-4777-b1ee-8ce464_eqorrs.png)