圖文組合元件｜SHOP Builder

4. EC + SC.png

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

⚠️ 開始前請注意：

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

一、增加圖文組合元件

步驟一

前往「商店後台 > 網店設計 > 網店分頁」點按「進階分頁／編輯」按鈕，開啟「進階分頁」設定頁面。

步驟二

點按「元件」按鈕。

步驟三

點選「圖文組合」元件。

步驟四

系統預設加入 1 組圖片及文字元件，點按「圖片」、「文字」元件可編輯內容。

點按左側 ___2022-06-30___10.34.59.png 圖示可拖曳圖片或文字調整順序。 Screen

步驟五

點開圖片元件，可個別上傳桌機版、手機版圖片。
＊備註：桌機版圖片寬度建議大於 2000 px，手機版圖片寬度建議大於 1080 px。

點按上方「語系」下拉選單，會顯示商店支援的所有語系，可以個別上傳在各語系介面所要顯示的圖片和文字。

步驟六

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

1. 圖片

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

2. 文字

標題：輸入商品介紹標題。您也可以針對標題調整以下樣式設定。樣式呈現的優先順序為：元件的樣式設定 > 店面級別樣式設定。
- Heading 標籤：共有 H1 - H6 可供選擇，系統預設為 H3。
- 字體顏色：點開調色盤可選擇顏色，或輸入色碼編號
- 字體大小：可選擇 16/20/24/28/32。實際大小仍會根據店面級別設定的字體大小依比例縮放。
副標題：輸入商品介紹副標題。您也可以針對副標題調整以下樣式設定。
- Heading 標籤：共有 H1 - H6 可供選擇，系統預設為 H4。
- 字體顏色：點開調色盤可選擇顏色，或輸入色碼編號。
- 字體大小：可選擇 14/16/18/20/22。實際大小仍會根據店面級別設定的字體大小依比例縮放。
內容：依據商品內容去做撰寫。您也可以針對內容文字調整以下樣式設定。
- 字體大小：可選擇 12/14/16/18/20。實際大小仍會根據店面級別設定的字體大小依比例縮放。
- 字體顏色：點開調色盤可選擇顏色，或輸入色碼編號。
- 段落工具：可選擇項目清單或編號清單
- 展開文字內容：可展開文字輸入框方便打字。
展示按鈕：可以選擇是否開啟讓顧客從網頁上看到按鈕。
按鈕文字：可自行設定顧客點選的按鈕文字。
連結：在文字上加入連結，顧客點按文字即可開啟連結頁面。
可以設定連結開啟方式：
- 當前分頁：在目前頁面直接開啟連結
- 另開分頁：另外開啟一個連結分頁