版型編輯總覽
版型編輯總覽
一、應用情境
版型編輯是打造官網頁面的核心工具。透過不同類型的區塊組合，您可以自由設計官網首頁及各頁面的視覺呈現，無需撰寫程式碼。
| 情境 | 建議使用的區塊 |
|---|---|
| 打造首頁輪播廣告 | 主頁橫幅：支援多張圖片輪播，適合放置主打活動或新品視覺 |
| 展示多張促銷圖片並排 | 多欄橫幅：同一區塊最多 5 張圖片並排顯示 |
| 展示商品集合 | 商品群組：直接選取已建立的商品群組，自動顯示商品列表 |
| 圖文並排介紹品牌故事 | 左圖右文 / 右圖左文：圖片與文字並排，適合品牌介紹或特色說明 |
| 嵌入品牌影片 | 影片：支援 YouTube、Facebook、Vimeo 影片嵌入 |
| 新增純文字公告或說明 | 全文字：適合放置公告、品牌理念、退換貨說明等文字內容 |
| 放置全版視覺大圖 | 全版圖片：全螢幕背景圖片，可搭配文字標題 |
| 多張圖片輪播展示 | 三欄輪播圖：最多 10 張圖片或影片輪播，適合展示多款商品 |
| 嵌入自訂程式碼 | HTML 編輯器：可插入自訂 HTML 程式碼，適合進階客製需求 |
二、前置準備
- 準備好要使用的圖片素材，建議桌機版寬度至少 1920 像素
- 部分區塊支援桌機、平板、手機三種尺寸圖片，建議事先準備好不同尺寸版本。若只上傳桌機版，系統會自動將桌機版圖片套用到平板和手機顯示
- 若要使用商品群組區塊，請先在商品設定 → 商品群組中建立好群組
- 若要嵌入影片，請先將影片上傳至 YouTube、Facebook 或 Vimeo，取得影片連結
三、基本操作
後台路徑：自訂官網 → 總覽（選擇商店） → 版型編輯
步驟一：新增區塊
在版型編輯頁面中，直接點擊想要新增的區塊類型，即可新增該區塊。
圖：直接點擊想要的區塊類型即可新增
步驟二：編輯區塊內容
新增後，點擊該區塊即可進入編輯模式。根據區塊類型不同，可設定圖片、文字、連結等內容。各區塊的詳細設定方式請參考下方「四、區塊類型介紹」。
步驟三：調整區塊順序
透過拖曳方式調整各區塊的上下順序，排在越上方的區塊會越早出現在頁面中。
步驟四：儲存變更
完成所有編輯後，點擊儲存按鈕，變更即會套用到您的官網頁面。
💡 小技巧：您可以先在版型編輯中設定好區塊但不上架，等到活動當天再透過上架時間自動顯示。
四、區塊類型介紹
版型編輯提供以下 9 種區塊類型，點擊各區塊名稱可查看詳細教學：
官網首頁的輪播橫幅，支援多張圖片輪播展示。可設定圖片連結、標題文字、ALT 文字，以及自動輪播功能。適合放置主打活動、新品上市等重要視覺。
全螢幕顯示的背景圖片區塊，支援桌機、平板、手機上傳不同尺寸圖片。可在圖片上方顯示文字標題與內容，並設定連結。適合品牌形象展示或活動視覺。
支援最多 10 張圖片或影片的輪播區塊，以三欄方式展示。可設定商品連結與自訂標題。適合展示多款商品或活動素材。
同一區塊最多並排顯示 5 張圖片，支援多裝置尺寸。可設定各張圖片的連結、標題與 ALT 文字。適合促銷活動或分類導覽。
圖片與文字並排顯示的版面配置，支援多裝置尺寸圖片。適合品牌故事、產品特色介紹等需要圖文搭配的內容。
直接選取已建立的商品群組，自動在頁面上展示該群組的商品列表。適合首頁的精選商品、新品上架、熱銷排行等區塊。
提供即時文字編輯器，除了一般文字外，也支援插入圖片、表格、超連結及嵌入 YouTube 影片等多種內容格式，應用彈性高。適合公告、品牌理念、退換貨說明、圖文混排內容等。
嵌入外部平台影片，支援 YouTube、Facebook、Vimeo。可設定自動播放功能。適合品牌形象影片或商品介紹影片。
可插入自訂 HTML 程式碼的進階區塊。適合需要嵌入第三方工具、客製化版面等進階需求。
⚠️ 注意：平台會定期更新系統，若使用 HTML 編輯器插入自訂程式碼，建議定期檢查程式碼是否仍正常運作。官方不提供自訂程式碼的撰寫教學或復原服務。
五、共用設定說明
以下設定項目為所有區塊類型共用，可在各區塊的編輯面板中找到：
| 設定項目 | 說明 |
|---|---|
| 上架時間 | 設定區塊開始顯示的時間，可用於預排活動 |
| 下架時間 | 設定區塊自動隱藏的時間，活動結束後自動下架 |
| VIP 限定 | 設定僅特定 VIP 等級的顧客才能看到此區塊 |
| 區塊邊界全螢幕 | 開啟後區塊會延伸至瀏覽器全寬，關閉則維持在內容區域寬度內 |
| 內邊距 | 調整區塊上、右、下、左的內邊距，控制內容與邊界的間距 |
💡 小技巧：善用上下架時間功能，可以提前設定好節慶活動的版面，時間到了自動上架、活動結束後自動下架，不需要手動操作。
六、範例說明
範例：打造一個完整的官網首頁
假設您想打造一個包含品牌形象、主打商品與活動資訊的首頁，可以這樣組合區塊：
- 最上方放一個主頁橫幅，設定 3～5 張活動主視覺輪播
- 接著放一個商品群組，選擇「新品上架」群組，展示最新商品
- 再放一個左圖右文，介紹品牌故事或本季主題
- 接著放一個多欄橫幅，放置 3 張分類導覽圖（如洋裝、上衣、褲裝），各自連結到對應的商品群組頁面
- 放一個影片區塊，嵌入品牌形象影片
- 最後放一個商品群組，選擇「熱銷排行」群組
💡 小技巧：區塊之間的順序可以隨時透過拖曳調整，建議先規劃好頁面架構再開始設定，效率會更高。