藉由新增或編輯「商品圖文」、「商品列表」元件，為賣場加入圖片和文字說明，並搭配不同的呈現方式，豐富您的獨立分潤賣場設計，吸引顧客瀏覽、佇足。
⚠️ 開始前請注意：
- 此功能僅支援搭配「獨立分潤賣場」使用。
- SHOP Builder 目前僅支援 Ultra Chic、Kingsman、Varm、Philia 版型使用；若切換其他店面版型，獨立分潤賣場將無法正常顯示。
本篇文章將介紹：
一、商品圖文元件
步驟一：
接續 獨立分潤賣場 的商品與賣場樣式設定，點選「商品圖文」。
步驟二：
您可以選擇新增「商品」、「圖片」或「文字」。
＊注意：最多支援選擇 4 項，可任意組合及複選。
範例說明
1. 商品 x4
2. 圖片 x3 + 文字 x1
3. 商品 x2 + 圖片 x2
1. 商品
第一步：下拉商品元件，點選「+ 商品」按鈕。
第二步：選擇一件商品後，點選「確認」。
＊注意：暫不支援選擇組合商品，但已 [即將推出]。
2. 圖片
下拉圖片元件，點選新增桌機 / 手機圖片，並設定圖片 ALT。
3. 文字
下拉文字元件，輸入標題、副標題及內容；可調整 Heading 標籤、 字體顏色、 字體大小、字體粗細、新增超連結等。
＊備註：
-
若您想了解更多 Heading 標籤資訊，請參考：設定商店 Heading 標籤。
- 樣式呈現的優先順序為：元件的樣式設定 > 店面級別樣式設定。
- 若您有使用客製化語法調整頁面樣式設定，在調整過元件樣式設定後，需要重新調整客製化語法的規則。
- 目前 Shopper App 暫不支援元件層級的文字顏色、文字大小設定。
步驟三：
設定邊距、文字對齊，並選擇是否顯示商品摘要及隱藏商品，完成後點選「儲存」。
- 邊距：可調整「圖片」和「文字」與頁面的邊距。
- 文字對齊：可選擇靠左、置中、靠右對齊。
- 顯示商品摘要：開啟按鈕代表顯示商品摘要，關閉則不顯示。
- 顯示隱藏商品：開啟按鈕代表顯示隱藏商品，關閉則不顯示。
步驟四：
點選「儲存」後，可於右側預覽商品圖文設定，或點選右上方「預覽商店」，查看完整的賣場前台畫面。
步驟五：
確認完成上述設定後，請點選「發佈」按鈕，讓顧客在賣場前台可查看此分頁所有新增與異動。
二、商品列表元件
步驟一：
接續 獨立分潤賣場 的商品與賣場樣式設定，點選「商品列表」。
步驟二：
步驟三：
1. 商品
第一步：最多可選擇 40 項商品，點選前往「下一步」。
＊注意：暫不支援選擇組合商品。
第二步：拖曳商品以調整其排序，完成後點選「確認」
第三步：已選擇的商品將顯示於左側欄位，您可以點選 圖示編輯，或
圖示刪除。
2. 商品分類
第一步：選擇商品分類，完成後點選「確認」。
＊注意：最多支援顯示 40 項商品，若該分類內含 40 項商品以上，排序靠後的商品將不會顯示於賣場。
第二步：已選擇的商品分類將顯示於左側欄位，您可以點選 圖示編輯，或
圖示刪除。
步驟四：
設定標題、文字對齊、商品欄數及邊距，並選擇是否顯示商品摘要及隱藏商品，完成後點選「儲存」。
- 標題：輸入該商品列表的標題，並設定標題大小。
- 文字對齊：可選擇靠左、置中、靠右對齊。
- 商品欄數：商品列表的欄數（橫排），僅支援設定桌機。
- 邊距：可調整「圖片」和「文字」與頁面的邊距。
- 顯示商品摘要：開啟按鈕代表顯示商品摘要，關閉則不顯示。
- 顯示隱藏商品：開啟按鈕代表顯示隱藏商品，關閉則不顯示。
步驟五：
點選「儲存」後，可於右側預覽商品列表設定，或點選右上方「預覽商店」，查看完整的賣場前台畫面。
步驟六：
確認完成上述設定後，請點選「發佈」按鈕，讓顧客在賣場前台可查看此分頁所有新增與異動。
延伸閱讀
評論