【官網設計】如何調整 Live Chat 按鈕位置
若你有使用訊息功能裡的 Live Chat 功能,你可能會遇到需要調整 Live Chat 按鈕位置的情況,這篇文章將教導大家如何調整按鈕位置。
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_12m8260.png)
前往 EasyStore 後台 → 品牌官網 → 佈景主題 → 編輯原始碼 → 找到 base.css 文件
複製以下代碼
粘貼到 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 的數字來調整你要的高度,數字越大表示調得更高
若你想要往左調整,你可把代碼換成以下:
你也可根據你的需求調整 105px 的數字,數字越大表示約往左邊
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_125sctk.png)
與新版主題一樣的步驟和代碼,只是需要在 theme.scss 原始碼文件裡操作
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1w8hk3y.png)
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_12m8260.png)
新版主題(Aroma 或其後發佈之佈景主題)
步驟一:編輯原始碼
前往 EasyStore 後台 → 品牌官網 → 佈景主題 → 編輯原始碼 → 找到 base.css 文件
複製以下代碼
.easystore-chat-button {
bottom: 105px !important;
}
.easystore-widget-window {
bottom: -15px !important;
}
粘貼到 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 或之前發佈之佈景主題)
與新版主題一樣的步驟和代碼,只是需要在 theme.scss 原始碼文件裡操作
![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/image_1w8hk3y.png)
更新時間: 28/11/2023
感謝!