樣式設定

目錄
一、功能簡介二、操作路徑三、設定類型說明四、文章總覽五、商品群組六、全站設定七、首頁八、頁首及頁尾九、商品賣場十、預覽與儲存十一、常見問題 FAQ

一、功能簡介

樣式設定可以調整官網的視覺風格，包含字體大小、顏色、圓角、背景色等。透過這些設定，您可以在不修改程式碼的情況下，統一調整整站或特定區域的外觀樣式。

樣式設定共分為 6 大分類，左側選單可快速切換至各分類：

文章總覽：文章列表的版面配置、圖片圓角與比例

商品群組：群組頁面的側邊欄、篩選器、排序、標題對齊方式

全站設定：影響整個官網的基礎樣式（字體大小、連結顏色、彈窗圓角等）

首頁：首頁頁首、跑馬燈、標題字等專屬樣式

頁首及頁尾：頁首與頁尾區域的樣式

商品賣場：商品圖片的圓角與寬高比例

二、操作路徑

後台路徑：自訂官網 → 總覽（選擇商店） → 樣式設定

三、設定類型說明

樣式設定中的各項目依據不同的輸入方式，分為以下四種類型：

設定類型 | 輸入方式 | 說明
文字輸入 | 直接輸入數值 | 用於字體大小、圓角、比例等數值設定，需自行輸入數值與單位（如 16px、0.5rem、100%）
顏色選擇 | 色票選擇器 | 用於文字顏色、連結顏色等，點擊色塊即可開啟色票選擇器挑選顏色
背景顏色 | 色票選擇器＋透明選項 | 與顏色選擇類似，但額外提供「透明」勾選框，勾選後背景為透明
下拉選單 | 下拉選擇 | 提供預設選項供選擇，如「覆蓋 / 不覆蓋」、「靠左 / 置中 / 靠右」等

四、文章總覽

文章總覽的設定會影響文章列表頁面的版面與圖片呈現。

設定項目 | 類型 | 說明
左側分類顯示 | 下拉選單 | 「顯示」會呈現「頁面設定 → 文章及頁面 → 分類」中所配置的分類內容
桌機版文章顯示方式 | 下拉選單 | 設定桌機版文章列表的版面：條列式（上下排列）或併排式（圖文左右排列）
文章圖片圓角 | 文字輸入 | 設定數字＋單位（px、rem），數字越大圖片圓角越大
文章圖片寬高比例 | 文字輸入 | 預設為正方形顯示。若圖片希望以長方形顯示，請依據圖片的尺寸設定 100% – 200% 的比例

圖：文章總覽設定項目

圖：文章左側分類顯示示例

圖：桌機版文章條列式排版

圖：桌機版文章併排式排版

圖：文章圖片圓角設定示例

圖：文章圖片寬高比例調整示例

五、商品群組

商品群組的設定會影響商品群組頁面的版面與互動功能。

設定項目 | 類型 | 說明
左側選單顯示 | 下拉選單 | 「顯示」會呈現「自訂官網 → 總覽 → 側邊欄選單」的選單內容
商品篩選 | 下拉選單 | 調整為「顯示」可啟用篩選器
價格區間 | 下拉選單 | 調整為「顯示」可啟用價格篩選器
商品排序 | 下拉選單 | 調整為「顯示」可呈現排序欄位
群組標題對齊方式 | 下拉選單 | 設定群組頁面標題的對齊方式：靠左、置中或靠右

圖：商品群組左側選單顯示效果

圖：商品群組設定選項

六、全站設定

全站設定的項目會影響整個官網的基礎樣式，是最優先建議調整的分類。

設定項目 | 類型 | 預設值 | 說明
商店背景顏色 | 背景顏色 | — | 用以設定官網背景顏色
商店加入購物車按鈕顏色 | 顏色選擇 | #04B6AB | 套用群組、商店、購物車之加入購物車按鈕顏色
商店基本按鈕顏色 | 顏色選擇 | #000000 | 套用預設按鈕顏色
商店按鈕字體大小 | 文字輸入 | 0.875rem | 套用全官網所有按鈕之字體大小，請設定數字＋單位（px、rem、em）
商店按鈕圓角 | 文字輸入 | 5rem | 套用全官網所有按鈕之圓角，請設定數字＋單位（px、rem）
商品頁週期購按鈕顏色 | 顏色選擇 | #000000 | 套用預設按鈕顏色
商店強調色 | 顏色選擇 | #FB4D4D | 官網中用以強調顏色，例如：售價或警示色
商店主色 | 顏色選擇 | #04B6AB | 官網主要色調
商店文字顏色 | 顏色選擇 | #000000 | 用以顯示官網常用內文顏色
商店標題常用文字顏色 | 顏色選擇 | #000000 | 用以顯示官網常用標題顏色
商店字體名稱 | 下拉選單 | — | 設定全官網最優先使用之字體。如果使用者電腦沒有此字體，將以第二、三、後方字體順序顯示
商店說明文字顏色 | 顏色選擇 | #5461SC | 用以顯示官網輔助及說明文字顏色（常用於較小型文字）
商店基礎字體大小 | 文字輸入 | 16px | 設定基礎尺寸加乘計算後全官網字體大小（包含標題、內文、按鈕文字），請設定數字＋單位（px、rem、em）
商店連結滑入顏色 | 顏色選擇 | #000000 | 用以顯示官網常用連結滑鼠滑入顏色
商店連結顏色 | 顏色選擇 | #000000 | 用以顯示官網常用連結顏色
商店彈窗圓角 | 文字輸入 | 0.5rem | 快速加入購物車、建議、資訊訊息、彈窗等之圓角，請設定數字＋單位（px、rem）

小技巧：
基礎字體大小建議設定在 14px～18px 之間，設定過大或過小可能影響版面排版。

七、首頁

首頁分類包含頁首、跑馬燈與標題字等專屬於首頁的樣式設定。

頁首相關設定

設定項目 | 類型 | 預設值 | 說明
首頁頁首覆蓋於內容之上 | 下拉選單 | 覆蓋 | 設定首頁的頁首（Header）是否覆蓋在下方內容之上。選擇「覆蓋」時頁首會變為透明疊加在第一個區塊上方
首頁頁首連結顏色 | 顏色選擇 | #000000 | 首頁頁首中導覽連結的文字顏色
首頁頁首連結滑入顏色 | 顏色選擇 | #000000 | 滑鼠移入首頁頁首導覽連結時的文字顏色
首頁頁首ICON顏色 | 顏色選擇 | #000000 | 首頁頁首中圖示（如購物車、搜尋、會員圖示）的顏色
首頁頁首ICON滑入顏色 | 顏色選擇 | #000000 | 滑鼠移入首頁頁首圖示時的顏色

小技巧：
若將「首頁頁首覆蓋於內容之上」設為「覆蓋」，建議將頁首的連結與 ICON 顏色調整為與第一個區塊背景對比明顯的顏色，確保導覽列清楚可見。

跑馬燈相關設定

設定項目 | 類型 | 預設值 | 說明
跑馬燈背景顏色 | 背景顏色 | 可設為透明 | 跑馬燈區域的背景顏色，可勾選「透明」讓背景不顯示
跑馬燈文字/連結顏色 | 顏色選擇 | #000000 | 跑馬燈中文字與連結的顏色
跑馬燈連結滑入顏色 | 顏色選擇 | #000000 | 滑鼠移入跑馬燈連結時的文字顏色

其他首頁設定

設定項目 | 類型 | 預設值 | 說明
首頁標題字顏色 | 顏色選擇 | #000000 | 首頁中各區塊標題文字的顏色

八、頁首及頁尾

頁首及頁尾的設定用於調整官網頁首（Header）與頁尾（Footer）區域的樣式。具體設定項目依版型而異，請依後台實際顯示的項目進行調整。

設定項目 | 類型 | 預設值 | 說明
商店展開選單背景顏色 | 背景顏色 | 可設為透明 | 展開選單時的背景顏色，可勾選「透明」
商店展開選單連結滑入顏色 | 顏色選擇 | #000000 | 滑鼠移入展開選單連結時的文字顏色
商店展開選單連結顏色 | 顏色選擇 | #000000 | 展開選單中連結的文字顏色
商店頁首背景色 | 背景顏色 | 可設為透明 | 頁首區域的背景顏色，可勾選「透明」
商店頁首連結滑入顏色 | 顏色選擇 | #000000 | 滑鼠移入頁首連結時的文字顏色
商店頁首ICON顏色 | 顏色選擇 | #000000 | 頁首圖示（如購物車、搜尋、會員圖示）的顏色
商店頁首ICON滑入顏色 | 顏色選擇 | #000000 | 滑鼠移入頁首圖示時的顏色
商店頁首連結顏色 | 顏色選擇 | #000000 | 頁首導覽連結的文字顏色
商店(桌機版)頁首LOGO對齊方式 | 下拉選單 | 一排（logo置左） | 桌機版頁首 LOGO 的對齊與排列方式
商店(手機版)頁首LOGO對齊方式 | 下拉選單 | 一排（logo置中） | 手機版頁首 LOGO 的對齊與排列方式
商店頁首置頂效果 | 下拉選單 | 跟隨置頂 | 設定頁首在頁面捲動時的行為
跑馬燈背景顏色 | 背景顏色 | 可設為透明 | 頁首跑馬燈區域的背景顏色，可勾選「透明」
跑馬燈連結滑入顏色 | 顏色選擇 | #000000 | 滑鼠移入跑馬燈連結時的文字顏色
跑馬燈文字/連結顏色 | 顏色選擇 | #000000 | 跑馬燈中文字與連結的顏色
跑馬燈手機版排序 | 下拉選單 | 導覽列下方 | 設定跑馬燈在手機版的顯示位置
選單背景顏色 | 背景顏色 | 可設為透明 | 頁首選單區域的背景顏色，可勾選「透明」
選單字體大小 | 文字輸入 | 0.9375rem | 頁首選單文字的字體大小，請設定數字＋單位（px、rem、em）
商店標題字顏色 | 顏色選擇 | #000000 | 頁首商店標題的文字顏色
商店桌機版標題字體大小 | 文字輸入 | 1.625rem | 桌機版頁首商店標題的字體大小，請設定數字＋單位（px、rem、em）
商店手機版標題字體大小 | 文字輸入 | 1.625rem | 手機版頁首商店標題的字體大小，請設定數字＋單位（px、rem、em）

九、商品賣場

商品賣場的設定會影響商品詳情頁面中商品圖片的呈現方式。

設定項目 | 類型 | 預設值 | 說明
商品圖片圓角 | 文字輸入 | 0rem | 商品圖片的圓角大小。設為 0 表示直角，數值越大圓角越明顯
商品圖片寬高比例 | 文字輸入 | 100% | 商品圖片的寬高比例。100% 為正方形，數值越大圖片越高（偏長方形）

小技巧：
商品圖片寬高比例設為 100% 代表 1:1 正方形顯示。若商品圖片本身為長方形，建議調整此比例以避免圖片被裁切變形。

十、預覽與儲存

完成設定調整後，頁面下方提供兩個操作按鈕：

按鈕 | 說明
預覽 | 開啟新分頁預覽目前設定的樣式效果，不會影響正式官網
更新 | 將目前的設定儲存並套用到正式官網

頁面右上方另有 回到初始值 按鈕，點擊後會將所有設定恢復為系統預設值。

圖：預覽、更新與回到初始值按鈕位置

重要提醒：
點擊「回到初始值」會立即將所有分類的設定恢復為預設值並儲存，此操作無法復原，請謹慎使用。

十一、常見問題 FAQ

Q：修改樣式設定後，需要多久才會生效？

A：點擊「更新」按鈕後即時生效。如果瀏覽器有快取，可能需要重新整理頁面才能看到變更。

Q：設定修改錯了可以恢復嗎？

A：可以點擊「回到初始值」按鈕將所有設定恢復為系統預設值。但請注意，此操作會重置所有分類的設定，且無法只恢復單一項目。

Q：圓角的數值單位要用什麼？

A：可以使用 px（像素）或 rem（相對單位）。例如「8px」表示 8 像素的圓角，「0.5rem」會根據基礎字體大小計算。一般建議使用 px 較直覺。

Q：圖片寬高比例 100% 和 200% 的差別是什麼？

A：100% 表示圖片以正方形（1:1）顯示，200% 表示圖片高度為寬度的兩倍（1:2），呈現長方形。數值越大圖片越偏向直式長方形。

Q：「預覽」和「更新」的差別是什麼？

A：「預覽」會在新分頁中顯示目前設定的效果，但不會影響正式官網，方便您確認調整結果。「更新」則會將設定正式儲存並套用到官網，所有訪客都能看到變更。

Q：為什麼我看不到某些設定分類？

A：樣式設定的分類與項目會依據您使用的版型而有所不同。部分版型可能沒有特定分類的設定項目，這是正常現象。

Q：首頁頁首「覆蓋於內容之上」是什麼效果？

A：設為「覆蓋」時，頁首會以透明方式疊加在首頁第一個區塊的上方，營造全版視覺效果。此時建議調整頁首的連結與圖示顏色，確保在背景圖上清楚可見。設為「不覆蓋」則頁首會獨立佔據一行空間。

Q：跑馬燈背景設為「透明」後看不到文字怎麼辦？

A：跑馬燈背景設為透明後，文字會直接顯示在頁面背景上。請確認「跑馬燈文字/連結顏色」與頁面背景有足夠的對比度，避免文字難以辨識。