版型編輯-官網首頁

版型編輯總覽

目錄
一、應用情境二、前置準備三、基本操作四、區塊類型介紹五、共用設定說明六、範例說明七、常見問題 FAQ

一、應用情境

版型編輯是打造官網頁面的核心工具。透過不同類型的區塊組合，您可以自由設計官網首頁及各頁面的視覺呈現，無需撰寫程式碼。

情境 | 建議使用的區塊
打造首頁輪播廣告 | 主頁橫幅：支援多張圖片輪播，適合放置主打活動或新品視覺
展示多張促銷圖片並排 | 多欄橫幅：同一區塊最多 5 張圖片並排顯示
展示商品集合 | 商品群組：直接選取已建立的商品群組，自動顯示商品列表
圖文並排介紹品牌故事 | 左圖右文 / 右圖左文：圖片與文字並排，適合品牌介紹或特色說明
嵌入品牌影片 | 影片：支援 YouTube、Facebook、Vimeo 影片嵌入
新增純文字公告或說明 | 全文字：適合放置公告、品牌理念、退換貨說明等文字內容
放置全版視覺大圖 | 全版圖片：全螢幕背景圖片，可搭配文字標題
多張圖片輪播展示 | 三欄輪播圖：最多 10 張圖片或影片輪播，適合展示多款商品
嵌入自訂程式碼 | HTML 編輯器：可插入自訂 HTML 程式碼，適合進階客製需求

二、前置準備

準備好要使用的圖片素材，建議桌機版寬度至少 1920 像素

部分區塊支援桌機、平板、手機三種尺寸圖片，建議事先準備好不同尺寸版本。若只上傳桌機版，系統會自動將桌機版圖片套用到平板和手機顯示

若要使用商品群組區塊，請先在商品設定 → 商品群組中建立好群組

若要嵌入影片，請先將影片上傳至 YouTube、Facebook 或 Vimeo，取得影片連結

三、基本操作

後台路徑：自訂官網 → 總覽（選擇商店） → 版型編輯

步驟一：新增區塊

在版型編輯頁面中，直接點擊想要新增的區塊類型，即可新增該區塊。

圖：直接點擊想要的區塊類型即可新增

步驟二：編輯區塊內容

新增後，點擊該區塊即可進入編輯模式。根據區塊類型不同，可設定圖片、文字、連結等內容。各區塊的詳細設定方式請參考下方「四、區塊類型介紹」。

步驟三：調整區塊順序

透過拖曳方式調整各區塊的上下順序，排在越上方的區塊會越早出現在頁面中。

步驟四：儲存變更

完成所有編輯後，點擊儲存按鈕，變更即會套用到您的官網頁面。

小技巧：
您可以先在版型編輯中設定好區塊但不上架，等到活動當天再透過上架時間自動顯示。

四、區塊類型介紹

版型編輯提供以下 9 種區塊類型，點擊各區塊名稱可查看詳細教學：

主頁橫幅

官網首頁的輪播橫幅，支援多張圖片輪播展示。可設定圖片連結、標題文字、ALT 文字，以及自動輪播功能。適合放置主打活動、新品上市等重要視覺。

全版圖片

全螢幕顯示的背景圖片區塊，支援桌機、平板、手機上傳不同尺寸圖片。可在圖片上方顯示文字標題與內容，並設定連結。適合品牌形象展示或活動視覺。

三欄輪播圖

支援最多 10 張圖片或影片的輪播區塊，以三欄方式展示。可設定商品連結與自訂標題。適合展示多款商品或活動素材。

多欄橫幅

同一區塊最多並排顯示 5 張圖片，支援多裝置尺寸。可設定各張圖片的連結、標題與 ALT 文字。適合促銷活動或分類導覽。

左圖右文 / 右圖左文

圖片與文字並排顯示的版面配置，支援多裝置尺寸圖片。適合品牌故事、產品特色介紹等需要圖文搭配的內容。

商品群組

直接選取已建立的商品群組，自動在頁面上展示該群組的商品列表。適合首頁的精選商品、新品上架、熱銷排行等區塊。

全文字

提供即時文字編輯器，除了一般文字外，也支援插入圖片、表格、超連結及嵌入 YouTube 影片等多種內容格式，應用彈性高。適合公告、品牌理念、退換貨說明、圖文混排內容等。

影片

嵌入外部平台影片，支援 YouTube、Facebook、Vimeo。可設定自動播放功能。適合品牌形象影片或商品介紹影片。

HTML 編輯器

可插入自訂 HTML 程式碼的進階區塊。適合需要嵌入第三方工具、客製化版面等進階需求。

注意：
平台會定期更新系統，若使用 HTML 編輯器插入自訂程式碼，建議定期檢查程式碼是否仍正常運作。官方不提供自訂程式碼的撰寫教學或復原服務。

五、共用設定說明

以下設定項目為所有區塊類型共用，可在各區塊的編輯面板中找到：

設定項目 | 說明
上架時間 | 設定區塊開始顯示的時間，可用於預排活動
下架時間 | 設定區塊自動隱藏的時間，活動結束後自動下架
VIP 限定 | 設定僅特定 VIP 等級的顧客才能看到此區塊
區塊邊界全螢幕 | 開啟後區塊會延伸至瀏覽器全寬，關閉則維持在內容區域寬度內
內邊距 | 調整區塊上、右、下、左的內邊距，控制內容與邊界的間距

小技巧：
善用上下架時間功能，可以提前設定好節慶活動的版面，時間到了自動上架、活動結束後自動下架，不需要手動操作。

六、範例說明

範例：打造一個完整的官網首頁

假設您想打造一個包含品牌形象、主打商品與活動資訊的首頁，可以這樣組合區塊：

最上方放一個主頁橫幅，設定 3～5 張活動主視覺輪播

接著放一個商品群組，選擇「新品上架」群組，展示最新商品

再放一個左圖右文，介紹品牌故事或本季主題

接著放一個多欄橫幅，放置 3 張分類導覽圖（如洋裝、上衣、褲裝），各自連結到對應的商品群組頁面

放一個影片區塊，嵌入品牌形象影片

最後放一個商品群組，選擇「熱銷排行」群組

小技巧：
區塊之間的順序可以隨時透過拖曳調整，建議先規劃好頁面架構再開始設定，效率會更高。

七、常見問題 FAQ

Q：版型編輯中最多可以新增幾個區塊？

A：沒有數量限制，您可以依需求自由新增多個區塊。但建議控制頁面長度，避免過多區塊影響載入速度與使用者體驗。

Q：區塊的順序可以調整嗎？

A：可以。在版型編輯頁面中，直接拖曳區塊即可調整上下順序，排在越上方的區塊會越早出現在頁面中。

Q：圖片需要準備哪些尺寸？

A：大部分區塊支援上傳桌機、平板、手機三種尺寸的圖片。建議桌機版寬度至少 1920 像素，並確保同一區塊內的圖片高寬比例一致，視覺效果會更好。

Q：可以設定某個區塊只在特定時間顯示嗎？

A：可以。每個區塊都有「上架時間」和「下架時間」的設定，您可以預排活動時段，時間到了自動顯示、結束後自動隱藏。

Q：VIP 限定功能是什麼意思？

A：開啟 VIP 限定後，只有符合指定 VIP 等級的顧客才能看到該區塊。適合用於 VIP 專屬優惠或搶先預覽等場景。