SHOPLINE SHOP Builder 支援編輯店面級別的相關設定！店家可以自訂網店各區塊的顏色、字體以及商品列表的顯示方式等，從自訂全站色彩與字體，到優化手機版選單、商品列表的視覺動線，讓您在展現品牌風格的同時，也為顧客帶來更順暢的購物體驗。
本文將介紹：
開始前請注意：
- SHOP Builder 目前僅支援 Ultra Chic、Kingsman、Varm、Philia 版型使用。
- 使用 SHOP Builder 建立分頁後，若切換其他店面版型，該分頁仍然可以顯示，但無法編輯且可能發生跑版情形，在確認發佈分頁前請多加留意。
- 店面級別設定的調整會影響整間商店的所有頁面，並非特定分頁。
一、常見問題
Q1：SHOP Builder 有什麼用途？
A：透過 SHOP Builder，您可以統一設所有「進階分頁」的色彩、文字及商品呈現方式。只需設定一次，就能確保整間店面的風格維持一致，而不必逐一修改各個分頁。
Q2：哪些商店版型支援 SHOP Builder？
A：目前支援 Ultra Chic、Kingsman、Varm 及 Philia 四款版型。
Q3：如何確認商店目前使用的版型？
A：請至「SHOPLINE 後台 > 網店設計 > 設計」查看目前套用的版型。
Q4：「店面級別設定」會套用到哪些分頁？
A：店面級別設定會套用至網店所有頁面。
Q5：如果切換到不支援 SHOP Builder 的版型，原本設定好的樣式會不見嗎？
A：是的，商店前台會套用新版型的預設樣式，且無法再開啟 SHOP Builder。若再次切換回支援 SHOP Builder 的版型，亦將套用該版型的預設樣式，不會恢復您先前的設定。詳情請參考三、選擇／切換商店版型。
Q6：SHOP Builder 可以調整哪些設定？
A：包含色彩、文字、手機顯示、商品列表等。詳情請參考四、調整店面級別設定。
Q7：發佈前，如何預覽變更效果？
A：點按左側欄下方的「儲存」按鈕，即可於右側視窗預覽變更；確認無誤後，點按「預覽商店」及「發佈」，即可套用設定。詳情請參考五、預覽及發佈頁面。
二、前往「店面級別設定」
前往「SHOPLINE 後台 > 網店設計 > 網店分頁 」，點按「新增分頁 > 進階分頁」按鈕，或「編輯」現有進階分頁。
點按左側欄的「店面級別設定」按鈕。
三、選擇／切換商店版型
左側欄往下拉可看到目前選擇的主題。若想更換主題，請點按「前往設計」按鈕。
您將被導回後台的「網店設計 > 設計」頁面，在這裡可以選擇想使用的主題。
切換新主題可能會有以下兩種情況：
1. 若新主題支援 SHOP Builder
- SHOP Builder 中，字體、顏色等既有數值維持不變。
- 前台店面套用新主題，既有設定也維持不變。
- 目前支援 SHOP Builder 的主題為 Kingsman、Ultra Chic、Varm 及 Philia，未來將陸續開放更多主題支援 SHOP Builder。
2. 若新主題不支援 SHOP Builder
- SHOP Builder 中，字體、顏色等既有數值維持不變，但此時無法再進入 SHOP Builder。
- 前台店面套用新主題，各設定回復預設值。
- 若又切換回原本的主題，您原先於 SHOP Builder 儲存的既有設定將清空，回復預設值。
注意：若已經使用 SHOP Builder，建議您維持使用支援 SHOP Builder 的主題，以免失去已經設定完畢的各項數值。
套用新主題後，請再依照「二、前往「店面級別設定」的步驟回到 SHOP Builder 繼續設定。
四、調整店面級別設定
店面級別設定可以調整「色彩」、「文字」、「手機」、「商品」、「其他」共 5 大項。
1. 色彩：自訂區塊色彩
前往「店面級別設定 > 色彩」，您可以針對進階分頁的不同區塊自訂適合的顏色。各區塊的預設顏色為您原本設定的顏色。
注意：選定色彩後須點按左側欄下方的「儲存」按鈕，變更才會顯示於右側預覽畫面。
A. 頁面
可以設定頁面背景、文字（文字類元件）、超連結的顏色。
B. 公告欄
可以設定上方公告欄的背景、文字顏色。
C. 頁首
可以設定頁首的背景、文字、圖標顏色。
D. 主要按鈕
可調整主要按鈕、按鈕文字的顏色。
E. 立即購買按鈕
可以調整商品頁面中，「立即購買」按鈕的文字、按鈕顏色。有關立即購買功能的詳細介紹，請參考立即購買功能｜進階設計設定。
F. 商品促銷標籤
可以調整商品促銷標籤的背景、文字顏色。
G. 頁尾
可以調整頁尾的背景、文字、圖標顏色。
H. 版權聲明
可以調整版權聲明的背景、文字顏色。
I. 防詐騙提示
可以調整防詐騙提示的背景、文字顏色。
J. 電郵通知
可以調整電郵通知按鈕的背景、文字顏色。
＊註：電郵通知按鈕色的套用範圍為「SHOPLINE 後台 > 設定 > 自訂訊息內容」中，會員及訂單相關的電郵通知。
點選「儲存」並發佈後，顧客收到的電郵通知按鈕，將呈現更新後的色彩設定。
2. 文字：字體及字級設定
前往「店面級別設定 > 文字」，您可以針對文字類元件進行調整，選擇字體及大小。字體預設為原先您設定的字體。
注意：調整文字後須點按左側欄下方的「儲存」按鈕，變更才會顯示於右側預覽畫面。
|
變更 |
選擇您欲使用的字體。分為系統字體、其他字體；將滑鼠游標移動至字體上方，可查看支援語系／系統。
|
|
重新設置 |
還原為系統預設字體。 |
|
字體大小 |
調整字體大／中／小。 |
A. 標題
調整標題的字體及大小，點按「變更」可切換字體，點按「重新設置」則可還原為預設字體；此外，也能選擇標題文字的大小（大／中／小）。
B. 內容
調整副標題、內文的字體及大小。點按「變更」可切換字體，點按「重新設置」則可還原為預設字體；此外也能選擇內文文字的大小（大／中／小）。
選擇字體前，建議參考六、各語系支援字體／系統列表，確認不同字體適用的語系、系統範圍，以及當所選字體不支援顧客瀏覽語系時，字體會如何呈現。
3. 手機：設定手機目錄
前往「店面級別設定 > 手機」，調整商店目錄在手機上呈現的畫面。
注意：調整完手機相關設定後須點按左側欄下方的「儲存」按鈕，變更才會顯示於右側預覽畫面。
A. 手機目錄子目錄不展開
開啟「手機目錄子目錄不展開」開關後，在手機版選單中的「網店目錄」將不會預設展開子目錄；若關閉此開關，手機版選單中的「網店目錄」會預設展開所有子目錄。
手機版畫面如下：
B. 手機隱藏商品分類
開啟「手機隱藏商品分類」開關後，在手機版選單中的「網店目錄」將不會出現商品分類；若關閉此開關，手機版選單中將出現「分類」區塊，展示您商店後台所設定的商品分類。
手機版畫面如下：
4. 商品：自訂商品列表
前往「店面級別設定 > 商品」，，可調整商品列表的相關設定。每個設定項目皆有註記該開關會影響前台的哪些層面。如：子分類不展開會影響商品列表頁、手機目錄。
注意：調整完商品相關設定後須點按左側欄下方的「儲存」按鈕，變更才會顯示於右側預覽畫面。
A. 子分類不展開
您可以調整網店目錄／分類的格式。開啟「子分類不展開」開關，您網店的商品分類將收合子分類，若關閉此開關，商品分類將自動展開子分類。
B. 自動剪裁商品圖
您可選擇是否裁切商品圖，開啟「自動剪裁商品圖」開關，系統將自動將所有商品圖剪裁為統一大小，若關閉此開關，則圖商品圖將以原圖檔比例呈現。
C. 規格選項圖片顯示樣式（僅支援 Ultra Chic 版型）
若您有多規格商品，您可以選擇商品列表頁中的商品規格圖的形狀，目前有方形、圓形 2 種可供選擇。您還可以選擇規格圖的大小（小、中、大）。
注意：
- 此功能目前僅支援 Ultra Chic 版型，您只有在套用 Ultra Chic 版型時能使用此功能。
- 若您有開啟 layout engine，您需自行更新 liquid，此功能的效果才會在前台生成。
D. 商品列表顯示規格選項圖片
若您有多規格商品，開啟「商品列表顯示規格選項圖片」開關後，多規格商品下將顯示您設定的規格圖片。
規格圖片可選擇您設定的「第一組規格」或「第二組規格」。例如：第一組規格為「顏色」，第二組規格為「尺寸」，選擇顯示「第一組規格」時，商品下方的規格圖片將顯示不同顏色的商品。設定商品規格的詳細流程，請參閱商品規格與款式｜商品。
E. 商品名稱文字對齊（僅支援 Ultra Chic 版型）
您可以調整商品列表頁中商品名稱的對齊格式，您可選擇置左、置中、置右。商品名稱文字對齊不會影響規格圖片的顯示。
注意：
- 此功能目前僅支援 Ultra Chic 版型，您只有在套用 Ultra Chic 版型時能使用此功能。
- 若您有開啟 layout engine，您需自行更新 liquid，此功能的效果才會在前台生成。
F. 自訂標籤樣式（僅支援 Ultra Chic 版型）
您可自訂商品標籤的樣式，目前共有圓角、方角、箭頭 3 種樣式可選，若您沒有調整，則會依預設樣式呈現。有關促銷標籤的設定說明，請參考商品促銷標籤。
＊注意：
- 此功能目前僅支援 Ultra Chic 版型，您只有在套用 Ultra Chic 版型時能使用此功能。
- 若您有開啟 layout engine，您需自行更新 liquid，此功能的效果才會在前台生成。
G. 商品分類總數量（僅支援 Ultra Chic 版型）
「商品分類總數量」開關預設關閉，開啟後，前台商品分類的名稱旁會出現該商品分類擁有的商品總數量。
＊注意：
- 此功能目前僅支援 Ultra Chic 版型，您只有在套用 Ultra Chic 版型時能使用此功能。
- 若您有開啟 layout engine，您需自行更新 liquid，此功能的效果才會在前台生成。
H. 預設每頁顯示商品數量
您可以選擇商品列表頁每頁預設顯示的商品數量，目前可選擇每頁 24、48、72 個商品。顧客仍可在前台選擇當頁要顯示的商品數量。
I. 商品頁面中的社群分享按鈕
此開關預設開啟，即隱藏將不會出現社群分享的按鈕。若關閉此開關，則顧客可以透過按鈕分享商品。
5. 其他
前往「店面級別設定 > 其他」，可設定店面級別的其他設定。
注意：調整完其他設定設定後須點按左側欄下方的「儲存」按鈕，變更才會顯示於右側預覽畫面。
A. 回到頁面頂端
開啟「回到頁面頂端」功能，在商店前台往下滑後將出現回到頁面頂端的按鈕，反之關閉則按鈕消失。
B. 啟用 Cookies 授權提示
開啟「啟用 Cookies 授權提示」，顧客造訪網店時，系統將出現使用 Cookies 的提示，反之關閉則提示消失。有關啟用 Cookies 授權提示的詳細功能介紹，請參考此篇文章。
五、預覽及發佈頁面
完成店面級別設定後，您可以點按右上方的「預覽商店」，查看商店前台的呈現效果。
確認無誤後點按「發佈」，您自訂的店面級別設定便會套用至您的網店。
六、各語系支援字體／系統列表
1. 注意事項
包含多種語言的標題、內文暫不支援使用兩種以上的字體。
例如：若您的標題包含中英文，您僅能選用一種字體。
中文字體 M PLUS Rounded 1c、Shippori Mincho 為日文漢字。
您可以在使用中文時選擇，但可能存在部分無法對應的漢字。使用 M PLUS Rounded 1c 及 Shippori Mincho 時，無法對應的漢字將以預設字體顯示。
若所選擇的字體不支援顧客瀏覽語系，顧客將看到該語系的預設字體。
以下為常用語系預設字體：
- 繁體中文：Noto sans TC
- 簡體中文：Noto sans SC
- 英文／德文／法文／馬來文：Noto sans
- 泰文：Noto sans TH
- 越南文：Noto sans VN
- 日文：Noto sans JP
2. 各語系支援的字體／系統列表：
A. 系統字體
| 字體 | 支援語系 | 備註 |
| Sans | 繁體中文、簡體中文、英文、泰文、越南文、日文 | 支援 iOS／macOS／android 系統。 |
| Serif | 繁體中文、簡體中文、英文、越南文、日文 | 支援 iOS／macOS 系統；不支援 android 系統，預設顯示 Sans。 |
| Mono | 英文、越南文 | 支援 iOS／macOS／android 系統。 |
| Rounded | 各系統瀏覽器支援不同語系 | 支援 iOS／macOS 系統 Chrome、Safari 瀏覽器中的英文、日文、部分繁簡中，不支援時預設顯示 Sans；不支援 android 系統、其他裝置與瀏覽器皆預設顯示 Sans。 |
B. 其他字體
| 字體 | 支援語系 |
| Athiti | 英文、泰文、越南文 |
| Lato | 英文 |
| Lora | 英文、越南文 |
| M PLUS Rounded 1c | 英文、泰文、越南文、日文（與部分應用於日文的中文） |
| Mali | 英文、泰文 |
| Mitr | 英文、泰文、越南文 |
| Montserrat | 英文、越南文 |
| Mulish | 英文、越南文 |
| Nanum Myeongjo | 英文 |
| Noto Sans | 繁體中文、簡體中文、英文、越南文 |
| Noto Serif | 繁體中文、簡體中文、英文、越南文 |
| Nunito | 英文、越南文 |
| Playfair Display | 英文、越南文 |
| Pridi | 英文、泰文、越南文 |
| PT Sans | 英文 |
| Roboto | 英文、越南文 |
| Sarabun | 英文、泰文 |
| Shippori Mincho | 英文、日文（與部分應用於日文的中文） |
| Taviraj | 英文、泰文 |
| Ubuntu | 英文 |
延伸閱讀
最後更新時間：2026 年 10 月 15 日
評論