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

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

• HTML 編輯器位置

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

• HTML 編輯器主要功能

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

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

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

• • 插入圖片

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

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

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

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

本機上傳流程如下：

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

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

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

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

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

複製圖片網址方式：

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

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

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

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

如果希望圖片在電腦和手機裝置中，都可以正常的縮放，整齊的左右並排顯示；可以以表格的方式先畫出圖片要呈列的方式，再從表格中插入圖片，排版好的內容就可以縮放自如，不會跑版囉！

1. 1. 插入表格
      
   2. 在表格屬性設定「框線寬度為0」，表格在商店顯示時就不會有框線。
      
   3. 在表格中點擊滑鼠左鍵，游標停在表格中，接著插入圖片。
      
   4. 圖片就會以並排的方式呈現在商店中囉！
      

• • 插入影片

如果要插入影片，必須先將影片上傳到 Youtube ，再以網址或嵌入程式碼的方式插入影片到編輯器，有兩種方式可以設定：

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

1. 1. 將影片上傳至 Youtube
   2. 點擊「分享」
      
   3. 設定「開始處」的時間點，接著複製影片網址
      📌 開始處：影片開始撥放的時間點，通常用於影片長度較長，但希望消費者瀏覽的內容位置在影片中間或尾端時，就可以設定消費者撥放時，開始撥放的時間點，讓消費者可以快速觀看到影片重點。
      
   4. 進入 HTML 編輯器中，點選「插入/編輯 媒體」。
      
   5. 選擇「一般」，貼上剛剛所複製的影片網址，按「儲存」，即完成影片插入。
      

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

1. 1. 將影片上傳至 youtube
   2. 點擊「分享」
      
   3. 選擇「嵌入」
      
   4. Youtube 影片設定
      顯示撥放器控制選項：左下角可以點擊連結至 Youtube 觀看影片。
      📌 有在經營 Youtube 且想推廣頻道的您，可以勾選這個選項，讓消費者至 Youtube 瀏覽更多的商店影片。
      
      📌 如果想避免消費者至 Youtube 觀看影片後，未回到商店下單，建議可以不要勾選此選項喔!
      
      啟用隱私權加強保護模式：勾選時，只有當消費者在商店中瀏覽影片時，Youtube 才會記錄消費者相關資訊。
      
      開始處：勾選時，影片會從指定的時間點開始撥放，通常用於影片長度較長，但希望消費者瀏覽的內容位置在影片中間或尾端時，就可以設定消費者撥放時，開始撥放的時間點，讓消費者可以快速觀看到影片重點。完成影片設定後，「複製」嵌入程式碼，回貼到 WACA 後台。
      
   5. 進入 HTML 編輯器中，點選「插入/編輯 媒體」。
      
   6. 選擇「嵌入碼」貼上後，並儲存。
      
   7. 確認所插入的影片有完整顯示在編輯器中，這樣就完成囉！
      • 若插入後發現顯示 □，或影片有無法呈現的狀況，請檢查影片網址是否有完整複製。

• • 嵌入 Instagram 貼文

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

複製內嵌程式碼。

回到後台，點選編輯器上IG的小圖示，在編輯視窗中，貼上剛剛複製的內嵌程式碼，點選「確定」，貼文就會出現在編輯器中，再點選「儲存」後，就能在商店前台文章中看到內嵌的IG貼文囉！

• • 自行編寫 html tag

需要注意以下幾點：

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

• 其它功能

* 使用時機

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

* 使用方式

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

* 使用時機 

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

* 使用方式 

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

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

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

* 使用時機

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

* 使用方式

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