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

# 【官網設計】如何新增「回到上方」 按鈕（Aroma 與其後發佈之主題）

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

此文章將講解如何在 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)