重點整理
Flatsome 是 UX Themes 開發、專為 WooCommerce 購物網站設計的 WordPress 付費主題，在 ThemeForest 一般授權 US$59（一次付費、含 6 個月支援），累積銷售超過 27 萬套，2026 年 9 月更新到 3.20.11。它的特色是 UX Builder 即時編輯器和完整的商店版型設定。這篇介紹 Flatsome 的特色，並示範安裝後用設定精靈（Setup Wizard）完成註冊、子主題、外掛與範例內容匯入。
用 WooCommerce 開網路商店，最常卡關的是商品頁和商店頁的版面：很多主題的商品頁只能照 WooCommerce 預設樣式顯示，想調整排版就得改程式。Flatsome 主打的就是購物網站，商品列表、商品頁、購物車、快速瀏覽等都能在主題裡直接設定。下面先看 Flatsome 的特色，再走一次安裝後的設定流程。部分截圖拍攝於較早的版本，按鈕文字和現在略有不同。
Flatsome 有哪些特色？
步驟一：在 ThemeForest 找到 Flatsome
Flatsome 在 ThemeForest 銷售。在 Envato Market 選擇主題分類後搜尋「Flatsome」，點進介紹頁即可。
步驟二：用 Live Preview 看範例網站
介紹頁上的 Live Preview 可以打開 Flatsome 的範例網站。在預覽頁可以切換不同風格的商店首頁（Demos），也可以進入商店頁看全寬佈局、列表檢視、商品圖片放大等效果。
步驟三：了解 Flatsome 的主要功能
介紹頁列出的重點功能，整理如下：
- 為購物網站設計的版型：首頁、關於我們、聯絡我們、限時特賣、商品展示等頁面都有現成範例，可以直接匯入再修改。
- UX Builder：Flatsome 自己的頁面編輯器，邊看預覽邊加入元素、調整樣式，修改結果即時顯示。
- 深度整合 WooCommerce：商品頁、商店頁、購物車等都有專屬設定。2026 年的更新紀錄顯示已相容 WordPress 7.0 與 WooCommerce 11.1。
- 圖片延遲載入與響應式圖片：讓圖片依螢幕大小載入適合的尺寸，提升手機上的載入速度。
- 圖片焦點設定：在小螢幕裁切圖片時，可以指定要保留的重點位置，避免商品被裁掉。
安裝 Flatsome 並用設定精靈完成初始設定
步驟一：上傳主題後啟動設定精靈
在 WordPress 後台「外觀 → 佈景主題 → 安裝佈景主題 → 上傳佈景主題」上傳 Flatsome 的主題壓縮檔並啟用，會出現 Flatsome 的歡迎畫面，按下開始（舊版是 Let’s go）進入設定精靈。
步驟二：註冊主題
要啟用正式版與自動更新，必須輸入購買序號（Purchase Code）註冊。序號可以在 ThemeForest 帳號的「Downloads」頁面，從 Flatsome 的下載選單取得授權證書（License certificate & purchase code）。輸入後會顯示註冊成功，再按 Continue 繼續。
步驟三：安裝子主題
設定精靈會詢問是否建立子主題（Child Theme）。強烈建議安裝：之後修改 PHP、新增 CSS 都放在子主題裡，主題更新時才不會被覆蓋。
步驟四：安裝建議外掛
這一步會列出 Flatsome 建議安裝的外掛（例如 WooCommerce），點連結即可安裝。建議全部安裝，避免之後編輯範例版型時缺少功能。
步驟五：匯入範例內容
接著選擇要匯入哪些範例內容。匯入會在網站裡新增大量頁面、商品和選單，已經有內容的網站請先完整備份，可以參考 All-in-One WP Migration 備份教學。
步驟六：設定 Logo 與首頁版型
這一步可以先上傳 Logo，並選擇首頁要套用的範例版型。Flatsome 是一次匯入全部範例頁面，之後想換別的首頁版型，直接改用另一個範例頁即可，不必重設網站重新匯入。
接著是支援範圍說明，同意後繼續。
步驟七：完成設定，前往 WooCommerce 設定或檢視網站
最後一步可以直接進入 WooCommerce 的設定，或點 View your new website 查看網站前台。
下圖是舊版 WooCommerce 的設定精靈。現在 WooCommerce 的初始設定改成在後台「WooCommerce → 首頁」逐項完成商店資訊、商品、付款與運送設定，畫面已和圖中不同。
用 Theme Options 調整網站與商店樣式
完成精靈後，後台側邊選單的 Flatsome 裡點 Theme Options，會打開自訂（Customizer）畫面，在這裡調整頁首、頁尾、顏色、字型等全站樣式，修改會即時顯示在右側預覽。
同一個畫面裡的 Shop（WooCommerce）設定，可以調整商店頁的欄數、商品卡片樣式、商品頁佈局、快速瀏覽等。遇到商品頁或商店頁的版面問題，先到這裡找對應選項。
常見問題
Flatsome 主題多少錢？
Flatsome 在 ThemeForest 的一般授權是 US$59，一次付費，之後版本更新免費，並附 6 個月技術支援（2026 年 10 月價格）。一般授權只能用在一個網站。
Flatsome demo 要怎麼匯入？
主題註冊完成後，在設定精靈的範例內容步驟勾選要匯入的內容即可，Flatsome 會一次匯入全部範例頁面，之後在頁面清單中挑選想用的版型修改。沒有註冊序號就無法使用匯入與自動更新功能。
Flatsome 適合哪些網站？
最適合用 WooCommerce 經營的購物網站，因為商店頁、商品頁、購物車相關的設定都很完整。如果只是一般形象網站，Flatsome 也能用，但它的強項主要發揮在電商。
結語
Flatsome 把購物網站常用的功能（商品快速瀏覽、願望清單整合、商品頁佈局、即時編輯）整合進主題裡，省去另外找外掛和處理相容性的時間。安裝時跟著設定精靈完成註冊、子主題、外掛與範例匯入，再用 Theme Options 與 UX Builder 調整細節，就能很快做出一個完整的 WooCommerce 商店。