輪播元件｜SHOP Builder

Avatar
SHOPLINE TW Copywriters
追蹤

4. EC + SC.png

透過 SHOP Builder 所增加或編輯進階分頁時，可以增加「輪播」元件，為您的分頁加入圖片和影片，讓您的網路商店版面更顯精美。

⚠️ 開始前請注意：

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

 

一、 增加輪播元件

步驟一

前往「商店後台 > 網店設計 > 網店分頁」點按「進階分頁／編輯」按鈕，開啟「進階分頁」設定頁面。___2022-06-10___4.26.12.png

 

步驟二

點按「元件」按鈕。___2022-06-14___11.16.30.png

 

步驟三

點選「輪播」元件。____.png

 

步驟四

系統預設加入 1 組輪播，點按「圖片 / 影片」元件可編輯內容；點按左側 ___2022-06-30___10.34.59.png 圖示可拖曳圖片或影片調整順序。
____.png

 

步驟五

點開圖片元件，可個別上傳桌機版、手機版圖片。

1. 批量上傳
根據圖片檔案修改日期排序，由上至下依序為最近編輯至之前編輯。

2. 單張上傳
您也可以一次上傳一張圖片，縮圖排序方式同批量上傳。

＊注意：

  • 桌機版圖片寬度建議大於 2000 px，手機版圖片寬度建議大於 1080 px。
  • 若因圖片檔案格式、數量等原因導致上傳失敗，可能出現下列錯誤提示訊息：
    • 全部上傳失敗
      錯誤提示：上傳失敗（無法顯示任何縮圖）
    • 部分上傳失敗
      錯誤提示：部分圖片上傳失敗（縮圖顯示時自動跳過失敗檔案）

______.png


點按上方「語系」下拉選單，會顯示商店支援的所有語系，可以個別上傳在各語系介面所要顯示的圖片和影片。
___2022-06-30___3.49.23.png

 

步驟六

點開圖片 / 影片元件可編輯「圖片」、「影片」相關設定。

1. 圖片

  • 圖片裁切：選擇裁切並顯示圖片哪個部分（上左/上中/上右/中左/中中/中右/下左/下中/下右）。
  • 圖片 ALT：輸入圖片的替代文字。用一句話來描述圖片中的內容，幫助搜尋引擎了解圖片的內容，關於圖片 ALT 說明請參考此篇文章。
  • 遮罩：選擇覆蓋圖片的程度。
  • 標題：輸入商品介紹標題。您也可以針對標題調整以下樣式設定。樣式呈現的優先順序為：元件的樣式設定 > 店面級別樣式設定。
    •  Heading 標籤：共有 H1 - H6 可供選擇，系統預設為 H3。
    • 字體顏色：點開調色盤可選擇顏色，或輸入色碼編號。
  • 內容：依據商品內容去做撰寫。您也可以針對內容文字調整以下樣式設定。
    • 字體顏色：點開調色盤可選擇顏色，或輸入色碼編號。
    • 段落工具：可選擇項目清單或編號清單
    • 展開文字內容：可展開文字輸入框方便打字。
  • 展示按鈕：可以選擇是否開啟，讓顧客在網頁看到按鈕。
  • 按鈕文字：可自行設定顧客點選的按鈕文字。
  • 連結：在圖片中加入連結，顧客點按圖片即可開啟連結頁面。
    可以設定連結開啟方式：
    • 當前分頁：在目前頁面直接開啟連結
    • 另開分頁：另外開啟一個連結分頁

Screenshot 2024-06-02 at 3.57.43 AM.png

 

2. 影片

  • 影片連結：影片將自動以靜音模式播放，請輸入 Youtube 或 Vimeo 影片連結。
  • 遮罩：選擇覆蓋圖片的程度。
  • 標題：輸入商品介紹標題。您也可以針對標題調整以下樣式設定。樣式呈現的優先順序為：元件的樣式設定 > 店面級別樣式設定。
    •  Heading 標籤：共有 H1 - H6 可供選擇，系統預設為 H3。
    • 字體顏色：點開調色盤可選擇顏色，或輸入色碼編號。
  • 內容：依據商品內容去做撰寫。您也可以針對內容文字調整以下樣式設定。
    • 字體顏色：點開調色盤可選擇顏色，或輸入色碼編號。
    • 段落工具：可選擇項目清單或編號清單
    • 展開文字內容：可展開文字輸入框方便打字。
  • 展示按鈕：可以選擇是否開啟，讓顧客在網頁看到按鈕。
  • 按鈕文字：可自行設定顧客點選的按鈕文字。
  • 連結：在圖片中加入連結，顧客點按圖片即可開啟連結頁面。
    可以設定連結開啟方式：
    • 當前分頁：在目前頁面直接開啟連結
    • 另開分頁：另外開啟一個連結分頁

Screenshot 2024-06-02 at 4.01.06 AM.png

＊注意：

  • 樣式呈現的優先順序為：元件的樣式設定 > 店面級別樣式設定。
  • 若您有使用客製化語法調整頁面樣式設定，在調整過元件樣式設定後，需要重新調整客製化語法的規則。
  • 輪播元件標題、內容的字型大小可在左側編輯欄最下方的「文字大小」項調整，可詳見步驟七：I. 文字大小。
  • 目前 Shopper App 暫不支援元件層級的文字顏色、文字大小設定。

 

步驟七

支援其他設定。

A. 全寬模式___2022-09-26___12.25.50.png


未開啟「全寬模式」：___2022-09-26___12.25.50_2_2.png


有開啟「全寬模式」：___2022-09-26___12.26.08.png


B. 同高第一張輪播___2022-09-26___12.25.50_2.png

未開啟「同高第一張輪播」：

依照圖片的寬度決定輪播元件的高度。

  • 桌機版寬/高度比例為 2:1
  • 手機版寬/高度比例為 3:4

___2022-09-26___12.25.50_2_2.png


有開啟「同高第一張輪播」：

輪播元件的高度為第一張圖片的高度（依照圖片比例縮放）。___2022-09-26___12.33.50.png

C. 圖片比例

可以設定手機版的圖片比例，提供三種尺寸：按鈕由左至右分別為 3:4、2:1、1:1 。

  • 桌機版建議圖片比例：
    • 若無開啟「同高第一張輪播」開關 ，則桌機圖片比例一律預設為長寬比 2：1，尺寸為 2000 × 1000px。
    • 若有開啟「同高第一張輪播」開關，則會依照圖片原始比例顯示。建議圖片寬度至少要 2000px。
  • 手機版建議圖片比例
    • 長方形 - 長寬比 2：1。單圖建議尺寸 1080 × 540px。
    • 長方形 - 長寬比 3：4。單圖建議尺寸 810 × 1080px。
    • 正方形 - 長寬比 1：1。單圖建議尺寸 1080 × 1080px。

___2022-09-26___12.25.50_2_2.png

D. 邊距

可調整圖片與頁面的邊距。___2022-09-26___12.25.50_2_2_2.png

E. 輪播秒數

可以自行調整輪播秒數，選擇 1-10 秒區間。___2022-09-26___12.25.50_2_2_3.png

F. 切換樣式

可以選擇按鈕、圓點、縮圖，讓顧客可以自行點選到下一張圖片。___2022-09-26___12.36.43.png

G. 文字位置（桌機）

您可以依據需求，設定桌機版圖片/影片上的文字位置，可以選擇「上左/上中/上右/中左/中中/中右/下左/下中/下右」。___2022-09-26___12.36.43_2.png

H. 文字位置（手機）

您可以依據需求，設定手機版圖片/影片上的文字位置，可以選擇「圖片之下、與圖片重疊」。___2022-09-26___12.36.43_3.png

I. 字型大小

您可以依據需求，設定圖片/影片上的字型大小，可以選擇「同全店設定、放大標題與縮小描述、特大的標題」。___2022-09-26___12.36.43_4.png

 

步驟八

在設定過程中可點按下方「儲存」按鈕，於右側預覽畫面查看新增的圖片組合元件。
＊備註：可選擇查看桌機版或手機版的預覽畫面。image5.png

image16.png

 

或是點按右上方「預覽商店」，查看完整的前台預覽畫面。image18.png

 

步驟九

確認完成上述設定後，請點按右上角「發佈」按鈕，讓顧客在商店前台可查看此分頁所有新增的內容。image4.png

 

 

延伸閱讀

 

 

 

 

 

 

還有其他問題？提交請求

評論