後台 HTML 編輯器
最後更新 2025-02-12

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

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

目錄
捲軸可上下滑動

 

 

  • HTML 編輯器位置

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

功能 位置
商品登錄 商品列表 ➜ 新增/編輯商品 ➜ 商品說明
商品分類 ➜ 新增/編輯分類 ➜ 分類廣告版位設定 ➜ 分類廣告文字編輯器
商店設定 商店訊息 ➜ 商店介紹 ➜ 關於
商店訊息 ➜ 購物說明 ➜ 付款方式/寄送方式/訂單相關/售後服務/隱私權條款
商家活動
 
促銷活動 ➜ 新增/編輯任選活動 ➜ 任選活動說明
促銷活動 ➜ 新增/編輯紅配綠 ➜ 紅配綠活動說明
組合活動 ➜ 新增/編輯組合活動 ➜ 組合活動說明
現金積點 ➜ 現金積點活動說明
兌換活動 ➜ 兌換活動說明
會員管理 會員等級 ➜ 會員權益說明
文章管理 自訂頁面 ➜ 新增/編輯自訂頁面 ➜ 自訂頁面內容編輯
部落格 ➜ 新增/編輯部落格 ➜ 部落格文章內容編輯

 

 

  • HTML 編輯器主要功能

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

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

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

 

 

    • 插入圖片

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

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

 

 

   

本機上傳

 

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

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

本機上傳流程如下:

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

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

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

 

 

   

網路圖床網址

 

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

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

複製圖片網址方式:

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

插入圖片流程

 
      1. 點擊「」插入圖片按鈕
      2. 開啟插入/編輯圖片介面,貼上圖片網址即可。
      3. 請記得,插入圖片前,必須先將圖片上傳至圖床,並取得圖片的完整網址後(含附檔名),再從編輯器插入圖片網址,最後點擊儲存完成設定。
      • 確認所插入的圖片有完整顯示在編輯器中,這樣就完成囉!
        若插入圖片後畫面顯示 ⊠ 或圖片呈現死圖的情況時,請檢查圖片網址是否有完整複製。
      • Alternative description是當圖片失效時顯示替代文字的設定欄位,可依需求編輯。

 

 

   

FunTo 雲端圖床

 

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


網路開店 Funto雲端圖床

 

 

   

如何讓圖片併排顯示?

 

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

    1. 插入表格
      網路開店 HTML 編輯器 插入表格功能教學
    2. 在表格屬性設定「框線寬度為0」,表格在商店顯示時就不會有框線。
      網路開店 HTML 編輯器 插入表格功能教學
    3. 在表格中點擊滑鼠左鍵,游標停在表格中,接著插入圖片。
      網路開店 HTML 編輯器表格置入圖片
    4. 圖片就會以並排的方式呈現在商店中囉!
      網路開店 HTML 編輯器表格置入圖片

 

 

    • 插入影片

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

 

 

   

一般影片網址

 

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

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

 

 

   

嵌入碼

 

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

    1. 將影片上傳至 youtube
    2. 點擊「分享」
      網路開店 HTML 編輯器置入影片嵌入碼設定
    3. 選擇「嵌入」
      網路開店 HTML 編輯器置入影片嵌入碼設定
    4. Youtube 影片設定
      顯示撥放器控制選項:左下角可以點擊連結至 Youtube 觀看影片。
      📌 有在經營 Youtube 且想推廣頻道的您,可以勾選這個選項,讓消費者至 Youtube 瀏覽更多的商店影片。
      網路開店 youtube 影片設定
      📌 如果想避免消費者
      至 Youtube 觀看影片後,未回到商店下單,建議可以不要勾選此選項喔!
      網路開店 youtube 影片設定
      啟用隱私權加強保護模式:勾選時,只有當消費者在商店中瀏覽影片時,Youtube 才會記錄消費者相關資訊。

      網路開店 youtube 影片設定
      開始處:勾選時,影片會從指定的時間點開始撥放,通常用於影片長度較長,但希望消費者瀏覽的內容位置在影片中間或尾端時,就可以設定消費者撥放時,開始撥放的時間點,讓消費者可以快速觀看到影片重點。
      完成影片設定後,「複製」嵌入程式碼,回貼到 WACA 後台。
      網路開店 youtube 影片設定
    5. 進入 HTML 編輯器中,點選「插入/編輯 媒體」。
      網路開店 HTML 編輯器置入影片方式
    6. 選擇「嵌入碼」貼上後,並儲存。
      網路開店 HTML 編輯器置入影片方式
    7. 確認所插入的影片有完整顯示在編輯器中,這樣就完成囉!
      • 若插入後發現顯示 □,或影片有無法呈現的狀況,請檢查影片網址是否有完整複製。

 

 

    • 嵌入 Instagram 貼文

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

複製內嵌程式碼。
網路開店 HTML編輯器 嵌入Instagram貼文

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

 

 

    • 自行編寫 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編輯器跑版情況調整說明

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

   

智慧斷行

 

* 使用時機

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

* 使用方式

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

 

WACA 電商充電站