想在商店放置商品說明，如何編輯？
不懂語法，可以在商店放入文字或圖片嗎？
除了商品頁跟佈景外，還有哪裡可以放 YT 影片？

建置一間網路商店，除了需要好好規劃商店首頁佈景外，商店的內容資訊也是非常重要的！WACA 提供 HTML 編輯器功能，可以編輯文字、插入圖片及影片，讓您設計出吸睛的頁面、盡情展示及曝光品牌活動還有商品資訊，而且電腦、平板及手機都支援編輯設定，操作方式直覺又便利，一起來看看如何使用吧！

目錄

HTML 編輯器位置

以下是 WACA 後台提供 HTML 編輯器的功能位置，提供參考：

HTML 編輯器主要功能

HTML 編輯器提供與 Word 相似的網站文字編輯器功能，除了基本的文字編輯功能外，還可以插入圖片及影片、設定連結、嵌入 IG 貼文以及注重網站 SEO 評分必備的 <H2> 標題，以及提供原始碼功能可加入編輯器合法的 HTML 語法等，多元的編輯功能幫助您編輯出喜歡的風格！

圖示	功能
	撤銷/重做
	剪下/複製
	粗體/斜體/下劃線/刪除線
	文字/背景顏色
	左邊/中間/右邊/左右對齊
	增加/減少縮排
	表格
	文字段落/標題
	字型
	字體大小
	插入/編輯連結
	圖片本機上傳
	插入/編輯圖片網址
	FunTo雲端圖床
	嵌入 Instagram
	智慧斷行
	原始碼
	清除格式

以下針對 HTML 編輯器主要功能做詳細介紹：

插入圖片

HTML 編輯器支援以下插入圖片方式：

1. 本機上傳
2. 網路圖床網址
3. FunTo 雲端圖床

本機上傳

本機上傳是指直接將電腦內的圖檔上傳到編輯器使用，上傳圖片前請留意以下說明：

1. 支援上傳格式：jpg／png／gif 類型的圖檔。
2. 每張圖檔檔案上限為：2 MB。
3. 每間 WACA 商店可上傳圖片上限為 3 萬張。（不限版本）

本機上傳流程如下：

1. 點擊「」本機圖片上傳按鈕
   
2. 開啟圖片上傳介面，即可上傳圖片。
   

本機上傳提供二種圖片上傳方式：

1. 拖曳上傳
   
2. 開啟檔案上傳
   

網路圖床網址

如果您擁有自己專屬的網路圖床，可以自行將圖床上傳到雲端後，採用插入圖片網址的方式加入圖片；以下是使用網路圖床的重要提醒：

1. 插入圖片需使用「圖片網址」，無法直接複製瀏覽器上方網址列的網址，否則有可能會無法正常顯示圖片。
2. 圖片網址必須是 https:// 開頭，並以 .jpg、.png、.gif 等圖檔格式為結尾。
3. 如採用免費網路圖床，會有圖片無法正常顯示或遺失的可能；建議使用安全、穩定的付費圖床，以確保能完整呈現商店頁面。

複製圖片網址方式：

• 請將圖片上傳至網路圖床後，將滑鼠游標移至圖片上方，接著「點擊滑鼠右鍵 ➜ 複製圖片網址」，再將圖片網址貼到「插入圖片」內即完成圖片插入。

插入圖片流程

1. 點擊「」插入圖片按鈕
   
2. 開啟插入/編輯圖片介面，貼上圖片網址即可。
   
3. 請記得，插入圖片前，必須先將圖片上傳至圖床，並取得圖片的完整網址後(含附檔名)，再從編輯器插入圖片網址，最後點擊儲存完成設定。
   

• 確認所插入的圖片有完整顯示在編輯器中，這樣就完成囉！
  若插入圖片後畫面顯示 ⊠ 或圖片呈現死圖的情況時，請檢查圖片網址是否有完整複製。
• Alternative description是當圖片失效時顯示替代文字的設定欄位，可依需求編輯。

FunTo 雲端圖床

除了本機上傳及圖片網址可以在編輯器內插入圖片外，當本機上傳圖片可用張數不敷使用、或因圖片檔案常態超過 2 MB 導致無法順利上傳時，可以評估加購穩定性高、且有安全加密過的 FunTo 圖床空間，上傳方式簡便外，還可以上傳到共享資料夾，免去同一圖片重複上傳的煩惱。想了解 FunTo 雲端圖床詳細功能，請進入 FunTo 雲端圖床 觀看介紹。

如何讓圖片併排顯示？

有些店家希望圖片在電腦和手機裝置中，都可以正常的縮放，整齊的左右並排顯示。

可以以表格的方式先畫出圖片要呈列的方式，再從表格中插入圖片，排版好的內容就可以縮放自如，不會跑版囉！

1.請先插入表格

2. 在表格屬性設定「框線寬度為0」，表格在商店顯示時就不會有框線。

3. 在表格中點擊滑鼠左鍵，游標停在表格中，接著插入圖片。

4.  圖片就會以並排的方式呈現在商店中囉!

插入影片

如果要插入影片，必須先將影片上傳到 Youtube ，再以網址或嵌入程式碼的方式插入影片到編輯器中。

以下有兩種方式可以插入影片：

一般影片網址

使用影片網址插入影片時，在 Youtube 能設定影片開始撥放的時間點。

1. 將影片上傳至 Youtube

2. 點擊「分享」

3. 設定「開始處」的時間點，接著複製影片網址

📌 開始處：影片開始撥放的時間點，通常用於影片長度較長，但希望消費者瀏覽的內容位置在影片中間或尾端時，就可以設定消費者撥放時，開始撥放的時間點，讓消費者可以快速觀看到影片重點。

4. 進入 HTML 編輯器中，點選「插入/編輯 媒體」

5. 選擇「一般」，貼上剛剛所複製的影片網址，按「儲存」，即完成影片插入。

嵌入碼

使用嵌入碼插入影片時，可以編輯顯示撥放器控制選項、隱私權加強保護、影片撥放的開始處時間點，下方將會一一說明。

1. 將影片上傳至 youtube

2. 點擊「分享」

3. 選擇「嵌入」

4. Youtube 影片設定

顯示撥放器控制選項：左下角可以點擊連結至 Youtube 觀看影片。

📌 店家有在經營 Youtube 想推廣頻道，可以勾選這個選項，讓消費者至 Youtube 瀏覽更多的商店影片。

📌 如果想避免消費者至 Youtube 觀看影片後，未回到商店下單，建議可以不要勾選此選項喔!

啟用隱私權加強保護模式：勾選時，只有當消費者在商店中瀏覽影片時，Youtube 才會記錄消費者相關資訊。

開始處：勾選時，影片會從指定的時間點開始撥放，通常用於影片長度較長，但希望消費者瀏覽的內容位置在影片中間或尾端時，就可以設定消費者撥放時，開始撥放的時間點，讓消費者可以快速觀看到影片重點。

完成影片設定後，「複製」嵌入程式碼，回貼到 WACA 後台。

5. 進入 HTML 編輯器中，點選「插入/編輯 媒體」

6. 選擇「嵌入碼」貼上後，並儲存

• 📌確認所插入的影片有完整顯示在編輯器中，這樣就完成囉！
• 📌若插入後發現顯示 □，或影片有無法呈現的狀況，請檢查影片網址是否有完整複製。

嵌入Instagram貼文

找到你想嵌入的IG貼文，點選右上角，選擇「內嵌」

複製內嵌程式碼

回到後台，點選編輯器上IG的小圖示。

在編輯視窗中，貼上剛剛複製的內嵌程式碼，點選「確定」。

貼文就會出現在編輯器中，再點選「儲存」後，就能在商店前台文章中看到內嵌的IG貼文囉！

自行編寫 html tag

需要注意以下幾點：

1. HTML編輯器只允許使用html tag，以及HTML編輯器內所提供的樣式排版功能。
2. 其它如 ＜script＞、 ＜style＞、 ＜link＞、行內css、id、class...等，一律篩選過濾移除，只保留合法的html tag。
3. 如使用表單功能，只限使用 iframe 方式嵌入，建議使用 google 表單來完成。

其它功能

超連結

* 使用時機

• 文字、圖片點擊後要連結至其他網頁。
  如：LINE 加入好友 + LINE 分享邀請連結。

* 使用方式

• 文字、圖片放入 HTML 編輯器後，選擇要加上超連結的內容，點選「超連結」，再把連結網址貼上。

消除格式

* 使用時機 

• 原文字資料複製貼上時，夾雜格式排版，想貼上乾淨的 (無格式) 文字時使用。
• 編輯後，發現商店前台圖片之間有大量空白。

* 使用方式 

• 選擇要消除格式的區域後，點選「清除格式」 。

舉例來說，很多店家會以 Word 等文書軟體編輯商店內容，再貼到 HTML 編輯器中，此時就會有跑版的狀況。

此時請點選「清除格式」，將文書軟體的原始碼移除，再透過 HTML 編輯器重新排版，在商店呈現時，就不會有跑版的狀況。

智慧斷行

* 使用時機

• 換段落時，下個段落還夾雜著上個段落的格式，無法消除，想要重新開始一個新段落。

* 使用方式

• 一段落結尾，點「智慧斷行」，就像是點了 Enter 一樣，會自行清除所有格式換到下一個段落，重新開始。