圖片組合元件|SHOP Builder

4. EC + SC.png

透過 SHOP Builder 增加或編輯進階分頁時,可以增加「圖片組合」元件,為您的分頁加入多張圖片,讓您的網店版面更顯精美。

⚠️ 開始前請注意:

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

 

一、 增加圖片組合元件

步驟一

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

 

步驟二

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

步驟三

點選「圖片組合」元件。___2022-06-30___9.50.55.png

 

步驟四

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

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

*注意:

  • 目前最多支援增加至 16 張圖片。
  • 若因圖片檔案格式、數量等原因導致上傳失敗,可能出現下列錯誤提示訊息:
    • 全部上傳失敗
      錯誤提示:上傳失敗(無法顯示任何縮圖)
    • 部分上傳失敗
      錯誤提示:部分圖片上傳失敗(縮圖顯示時自動跳過失敗檔案)

CN_________1.png


若您增加多張圖片,點按圖片左側的 ___2022-06-30___10.34.59.png 可拖曳圖片調整順序。CN_________2.png

 

步驟五

點開圖片元件,可個別上傳桌機版、手機版圖片。
*備註:桌機版圖片寬度建議大於 2000 px,手機版圖片寬度建議大於 1080 px。___2022-06-14___11.40.10.png


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

 

步驟六

編輯圖片相關設定。

  • 圖片裁切:選擇裁切並顯示圖片哪個部分(上左/上中/上右/中左/中中/中右/下左/下中/下右)。
  • 圖片 ALT:輸入圖片的替代文字。用一句話來描述圖片中的內容,幫助搜尋引擎了解圖片的內容,關於圖片 ALT 說明輕參考此篇文章
  • 遮罩:選擇覆蓋圖片的程度。
  • 標題:輸入圖片標題。
  • 連結:在圖片中加入連結,顧客點按圖片即可開啟連結頁面。
    可以設定連結開啟方式:
    • 當前分頁:在目前頁面直接開啟連結
    • 另開分頁:另外開啟一個連結分頁

___2022-06-14___12.06.18.png

 

步驟七

支援其他設定。

A. 全寬模式____.png


沒有開啟全寬模式:
___2022-06-14___2.45.53.png


有開啟全寬模式:
___2022-06-14___2.46.16.png

 

B. 邊距

可調整圖片與頁面的邊距。__.png

 

C. 每行圖片數

可以個別設定桌機版、手機版每一行的圖片數量。_____.png

 

D. 圖片比例

可以各別設定桌機版、手機版的圖片比例。

  • 桌機版建議圖片比例
    • 長方形 - 長寬比 2:1。單圖建議尺寸 2000 × 1000px。
    • 長方形 - 長寬比 3:4。單圖建議尺寸 1500 × 2000px。
    • 正方形 - 長寬比 1:1。單圖建議尺寸 2000 × 2000px。
    • 原圖比例 - 上傳圖片的原尺寸。
  • 手機版建議圖片比例
    • 長方形 - 長寬比 2:1。單圖建議尺寸 1080 × 540px。
    • 長方形 - 長寬比 3:4。單圖建議尺寸 810 × 1080px。
    • 正方形 - 長寬比 1:1。單圖建議尺寸 1080 × 1080px。
    • 原圖比例 - 上傳圖片的原尺寸。

____.png

 

E. 文字對齊____.png

 

步驟八

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

_______.png


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

 

步驟九

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

 

延伸閱讀

 

 

 

 

 

還有其他問題?提交請求

評論