【官網設計】如何新增「回到上方」 按鈕(Aroma 與其後發佈之主題)
有關的文章: 官網設計
此文章將講解如何在 Aroma 與其後發佈之主題裡新增 「回到上方」按鈕
EasyStore 後台 → 銷售管道 → 品牌官網 → 佈景主題 → 編輯原始碼
找到 theme.liquid 文件
複製以下代碼
貼在 theme.liquid 文件 最下方的位置
官網即會呈現「回到上方」按鈕
💡 小提醒:
若你要更換「回到上方」 按鈕的背景顏色,你可在代碼裡找到 background-color: ,然後更換顏色代碼即可
如果要更換「回到上方」 按鈕的圖標顏色,你可到佈景主題設定 → 設定 → 顏色 → 更換 「一般內文字色」
![](https://storage.crisp.chat/users/helpdesk/website/353d5ecbb51c7a00/e0dde539-cff3-4fc9-9f06-a55ba9_ecy8j0.png)
此文章將講解如何在 Aroma 與其後發佈之主題裡新增 「回到上方」按鈕
步驟一:編輯原始碼
EasyStore 後台 → 銷售管道 → 品牌官網 → 佈景主題 → 編輯原始碼
![](https://storage.crisp.chat/users/helpdesk/website/6731835e5249fc00/88649ce1-9470-440a-8f7a-a58705_ak7p3y.png)
找到 theme.liquid 文件
複製以下代碼
#scrollTopButton { position: fixed; right: 0px; bottom: 110px; cursor: pointer; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; z-index: 3; background-color: #9E8137; border-radius: 0px; }
貼在 theme.liquid 文件 最下方的位置
步驟二:點擊儲存,完成!
官網即會呈現「回到上方」按鈕
![](https://storage.crisp.chat/users/helpdesk/website/26c72fcb5b17ec00/043b8381-c6ac-4dc2-9857-9737a8_13zus9p.png)
💡 小提醒:
若你要更換「回到上方」 按鈕的背景顏色,你可在代碼裡找到 background-color: ,然後更換顏色代碼即可
![](https://storage.crisp.chat/users/helpdesk/website/ea1131572677a800/6cd08272-e48a-4a71-90b7-be1e80_i26js8.png)
如果要更換「回到上方」 按鈕的圖標顏色,你可到佈景主題設定 → 設定 → 顏色 → 更換 「一般內文字色」
![](https://storage.crisp.chat/users/helpdesk/website/353d5ecbb51c7a00/e0dde539-cff3-4fc9-9f06-a55ba9_ecy8j0.png)
Updated on: 12/01/2024
感謝!