樣式設定

一、功能簡介

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

樣式設定共分為 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）

七、首頁

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

頁首相關設定

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

跑馬燈相關設定

設定項目	類型	預設值	說明
跑馬燈背景顏色	背景顏色	可設為透明	跑馬燈區域的背景顏色，可勾選「透明」讓背景不顯示
跑馬燈文字/連結顏色	顏色選擇	#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% 為正方形，數值越大圖片越高（偏長方形）

十、預覽與儲存

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

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

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

十一、常見問題 FAQ