在編輯進階頁面時，您可以透過新增「銷售組合」元件，為分頁打造多樣化的排版設計；支援組合文字、商品、圖片、影片組件，使網店銷售頁面更豐富吸睛。
⚠️ 開始前請注意：
- SHOP Builder 目前僅支援 Ultra Chic、Kingsman、Varm、Philia 版型使用。
- 使用 SHOP Builder 建立分頁後，若切換其他店面版型，該分頁仍然可以顯示，但無法編輯且可能發生跑版情形，在確認發佈分頁前請多加留意。
- 若您有開啟 Layout engine 編輯器，請參考說明文件調整代碼，或與線上顧問聯絡。
本篇文章將介紹：
一、新增銷售組合元件
步驟一
前往商店後台「網店設計 > 網店分頁」，選擇「新增分頁 > 進階分頁」或點選既有分頁旁的「編輯」。
＊注意：僅支援編輯有標示 的進階分頁。
步驟二
點選「+ 元件」新增元件。
步驟三
找到擴充功能欄位，點選「銷售組合」。
＊注意：此元件暫不支援 Shopper App 使用。
步驟四
自由組合商品、圖片、文字、影片組件，點選 圖示可拖曳調整順序；系統預設加入一個圖片組件、一個商品組件。
＊注意：一個銷售組合元件最多可加入三個組件（商品／圖片／文字／影片）；選擇三個組件後，系統將自動隱藏加入按鈕 。
步驟五
各組件（商品／圖片／文字／影片）需設定的欄位不同，請參考下方表格。
| 商品 |
點選「+ 商品」，選擇一件您想放在銷售組合中的商品；若商品狀態為未上架／隱藏，將不會顯示於商店前台。 若您想了解更多商品組件資訊，請參考：商品組件。 |
| 圖片 |
支援為桌機、手機分別上傳單張圖片，並自訂圖片 ALT；桌機版圖片寬度建議大於 2000 px，手機版圖片寬度建議大於 1080 px。 若您想了解更多圖片組件資訊，請參考：圖片組件。 |
| 文字 |
輸入標題、副標題、內容等欄位，並支援調整文字樣式及其他相關設定。 若您想了解更多文字組件資訊，請參考：文字組件。 |
| 影片 |
輸入 YouTube、Facebook 或 Vimeo 影片網址，影片顯示比例為 16:9。 若您想了解更多影片組件資訊，請參考：影片組件。 |
步驟六
接續下列四項設定，請參考下方表格。
| 邊距 |
支援調整元件上下邊距，數值自 1 至 30 px；預設為 30 px。 |
| 文字對齊 |
選擇元件文字的對齊方式，分為靠左、置中、靠右；預設為置中。 |
| 顯示商品摘要 |
選擇是否顯示商品摘要；預設為開啟，即顯示商品摘要。 |
| 顯示隱藏商品 |
選擇是否顯示隱藏商品；預設為關閉，即不顯示隱藏商品。 |
步驟七
完成上述設定後，點選「儲存」將於右側顯示套用效果；點選上方 圖示可切換桌機版、手機版。
步驟八
建議「預覽商店」確認是否無誤，再點選「發佈」進階分頁。
二、網店前台效果
桌機版
依據銷售組合元件內包含的組件數量、類型，系統將自動切換顯示占比。
1. 包含兩個組件，且第一個組件為圖片／影片時
第一個圖片／影片組件以三分之二占比顯示，第二個組件以三分之一占比顯示。
＊注意：第一個組件非圖片／影片則均分顯示 。
2. 包含三個組件時
無論組件類型，皆均分顯示。
手機版
依據您設定的組件排序，由上至下依序顯示。
延伸閱讀
評論