> ## 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 按鈕位置新版主題（Aroma 或其後發佈之佈景主題）舊版主題（Candy 或之前發佈之佈景主題）

有關的文章： [官網設計](/zh-tw/category/5a6y57ay6kit6kii-1kvbh2w/)

若你有使用訊息功能裡的 Live Chat 功能，你可能會遇到需要調整 Live Chat 按鈕位置的情況，這篇文章將教導大家如何調整按鈕位置。  
  
  
![](https://storage.crisp.chat/users/helpdesk/website/9c6b18ae4d3b8800/c263f976-1585-4960-a94b-4329a2_1kp7i6o.png)  
  
  
  
  
  
  

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

  
  
*   前往 EasyStore 後台 → 品牌官網 → 佈景主題 → 編輯原始碼 → 找到 ` base.css` 文件
  
  
*   複製以下代碼
  

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

  
  
*   粘貼到 ` base.css` 文件的最下方
  
  
  
  
![](https://storage.crisp.chat/users/helpdesk/website/69d0c67a0537e400/0682a5ec-de8f-49e3-aa40-483ec0_ip37po.png)  
  

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

  
  
  
![](https://storage.crisp.chat/users/helpdesk/website/4a84b6b744b76400/48022b83-fbd8-4a3c-bb32-21267e_1qm1v75.png)  
  

###### 小提醒：

  
  
*   你可根據你的需求調整代碼裡 105px 的數字來調整你要的高度，數字越大表示調得更高
  
  
*   若你想要往左調整，你可把代碼換成以下：
  
  

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

  
  
你也可根據你的需求調整 105px 的數字，數字越大表示約往左邊  
  
![](https://storage.crisp.chat/users/helpdesk/website/81668628f9db9000/09bd4f06-8a83-4df3-a432-5a1856_m1u97l.png)  
  
  
  
*   與新版主題一樣的步驟和代碼，只是需要在 ` theme.scss` 原始碼文件裡操作
  
  
![](https://storage.crisp.chat/users/helpdesk/website/8137c8cb5294c000/87a5e20b-bc74-408a-b327-70f8de_1joo6bb.png)

更新時間： 28/11/2023