SHOP Builder 概覽｜SHOP Builder

4. EC + SC.png

SHOPLINE 推出全新的頁面編輯器 - SHOP Builder，大幅優化進階分頁的設計功能，操作簡單排版方便讓您輕鬆編輯進階分頁，可以更自由地設計商店公告欄、頁首頁尾、以及多達七種元件組合包含：圖片、文字、圖片/影片/商品輪播、商品列表等元件，助您創造獨一無二的網店版面。

以下將分別說明：

SHOP Builder 概覽
頁面佈局
SEO 設定
店面級別設定
注意事項

⚠️ 開始前請注意：

SHOP Builder 目前僅支援 Ultra Chic、Kingsman、Varm、Philia 版型使用。
使用新頁面編輯器建立分頁後，若切換其他店面版型，該分頁仍然可以顯示，但無法編輯且可能發生跑版情形，在確認發佈分頁前請多加留意。

一、SHOP Builder 概覽

在 SHOPLINE 網店後台，前往「網店設計 > 網店分頁」點選「進階分頁」按鈕，開啟新版編輯器頁面。

1. 網頁版、手機版顯示

使用新版編輯器設計時，可輕鬆切換網頁版、手機版查閱，以確保網店畫面顯示符合您的設計。

＊注意：編輯後務必點選儲存或發佈。

A. 網頁版

B. 手機版

2. 引導預覽模式

此模式可協助您了解目前編輯的元件名稱及顯示位置，您亦可點按任意元件切換至該元件編輯畫面。

3. 語言設定

點選語言下拉選單，即可編輯您商店有支援的語系。

4. 頁面標題

系統預設新增分頁的名稱為「新的分頁」，點選右側的鉛筆圖示即可命名該頁面的標題。

5. 預覽商店

點選頁面右上方「預覽商店」按鈕，即可跳轉至新分頁預覽。

6. 儲存及發佈

新增進階分頁後，若有編輯請務必點選「儲存」才會顯示在分頁列表，並顯示「支援新頁面編輯器」。

＊注意：若您的進階分頁已加入至「網店目錄」，發佈後顧客即可點選進入此進階分頁，請務必於點選發佈按鈕前確認該頁面已完成編輯。

二、頁面佈局

1. 公告欄

您可以在公告欄新增文字內容、建立活動倒數、選擇展開方式及輪播間隔。詳細操作請參考：公告欄、頁首設定｜頁面編輯器（新版）。

2. 頁首

您可以在頁首調整 LOGO 及目錄的尺寸及位置。詳細操作請參考：公告欄、頁首設定｜頁面編輯器（新版）。

3. 元件組合

共有內容、商品類別、擴充功能三種分類，詳細操作說明請參考下列 FAQ 文章。

A. 內容

B. 商品類別

C. 擴充功能

4. 頁尾

您可以在頁尾新增文字、圖片及社群圖標，並調整樣式及對齊方式。詳細操作說明請參考：頁尾設定｜頁面編輯器（新版）。

三、SEO 設定

左側目錄點選 SEO 設定，您可以為進階分頁設定關鍵字與連結，詳細操作說明請參考：SEO 設定｜頁面編輯器（新版）。

四、店面級別設定

新頁面編輯左側目錄中點選「店面級別設定」，即可自訂網店各區塊的顏色搭配、字體大小，還可以調整商品列表相關的設定，讓您設計網頁的同時能兼顧風格及使用者體驗。

各個設定的詳細操作說明請參考：店面級別設定｜頁面編輯器（新版）。

＊注意：

編輯後請點選儲存或發佈按鈕，避免異動內容遺失。
若已經使用 SHOP Builder，建議您維持使用支援 SHOP Builder的主題，以免失去已經設定完畢的各項數值。

五、注意事項

若您的商店為 Ultra Chic、Kingsman、Varm 版型，在建立新進階分頁時，將直接開啟新頁面編輯器，但不影響之前已建立的分頁，且仍然可以使用舊編輯器調整既有分頁內容。
使用新頁面編輯器發佈新版頁尾，既有頁尾將被取代，在發佈前請務必再次確認是否要更新既有頁尾。
頁面可新增的元件無數量上限，但過多內容有可能拖累網站效能進而影響頁面流暢度，建議每一頁不要新增超過 25 個元件，並且每頁顯示的商品數量要依其規格複雜程度，自行斟酌設定。