【官網設計】如何新增「回到上方」 按鈕(Aroma 與其後發佈之主題)
有關的文章: 官網設計
此文章將講解如何在 Aroma 與其後發佈之主題裡新增 「回到上方」按鈕
EasyStore 後台 → 銷售管道 → 品牌官網 → 佈景主題 → 編輯原始碼
找到 theme.liquid 文件
複製以下代碼
貼在 theme.liquid 文件 最下方的位置
官網即會呈現「回到上方」按鈕
💡 小提醒:
若你要更換「回到上方」 按鈕的背景顏色,你可在代碼裡找到 background-color: ,然後更換顏色代碼即可
如果要更換「回到上方」 按鈕的圖標顏色,你可到佈景主題設定 → 設定 → 顏色 → 更換 「一般內文字色」

此文章將講解如何在 Aroma 與其後發佈之主題裡新增 「回到上方」按鈕
步驟一:編輯原始碼
EasyStore 後台 → 銷售管道 → 品牌官網 → 佈景主題 → 編輯原始碼

找到 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 文件 最下方的位置
步驟二:點擊儲存,完成!
官網即會呈現「回到上方」按鈕

💡 小提醒:
若你要更換「回到上方」 按鈕的背景顏色,你可在代碼裡找到 background-color: ,然後更換顏色代碼即可

如果要更換「回到上方」 按鈕的圖標顏色,你可到佈景主題設定 → 設定 → 顏色 → 更換 「一般內文字色」

Updated on: 12/01/2024
感謝!