SHOPLINE SHOP Builder 支援編輯店面級別的相關設定！您可以自訂網店各區塊的顏色、字體，還可以調整商品列表相關的設定，讓您設計網頁可以兼顧風格及使用者體驗。
本文將介紹：
⚠️ 開始前請注意：
- SHOP Builder 目前僅支援 Ultra Chic、Kingsman、Varm、Philia 版型使用。
- 使用 SHOP Builder 建立分頁後，若切換其他店面版型，該分頁仍然可以顯示，但無法編輯且可能發生跑版情形，在確認發佈分頁前請多加留意。
- 店面級別設定的調整會影響整間商店的所有頁面，並非特定分頁。
一、前往「店面級別設定」
前往「SHOPLINE 後台 > 網店設計 > 網店分頁 」，點按「進階分頁」按鈕。
點按左側欄的「店面級別設定」按鈕。
二、選擇／切換主題
左側欄往下拉可看到目前選擇的主題。若想更換主題，請點按「前往設計」按鈕。
您將被導回後台的「網店設計 > 設計」頁面，在這裡可以選擇想切換的主題。
切換新主題可能會有以下兩種情況：
1. 若新主題支援 SHOP Builder
- SHOP Builder 中，字體、顏色等既有數值維持不變。
- 前台店面套用新主題，既有設定也維持不變。
- 目前支援 SHOP Builder 的主題為 Kingsman、Ultra Chic 及 Varm，未來將陸續開放更多主題支援 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. 商品促銷標籤
＊注意：此功能目前僅支援 Ultra Chic 版型，您只有在套用 Ultra Chic 版型時能使用此功能。
可以調整商品促銷標籤的背景、文字顏色。
2. 文字
前往「店面級別設定 > 文字」，您可以針對文字類元件進行調整，選擇字體及大小。字體預設為原先您設定的字體。
＊注意：調整文字後須點按左側欄下方的「儲存」按鈕，變更才會顯示於右側預覽畫面。
|
變更 |
可選擇您欲設定的字體。 [即將推出] 分為系統字體與其他字體；將滑鼠游標移動至字體上方，可查看支援語系／系統。
|
|
重新設置 |
可變回系統預設字體。 |
|
字體大小 |
調整字體大／中／小。 |
A. 標題
調整標題的字體及大小。
B. 內容
調整副標題、內文的字體及大小。
＊注意：
- 暫不支援包含多種語言的標題／內文使用兩種以上的字體；若您的標題包含中英文，您僅能選用一種字體。
- 中文字體 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
-
各語系支援的字體列表：
-
[即將推出] 各語系支援的字體／系統列表：
-
系統字體
字體 支援語系 備註 Sans 繁體中文、簡體中文、英文、泰文、越南文、日文 支援 iOS／macOS／android 系統。 Serif 繁體中文、簡體中文、英文、越南文、日文 支援 iOS／macOS 系統；不支援 android 系統，預設顯示 Sans。 Mono 英文、越南文 支援 iOS／macOS／android 系統。 Rounded 各系統瀏覽器支援不同語系 支援 iOS／macOS 系統 Chrome、Safari 瀏覽器中的英文、日文、部分繁簡中，不支援時預設顯示 Sans；不支援 android 系統、其他裝置與瀏覽器皆預設顯示 Sans。
-
其他字體
字體 支援語系 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 英文
-
系統字體
3. 手機
前往「店面級別設定 > 手機」，您可調整您的商店目錄在手機上呈現的畫面。
＊注意：調整完手機相關設定後須點按左側欄下方的「儲存」按鈕，變更才會顯示於右側預覽畫面。
A. 手機目錄子目錄不展開
開啟「手機目錄子目錄不展開」開關後，在手機版選單中的「網店目錄」將不會預設展開子目錄；若關閉此開關，手機版選單中的「網店目錄」會預設展開所有子目錄。
手機版畫面如下：
B. 手機隱藏商品分類
開啟「手機隱藏商品分類」開關後，在手機版選單中的「網店目錄」將不會出現商品分類；若關閉此開關，手機版選單中將出現「分類」區塊，展示您商店後台所設定的商品分類。
手機版畫面如下：
4. 商品
前往「店面級別設定 > 商品」，您可調整您網店商品的相關設定。
＊注意：
- 調整完商品相關設定後須點按左側欄下方的「儲存」按鈕，變更才會顯示於右側預覽畫面。
-
每個設定項目皆有以標籤形式註記該開關會影響前台的哪些層面。如子分類不展開會影響商品列表頁、手機目錄。
A. 子分類不展開
您可以調整網店目錄／分類的格式。開啟「子分類不展開」開關，您網店的商品分類將收合子分類，若關閉此開關，商品分類將自動展開子分類。
B. 自動剪裁商品圖
您可選擇是否裁切商品圖，開啟「自動剪裁商品圖」開關，系統將自動將所有商品圖剪裁為統一大小，若關閉此開關，則圖商品圖將以原圖檔比例呈現。
C. 規格選項圖片顯示樣式
＊注意：
- 此功能目前僅支援 Ultra Chic 版型，您只有在套用 Ultra Chic 版型時能使用此功能。
- 若您有開啟 layout engine，您需自行更新 liquid，此功能的效果才會在前台生成。
若您有多規格商品，您可以選擇商品列表頁中的商品規格圖的形狀，目前有方形、圓形 2 種可供選擇。您還可以選擇規格圖的大小（小、中、大）。
D. 商品列表顯示規格選項圖片
若您有多規格商品，開啟「商品列表顯示規格選項圖片」開關後，多規格商品下將顯示您設定的規格圖片。
規格圖片可選擇您設定的「第一組規格」或「第二組規格」。例如：第一組規格為「顏色」，第二組規格為「尺寸」，選擇顯示「第一組規格」時，商品下方的規格圖片將顯示不同顏色的商品。設定商品規格的詳細流程，請參閱商品規格與款式｜商品。
E. 商品名稱文字對齊
＊注意：
- 此功能目前僅支援 Ultra Chic 版型，您只有在套用 Ultra Chic 版型時能使用此功能。
- 若您有開啟 layout engine，您需自行更新 liquid，此功能的效果才會在前台生成。
您可以調整商品列表頁中商品名稱的對齊格式，您可選擇置左、置中、置右。商品名稱文字對齊不會影響規格圖片的顯示。
F. 自訂標籤樣式
＊注意：
- 此功能目前僅支援 Ultra Chic 版型，您只有在套用 Ultra Chic 版型時能使用此功能。
- 若您有開啟 layout engine，您需自行更新 liquid，此功能的效果才會在前台生成。
您可自訂商品標籤的樣式，目前共有圓角、方角、箭頭 3 種樣式可選，若您沒有調整，則會依預設樣式呈現。有關促銷標籤的設定說明，請參考商品促銷標籤。
G. 商品分類總數量
＊注意：
- 此功能目前僅支援 Ultra Chic 版型，您只有在套用 Ultra Chic 版型時能使用此功能。
- 若您有開啟 layout engine，您需自行更新 liquid，此功能的效果才會在前台生成。
「商品分類總數量」開關預設關閉，開啟後，前台商品分類的名稱旁會出現該商品分類擁有的商品總數量。
H. 預設每頁顯示商品數量
您可以選擇商品列表頁每頁預設顯示的商品數量，目前可選擇每頁 24、48、72 個商品。顧客仍可在前台選擇當頁要顯示的商品數量。
I. 商品頁面中的社群分享按鈕
此開關預設開啟，即隱藏將不會出現社群分享的按鈕。若關閉此開關，則顧客可以透過按鈕分享商品。
5. 其他
前往「店面級別設定 > 其他」，可設定店面級別的其他設定。
＊注意：調整完其他設定設定後須點按左側欄下方的「儲存」按鈕，變更才會顯示於右側預覽畫面。
A. 回到頁面頂端
開啟「回到頁面頂端」開關，在商店前台往下滑後將出現回到頁面頂端的按鈕，反之關閉則按鈕消失。
B. 啟用 Cookies 授權提示
開啟「啟用 Cookies 授權提示」，顧客造訪網店時，系統將出現使用 Cookies 的提示，反之關閉則提示消失。有關啟用 Cookies 授權提示的詳細功能介紹，請參考此篇文章。
四、發佈頁面
完成店面級別設定後，您可以點按右上方的「預覽商店」，查看商店前台的呈現效果。
確認無誤後點按「發佈」，您自訂的店面級別設定便會套用的您的網店。
延伸閱讀
評論