Flatsome 主題教學:架設 WordPress 購物車網站+網路商店

Flatsome 主題教學:架設 WordPress 購物車網站+網路商店

這是一篇完整的「 Flatsome教學 」,帶你客製化購物網站設計。

Flatsome 是知名的 WordPress 購物網站、網路商店主題,長期霸佔 ThemeForest 主題相關領域的第一名。它強化了購物網站可客製化的選項,讓網站主可自由設計線上商店。

該主題和 Woocommerce 有良好的兼容支持,強化了整體商店功能但還是保有良好的網站速度。

對此,我將會用 Flatsome 主題進行教學,帶領大家架設漂亮且完整的 WordPress 網路商店,大綱如下。

準備好了嗎?我們開始吧:)


1. 開始前需準備?

開始架設客製化網路商店之前,可以先參考 如何架設購物網站 入門篇,完成基本的網域申請、主機租用、WordPress+Woocommerce 網站建置。

如果打算使用不同主機,請參考 WordPress 最佳主機,我有推薦幾款優質主機,可以節省你走冤望路的時間。

還有對 WordPress 後台有基本認識,也會幫助學習更順利,可參考 WordPress 後台教學


2. Flatsome WordPress 主題介紹

flatsome 主題推薦:WordPress 購物網站主題
flatsome 主題推薦:WordPress 購物網站主題

Flatsome 是最暢銷的 WooCommerce 購物網站和商業主題,它在 themeforest 主題森林 的電子商務分類上,蟬聯 No.1 許久。

它的主要功能都是為網路開店打造,有多種不同的線上商店、企業形象版型,只需一鍵安裝即可套用。

不論是服飾、運動用品、倒數特賣、服務購買 .. ,讓你自由挑選。

flatsome 主題:多種精美線上開店版型
flatsome 主題:多種精美線上開店版型

UX Builder 它是 Flatsome 的專業頁面編輯器,你無需任何編碼經驗,就可以用拖曳方式,打造出精美的網路開店平台。

它有多種的頁面佈局方式,讓你品牌網站獨一無二。

flatsome 的 UX Builder 專業頁面編輯器
flatsome 的 UX Builder 專業頁面編輯器

Flatsome 還有多功能區塊元素,可讓你的網頁設計天馬行空,出色的組合建置網站。

同步支援手機頁面呈現、優質的主題速度、SEO優化 .. ,這是很正常的事。

flatsome 多功能的區塊元素
flatsome 多功能的區塊元素:僅部分截圖(來自 flatsome 官網)

Flatsome 是打造完美的線上開店平台的最佳幫手,如果想經營電商平台,絕不能錯過它。


3. 購買 Flatsome 主題

這章節會示範,如何在 themeforest 主題森林購買 WordPress 佈景主題,詳細流程請繼續學習。

首先,前往 Flatsome 佈景主題,點擊「 Buy Now 」進行購買流程。

Flatsome教學 :購買 WordPress Flatsome 主題
購買 WordPress Flatsome 主題

使用者資訊需都填寫英文,姓名可到 外交部 查詢,完成後點 Next。

Newspaper WordPress 主題:創建 themeforest 帳號
創建 themeforest 帳號

設定 themeforest 主題森林的帳號+密碼,這是未來要登入的憑據,請妥善保存。

Newspaper WordPress 主題:創建 themeforest 帳號
創建 themeforest 帳號

填入帳單資訊,如果沒有公司可以空白,地址需填入英文,郵遞區號需填國際碼(4 – 9 碼),可用 中華郵政 翻譯查詢,台灣沒有洲所以輸入 Taiwan 就好,完成後點下一步。

Newspaper WordPress 主題:填入帳單明細
填入帳單明細

輸入付款資訊,常用的有信用卡或 PayPal 付款,這裡用信用卡示範,確認金額正確後,點擊按鈕確認付款。

Newspaper WordPress 主題:輸入付款資訊
輸入付款資訊

這樣一來 WordPress 佈景主題就購買完成囉!下一章節,我們會進行主題安裝教學。


4. 安裝 Flatsome 主題+套用預設模板

這章節會示範如何把第三方主題,安裝到 WordPress 網站上,我們開始吧。

主題購買完成後,點擊右上角圖像前往 downloads 頁面。

Newspaper WordPress 主題:登入 themeforest 帳號,和前往 downloads 頁面
登入 themeforest 帳號,和前往 downloads 頁面

在購買清單,會看到剛買的 Flatsome 佈景主題,點擊 Download > Installable WordPress file only,單純下載 WordPress 主題安裝檔。

Flatsome教學 :下載 WordPress 主題安裝檔
下載 WordPress 主題安裝檔

接著,前往並登入 WordPress 後台,到 外觀 > 佈景主題 > 安裝佈景主題 > 上傳佈景主題。

上傳剛下載的 Flatsome WordPress 主題檔案(副檔名是zip),安裝成功後就直接「 啟用 」,或參考 WordPress 主題安裝 有詳細教學。

上傳 Newspaper 主題
上傳 Newspaper 主題

啟用 Flatsome 主題後,系統會自動前往購物站安裝畫面,引導你繼續安裝。我擷取其中幾個步驟做教學,如果沒提到的就持續點下一步即可。

這裡需輸入產品序號,激活網站主題。前往剛下載 Flatsome 主題的地方,下載購買序號文件(PDF檔),複製裡面的 Item Purchase Code,貼至欄位中即可。

Flatsome教學 :輸入產品序號,激活 flatsome
輸入產品序號,激活 flatsome

基本上會建議安裝並使用子主題,因為未來 Flatsome 主題升級時,在上面所做的設定或樣式更改,才不會受到影響。

Flatsome教學 :創造和使用 WordPress 子主題
創造和使用 WordPress 子主題

然後,安裝此主題需具備的 WordPress 外掛,點 Continue 就會自動安裝。

Flatsome教學 :安裝主題相關的必備外掛
安裝主題相關的必備外掛

系統會告訴我們安裝 Demo 相關內容,包括文章、頁面、產品、設定等 .. ,把全部都安裝下來。

然後,可更換網站 Logo 和網站樣板,這邊先建議跟我挑選同款的樣板,方便後續教學。網站 Logo 和網站模板,之後都能再更換。

Flatsome教學 :選擇 logo 和網站樣板
選擇 logo 和網站樣板

Flatsome 購物站安裝成功,可前往 WordPress 網站前台看成果囉。

Flatsome教學 :Flatsome 網路開店平台安裝成功
Flatsome 網路開店平台安裝成功

太棒了。初版的 WordPress 購物網站已經架設成功了。

WordPress 購物車網站,初版架設成功。
WordPress 購物車網站,初版架設成功。

5. 更改 Header(網站頁首)

這章節「 Flatsome教學 」來學習更改網站頁首,把它調成想要的樣式。前往 Flatsome > Theme Options 主題選項,點選 Header。

WordPress 網站頁首修改
WordPress 網站頁首修改

這裡有多個頁首調整選項,像是頁首版型、網頁 Logo、黏性選單、選單樣式等 ..,你可自行點選玩玩看看,因為 Flatsome 有搭配圖示化,應該不會太難理解。以下我列出幾個簡單做介紹。

Flatsome教學 :WordPress 頁首 Header 調整
WordPress 頁首 Header 調整
  • Presets 頁首版面:可設定頁首版面設計,通常改變幅度最明顯。
  • Logo & Site Identity 品牌圖示:設置網站 Logo、圖標,也可調整圖片大小和內距離等。
  • Header Main 主頁首:可設定頁首高度、頁首顏色、導航尺寸、導航高度等 ..。
  • Header Mobile Menu  手機頁首:調整手機頁首高度、佈局、顯示元素等 ..。
  • Sticky Header 黏性選單:選單置頂相關調整,像是頁首高度、Logo內距等。
  • Contact 聯絡資訊:可更改商店的聯絡資訊。
  • Follow Icons 社群連結:設定不同的社群連結,像是 FB、Twitter、IG、Email ..。

這邊修改完成後,網站頁首應該有變化了,接下來我們可以做更多。

Flatsome 主題提供頁首編輯器,只需把想使用的元素功能拖放到功能放置區,畫面就會顯示。也可針對不同裝置放置不同元素。

點擊每個元素功能,畫面就會顯示可調整的項目。網頁設計完成後,記得點 發佈 儲存。

Flatsome教學 :網站頁首,區塊編輯器
網站頁首,區塊編輯器

這樣一來,網站頁首客製化設計就不是問題囉。


6. 更改商品分類&標籤

導入 Flatsome 預設樣板時,系統有幫我們匯入許多資料,裡面包含商品分類、標籤,我們可以把其中一些改成符合個人商店的中文名稱,並把多餘的刪除。

前往 WordPress 商品 > 分類,可新增新的商品分類,或是把現有改成自己要的。

在指定的分類點 編輯快速編輯 都可修改,可拖放排序和從屬關係,分類前面有一橫的代表是子分類。

WordPress 設定商品分類
WordPress 設定商品分類

備註:編輯分類時,「 代碼 」代表分類的網址名稱,會建議填英文。

商品分類修改完成後,我們來更改商品標籤,前往 WordPress 商品 > 標籤,一樣可在這編輯或刪除多餘的標籤。WordPress 標籤沒有從屬關係唷。

WordPress 編輯商品標籤
WordPress 編輯商品標籤

商品分類和標籤都更改完成後,之後再設定商品相關內容時,就比較不會亂掉。


7. 更改商品內容

這章節的「 Flatsome教學 」會示範更改商品內容。

Flatsome 預設有匯入多筆商品資料,可從中挑選修改或是刪除多餘的資料,前往 WordPress 商品 > 所有商品,就會看到多筆商品。

你可以先稍微修改幾筆商品,這樣等等新增或編輯商品頁面會比較真實,等之後教學流程都學完後,再回來編輯其他商品即可。也可以參考 如何架設購物網站

可修改商品標題、商品網址(永久連結)、商品描述。

Flatsome教學 :WordPress 新增或編輯商品內容
WordPress 新增或編輯商品內容

編輯商品類型、商品金額、庫存、運送方式 ..,這部分需搭配 Woocommerce 系統設定(下面章節會教學)會有更多可選擇的項目。

目前先任意填寫即可,主要先讓大家熟悉編輯商品流程。

Woocommerce 購物網站,編輯商品內容
Woocommerce 購物網站,編輯商品內容

然後可編輯商品分類、標籤、商品圖片 .. ,讓商品內容更加豐富,完成後點發佈或更新即可。

Woocommerce 編輯商品分類、標籤、圖片等 ..
Woocommerce 編輯商品分類、標籤、圖片等 ..

前往 WordPress 網路商店前台,剛剛編輯的商品就會呈現在眼前囉。有了 Flatsome 主題一切都變得很容易。

Woocommerce 網路商品內頁
Woocommerce 網路商品內頁

8. UX Builder 頁面編輯器

一個完整的 WordPress 線上購物網站,可能包含一般頁面、商品頁面等 ..,這些頁面可以用 WordPress 預設編輯器或是 Flatsome 自帶的 UX Builder 編輯。

保持 WordPress 登入狀態,前往網站前台任一頁面,點擊上方 Edit with UX Builder 進行編輯。

Flatsome教學 :使用 UX Builder 頁面編輯器
使用 UX Builder 頁面編輯器

UX Builder 簡單介面認識

這邊我用首頁當簡單範例,進入該頁面的 UX Builder 後,這邊做個介面認識。

Flatsome教學 :UX Builder 頁面編輯器
UX Builder 頁面編輯器
  • 結構設定區:當頁的網站結構會在這顯示,點擊齒輪 > Options 或是視覺化區,這裡會出現指定區塊可編輯的項目。底部的 Add elements 按鈕,可新增其他佈局或功能。點擊齒輪 > Delete 可刪除區塊。
  • 視覺化區:所見即所得編輯器,點擊指定區塊左側會出現可編輯項目。滑向指定區塊可能會出現加號,點擊可新增其他佈局或功能。對著指定區塊點右鍵 > Delete 可刪除區塊。
  • 頁面設定:可設定標題、上層項目、特色圖片等 ..,或是前往 WordPress 頁面 > 全部頁面,找到指定頁面也能編輯。
  • 存檔:保存當前紀錄,刷新 WordPress 前台就會有變化。
  • 前進 / 還原:像 Excel 的前進、還原。
  • 裝置切換:可切換不同裝置看顯示的狀況,進行客製化網頁設計。

當滑鼠移到視覺化區塊,會出現該區塊的編輯名稱,點擊名稱在結構設定區會出現可編輯項目,
這是比較快找到編輯項目的方法。

WordPress 前往指定 UX Builder 編輯區塊
WordPress 前往指定 UX Builder 編輯區塊

網站頁面組成邏輯(UX Builder)

UX Builder 頁面佈局邏輯,主要是由這 3 個組成,分別是 Row(行)、Column(欄)、Element(功能),這可組合而成完全客製化頁面,自由調整欄位寬度。

一條 Row 行可以切成多個 Column 欄,每個 Column 欄上面可以放置多個 Element 功能,它們之間大概就是這個邏輯。

現有的元素區塊,滑鼠移至上面會出現組成項目,可點擊前往 Row、Column 進行設定。或是左側的結構設定區,也能直接點擊前往。

Flatsome教學 :UX Builder 頁面編輯器,切換到不同結構
UX Builder 頁面編輯器,切換到不同結構

當然,你也能直接新增 Flatsome 已有的版面配置,有一般佈局、購物功能、內容區塊等..,但它們的運作邏輯也是 Row(行)、Column(欄)、Element(功能),只是 Flatsome 已經幫你區塊功能化了。

Flatsome教學 :UX Builder 頁面編輯器,新增佈局或區塊功能
UX Builder 頁面編輯器,新增佈局或區塊功能

多種網頁元素功能

滑鼠移到視覺化區的功能會出現加號,點擊就可在附近新增功能區塊。或是左側的結構設定區,點擊 Add elements 新增元素,就會在當頁最下方新增功能。

Flatsome 主題,新增元素功能區塊
Flatsome 主題,新增元素功能區塊

除了 Flatsome 自開發的區塊功能,它也把 Woocommerce 購物車相關功能也整合進去,一樣能用來做網頁設計。

Flatsome教學 :Flatsome 新增或編輯多個區塊元素
Flatsome 新增或編輯多個區塊元素

以上就是 UX Builder 頁面編輯器的介面功能瀏覽,方便大家更好進入狀況。也可以參考 WordPress 頁面 有其他教學。


9. 更改文章分類&標籤&內容

有了多個完整頁面,一個完整的網路開店平台,可能也有包含部落格功能,可以讓你寫些網誌加強對顧客的凝聚力。

這章節「 Flatsome教學 」,可更改預設文章分類和標籤,方便等等新增或編輯文章使用。前往 WordPress 文章 > 分類,把現有的分類改名或新增分類,WordPress 分類可設置父子關係。

flatsome教學 :新增或編輯 WordPress 分類
新增或編輯 WordPress 分類

再來,前往 WordPress 文章 > 標籤,可以新增或修改文章標籤。

新增或編輯 WordPress 標籤
新增或編輯 WordPress 標籤

完成文章分類、標籤修改後,我們可以開始編輯文章,會建議使用 WordPress 預設編輯器即可,因為操作會更直覺,也可以參考 WordPress 文章 有相關教學。

前往 WordPress 文章 > 全部文章,可挑現有文章修改,覺得多餘的可以刪除。進入文章後,點左上角可新增不同功能區塊。

WordPress 新增文章內容(左上角是 WordPress 區塊編輯器)
WordPress 新增文章內容(左上角是 WordPress 區塊編輯器)

編輯完成後,可前往 WordPress 前台看一下文章成果囉。


10. 設置網站選單

到這步驟,我們已經學會如何新增 WordPress 商品、頁面、文章等 ..,把這些東西都準備好後,就可以把它放到網站選單裡面。也可以參考 WordPress 選單,有更多教學。

前往 WordPress 外觀 > 選單,這裡可編輯網站選單。預設選單項目沒有商品相關類型,所以需自行勾選導入。點擊右上角的 顯示項目設定,把網站商品、商品分類、商品標籤等 .. 導入。

WordPress 選單類型,新增商品 / 商品分類 / 商品標籤等 .. 選單類型
WordPress 選單類型,新增商品 / 商品分類 / 商品標籤等 .. 選單類型

選擇需編輯的選單,由於剛有勾選商品選單類型,左側會出現相關類型,你可以把單一商品、商品分類、商品標籤等 .. 放入至選單中。選單可拖放排序。

WordPress 編輯網站選單
WordPress 編輯網站選單

設定網站選單的顯示位置,因為 Flatsome 有多個選單位置,由於剛是選擇編輯 Main 主選單,所以顯示位置我們勾選 Main Menu(主選單位置)、Main Menu – Mobile(手機主選單位置)。完成後記得儲存。

WordPress 設定選單出現位置
WordPress 設定選單出現位置

前往 WordPress 前台看一下選單成果,會發現剛編輯的選單已經出現了。手機版也可以確認,應該也正常顯示了。

WordPress 網站選單編輯完成
WordPress 網站選單編輯完成

11. 網站首頁、部落格閱讀設定

Flatsome 預設已經指定好首頁,如果想變更首頁到剛自己指定的頁面,要如何做呢?還有部落格內容列表,要如何顯示在指定頁面?這章節帶你操作。

前往 WordPress 設定 > 閱讀,在靜態首頁選擇你想設定的頁面,不一定要用 Flatsome 預設的,或是修改 Flatsome 預設首頁變成你想要的樣式也可。

文章頁面顯示也是一樣的邏輯。

WordPress 設定閱讀頁面
WordPress 設定閱讀頁面

文章顯示方式建議使用 內容摘要,預防內容顯示過長的問題,完成後儲存即可。如此一來,網站首頁就變成你指定的頁面囉。


12. Woocommerce 基礎建置

Woocommerce 是 WordPress 旗下最知名的網路商店架設外掛,全球下載量已超過 4500 萬。

一開始安裝 Flatsome 購物網站流程,系統會自動協助安裝 Woocommerce 外掛,但這裡需進行 Woocommerce 基礎建置。前往 Woocommerce > 首頁,會自動跳到安裝程序。

安裝過程中,照指示填入訊息即可,有商店地址、產品所屬產業、產品類型等 .. ,先隨意填寫即可,然後不斷按下一步即可。

其中有步驟是詢問產品類型,這邊不要勾選到付費項目。

WordPress Woocommerce 安裝流程,詢問產品類型
WordPress Woocommerce 安裝流程,詢問產品類型

簡單列出商店的業務資訊,這裡會推薦一些 WordPress 外掛,這都不需要安裝未來再裝即可。

WordPress Woocommerce 商品業務訊息
WordPress Woocommerce 商品業務訊息

Woocommerce 會詢問要使用哪種主題,當然是繼續使用 Flatsome 主題,就是我們本文教學用的。

使用 Flatsome 佈景主題
使用 Flatsome 佈景主題

最後 Woocommerce 會建議安裝 Jetpack 外掛,這是一款綜合型的 WordPress 官方外掛,我覺得還不錯用,除非你有更好的替代方案,不然是可以安裝。

完成後,再度前往 Woocommerce 首頁,就會發現網站面板出現許多資訊囉,可以使用所有功能了。

Woocommerce 開店平台架設
Woocommerce 開店平台架設

以上是 Woocommerce 基礎建置步驟,未來 Woocommerce 可能會微幅調整安裝步驟,但也不會有什麼影響,就是照著它的指示安裝即可。


13. Woocommerce 系統設定

完整的線上購物網站,我們需設定好商店地址、銷售地區、是否使用稅金、貨幣選項、商品庫存設定、金流物流等 .. ,才能讓網路商店營運。

雖然剛安裝Woocommerce 開店外掛有基本設定了,但還是有許多不足。我在 架設購物網站 這篇文章,有完整的商店基本設定流程,可幫助你完成。

前往 Woocommerce > 設定,這裡有許多可調整選項。

Woocommerce 購物相關設定
Woocommerce 購物相關設定

順帶一提的是網站金流物流,由於台灣使用者和國外習慣不太相同,建議可以安裝綠界相關的 WordPress 外掛,它有把台灣常用的金物流都整合再一起,當然你可能需到綠界申請相關權限。

網路電商平台:第三方金流串接
網路電商平台:第三方金物流串接

由於綠界開發的 WordPress 外掛不好上手,你可同步安裝 RY WooCommerce Tools,這是台灣某位大大製作,用來優化金物流相關流程。

外掛安裝完成後,可前往WordPress 後台的 Woocommerce > 設定 > RY Tools,開啟金物流模組,然後輸入在綠界申請的憑證(MerchantID、HashKey、HashIV)。

都搞定後,前往 Woocommerce 設定運送方式、付款相關分頁,把想要使用的功能打開即可。最後再到 WordPress 前台跑一次購買流程,看是否順利:)


14. 網頁區塊+小工具設定

WordPress 網頁區塊,通常會有頁首(Header)、主內容(Content)、側邊欄(Sidebar)、F頁尾(Footer),這是最常見的區塊。

WordPress 主要 4 區塊
WordPress 主要 4 區塊

如果大一點的佈景主題,可能還會有頂端欄(Top Bar)、多個側邊欄(Sidebar #1、#2 ..)、多個子頁尾(Footer Column #1、#2 ..)等等。購物網站主題,會有產品側邊欄(Product Sidebar)等 .. 產品頁相關側邊欄可設置小工具。

備註:不同 WordPress 主題的工具欄位命名可能不同。

除了主內容(Content)以外,其他主區塊都能在裡面添加其他功能元素,讓網頁變得更豐富,我這邊進行教學。

前往 WordPress 外觀 > 小工具,Flatsome 主題 提供很多功能, 這邊都能自行運用。

WordPress 小工具設定
WordPress 小工具設定

調整完成後,會發現部分的文章頁面、商品頁面可能會有所變化,可到網站前台測試瀏覽。

這樣就可自由編輯網頁側邊欄、或是網站頁尾,客製化你建立的網站。也可以參考 WordPress 後台教學,有多種教學。

這樣一來,個人或公司購物網站是不是更加美觀了呢:)


到網站頁尾修改的部分了,這邊來示範如何使用 WordPress Flatsome 主題修改網站頁尾。

前往 Flatsome > Theme Options > 點選 Footer,這裡可改動大部分頁尾樣式。

Flatsome主題 :網站側邊欄調整
Flatsome主題 :網站側邊欄調整

下面有列出一些頁尾功能介紹,可點 Edit Footer Widgets 修改小頁尾工具、是否開啟 Footer 頁尾、頁尾欄數 .. ,可自行玩玩看。

Flatsome教學 :頁尾 Footer 內容編輯
Flatsome教學 :頁尾 Footer 內容編輯

還有其他的頁尾設定,修改完成記得按 發佈,網站前台才會顯示唷。


16. 客製化網頁設計

使用 Flatsome 主題,進行網路開店平台客製化佈局,可前往 Flatsome > Theme Options,這裡可改動大部分網頁設計。

Flatsome 主題教學,客製化網頁設計
Flatsome 主題教學,客製化網頁設計

下面的「 Flatsome教學 」我列出一些功能介紹,像是選單、小工具、首頁設定剛都有提到,這裡就不再敘述,更改完記得 發佈 即可。

Flatsome 主題,客製化網頁設計
Flatsome 主題,客製化網頁設計
  • Header 頁首設定:頁首佈局和功能設定,像是佈局版型、Logo、選單樣式 .. 。
  • Style 樣式&配色:整站的網站配色,字體樣式 .. 。
  • Blog 部落格設定:部落格相關頁面調整,像是版型調整、是否顯示社群、顯示作者 .. 。
  • Block Settings 全局標題設定:主要是更改標題顯示樣式,其他看不懂可以不用動。
  • Woocommerce 電商頁面設定:電商相關調整,像是產品頁面調整、會員帳戶、付款圖示、結帳流程設定、商品圖片大小 .. 。
  • Layout 全站佈局:調整全站的佈局模式、內容呈現寬度等 ..。
  • Footer 頁尾設定:可編輯頁尾小工具、頁尾欄位數、頁尾版權等 ..。
  • Share 社群媒體:社群按鈕設定。

以上就是 Flatsome 的 Theme Options 客製化介紹,到此整個 Flatsome 主要功能講的都差不多了,希望有幫助到你。

相信上面這些教學,應該足夠你完成個人或公司網路開店平台(自架購物網站),如果還想知道些什麼,歡迎在下方留言給我,我會再補充。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,你可以在下方留言給我,我會盡力協助解答。

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

當然,如果怕問題描述不清楚,可以加入 WordPress 教學時光屋 – 小犬網站 ,我同步也會在社團中幫忙。

小犬網站:wordpress教學社團
小犬網站:wordpress教學社團

希望這對你有所幫助,祝架站順利啦。

發表迴響

Scroll to Top