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

# 【官網設計】如何調整 Live Chat 按鈕位置

若你有使用訊息功能裡的 Live Chat 功能，你可能會遇到需要調整 Live Chat 按鈕位置的情況，這篇文章將教導大家如何調整按鈕位置。

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

# 新版主題（Aroma 或其後發佈之佈景主題）

### 步驟一：編輯原始碼

1. 前往 EasyStore 後台 → 品牌官網 → 佈景主題 → 編輯原始碼 → 找到 `base.css` 文件

2. 複製以下代碼
```
.easystore-chat-button {
	bottom: 105px !important;
}

.easystore-widget-window {
	bottom: -15px !important;
}
```

3. 粘貼到 `base.css` 文件的最下方

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

### 步驟二：點擊儲存，完成！

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1l5fftz.png)
---
###### 小提醒：

* 你可根據你的需求調整代碼裡 105px 的數字來調整你要的高度，數字越大表示調得更高

* 若你想要往左調整，你可把代碼換成以下：

```
.easystore-chat-button {
	right: 105px !important;
}

..easystore-widget-window {
	right: -46px !important;
}
```

你也可根據你的需求調整 105px 的數字，數字越大表示約往左邊

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_125sctk.png)
---
# 舊版主題（Candy 或之前發佈之佈景主題）

1. 與新版主題一樣的步驟和代碼，只是需要在 `theme.scss` 原始碼文件裡操作

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