說明
登入

使用富文本編輯器編輯內容

您可以使用 Shopify 的富文本編輯器，為顯示在網路商店的內容設定格式與樣式。

本頁內容

可在哪裡使用富文本編輯器

您可以在商店的多個位置使用富文本編輯器新增或編輯文字：

如果您使用 相容的佈景主題，即可透過 佈景主題編輯器，在頁面或範本中新增 富文本區段。

使用富文本編輯器新增 HTML 內容

您可以使用富文本編輯器，為網誌文章、頁面、產品說明與商品系列說明輸入 HTML 內容。

按一下 編輯程式碼 按鈕，可檢視富文本編輯器中內容的 HTML 程式碼。

在 HTML 檢視中，您可以對富文本編輯器中的內容進行多項變更。您可以使用 HTML 新增圖片、影片或表格，也可以為版面配置與內容樣式進行除錯或微調。

內嵌多媒體小工具

若要內嵌影片或音樂小工具，您需要先將其託管於 Youtube、Vimeo 或 SoundCloud 等服務。這些服務會產生一段內嵌程式碼，您可以將其複製並貼到 Shopify 管理介面的富文本編輯器中。

步驟：

  1. 找出您要內嵌的多媒體的內嵌程式碼。
  2. 按一下該程式碼，然後在 PC 上按 ctrl + A，或在 Mac 上按 command + A，以選取整段內嵌程式碼。
  3. 在 PC 上按 ctrl + C，或在 Mac 上按 command + C，以複製內嵌程式碼。
  4. 在您的 Shopify 管理介面中，於該內容的富文本編輯器按一下 顯示 HTML 按鈕。
  5. 在 PC 上按 ctrl + V，或在 Mac 上按 command + V，將內嵌程式碼貼上。
  6. 按一下 儲存。

使用富文本編輯器設定文字格式

使用 格式 按鈕，您可以快速建立段落、標題或區塊引言。正確使用格式與標題層級，有助於讀者與搜尋引擎閱讀您的網站內容。

若要為文字選擇格式，先反白文字，然後按一下 格式 按鈕。

格式選項

  • 段落

    網站上的大多數內容是段落文字。段落文字通常為 10–12 pt，但有些佈景主題會使用不同的字型大小。

  • 標題 (1–6)

    標題用於結構化內容。共有 6 個標題層級。標題 1 是最重要的層級，標題 6 是最不重要的。

  • 區塊引言

    區塊引言用於顯示出處為他人的文字，例如引述，或書籍、網站的節錄。

粗體文字

若要將文字設為粗體，先反白文字，然後按一下 粗體 按鈕。

將文字設為斜體

若要將文字設為斜體，先反白文字，然後按一下 斜體 按鈕。

為文字加底線

若要加上底線，先反白文字，然後按一下 底線 按鈕。

建立項目符號清單

若要建立項目符號清單，請按一下 項目符號清單 按鈕。

您可以直接輸入，建立第一個項目。若要新增下一個項目，請按 enter 或 return 鍵。若要結束清單，請連按兩次 enter 或 return 鍵。

建立編號清單

若要建立編號清單，請按一下 編號清單 按鈕。

您可以直接輸入，建立第一個項目。若要新增下一個項目，請按 enter 或 return 鍵。若要結束清單，請連按兩次 enter 或 return 鍵。

縮排文字

對段落進行縮排會在左側留出空白。若要縮排段落，請按一下 縮排 按鈕。

取消縮排

取消段落縮排會移除既有的縮排。若要取消或減少縮排，請按一下 減少縮排 按鈕。

對齊文字

若要對齊文字，請先選取文字，按一下 對齊 按鈕，然後選擇 靠左對齊、置中對齊 或 靠右對齊。

變更文字顏色

  1. 反白選取文字，然後按一下 顏色 按鈕。
  2. 按一下顏色，或輸入十六進位色碼，即可將反白文字變更為該顏色。

變更文字背景顏色

  1. 反白選取文字，然後按一下 顏色 按鈕。
  2. 按一下 背景 分頁。
  3. 按一下顏色，或輸入十六進位色碼，即可將反白文字的背景變更為該顏色。

清除富文本編輯器中的格式

若要移除文字或圖片的格式，請先反白選取內容，然後按一下 清除格式 按鈕。

使用富文本編輯器插入表格

您可以使用富文本編輯器，將表格插入網誌文章、頁面、產品說明和商品系列說明中。建立表格後，您可以在表格中放入文字、圖片，甚至是影片。

步驟：

  1. 在富文本編輯器中，按一下 插入表格 按鈕。
  2. 按一下 插入表格 以插入表格。系統會建立只有 1 列 1 欄的表格。

建立表格後，再按一下 插入表格 按鈕即可修改表格的列與欄：

  • 插入上方列：將游標放在某一列，按一下此按鈕即可在其上方插入新列。
  • 插入下方列：將游標放在某一列，按一下此按鈕即可在其下方插入新列。
  • 插入前方欄：將游標放在某一欄，按一下此按鈕即可在該欄之前插入新欄。
  • 插入後方欄：將游標放在某一欄，按一下此按鈕即可在該欄之後插入新欄。
  • 刪除列：將游標放在要刪除的列，然後按一下此按鈕。
  • 刪除欄：將游標放在要刪除的欄，然後按一下此按鈕。
  • 刪除表格：將游標放在表格中的任一位置，然後按一下此按鈕以刪除整個表格。

使用富文本編輯器插入連結

您可以使用富文本編輯器，將連結 (超連結) 插入網誌文章、頁面、產品說明和商品系列說明中。您可以新增連結，導向您的 Shopify 網路商店內部頁面或其他網站。您也可以新增會開啟電子郵件或撥打電話的連結，方便顧客與您聯絡。

步驟：

  1. 反白選取要轉換為連結的文字或圖片。
  2. 按一下 插入連結。
  3. 請在「 連結到 」欄位中輸入該連結的目標網址：
    • 若要連結至您的 Shopify 商店之外的外部網站，請輸入 https://，後接完整網址，例如 https://www.example.com。
    • 若要連結至您的 Shopify 網路商店中的頁面，請輸入短網址，例如 /collections/summer-collection。
    • 若要建立可開啟電子郵件的連結，請輸入 mailto:，後接電子郵件地址，例如 mailto:example@example.com。
    • 若要建立可撥打電話的連結，請輸入 tel:，後接電話號碼，例如 tel:+0-123-456-7890。
  4. 請在 連結標題 欄位輸入連結的簡短說明。
  5. 請在「 開啟連結的位置 」選單中選擇連結的開啟方式：
    • 同一視窗：連結會在使用者現有的瀏覽器分頁或視窗中開啟。
    • 新視窗：連結會在新的瀏覽器分頁或視窗中開啟。
  6. 按一下 插入連結，即可將反白選取的文字轉換為連結。

使用富文本編輯器新增內部與外部連結

指向您的 Shopify 商店內部頁面的連結稱為內部連結。您可以使用短網址來建立內部連結。例如，/collections 這個網址會連到您商店的商品系列頁面。

若要連結至網路商店的特定頁面，例如商品系列頁面或產品頁面，請使用網址格式 /page-type/page-handle。例如，若要連結到您建立、名稱為 Summer Collection 的商品系列，請使用網址 /collections/summer-collection。

指向您的 Shopify 商店以外網站的連結稱為外部連結。外部連結必須輸入完整網址，且以 http:// 開頭。

在 upload a file 後，您可以在富文本編輯器中把它連結到內容，讓顧客可從產品說明或商品系列說明、網頁或網誌文章中下載。

步驟：

電腦版

  1. 在 Shopify 管理介面中，前往 內容 > Files。

  2. 複製您要連結的檔案網址。

  3. 在 Shopify 管理介面中，按一下您要新增檔案的商品、商品系列、網頁或網誌文章。

  4. 在富文本編輯器中，輸入或選擇連結文字。

  5. 選取連結文字。

  6. 按一下 插入連結

  7. 在 連結至 欄位中，貼上您要連結的檔案網址。

  8. 按一下 插入連結。在富文本編輯器中，連結文字會以藍色顯示並加上底線。

行動版

  1. 在 Shopify App 中，點選 Menu 圖示。

  2. 在 內容 選單中，點選 向下箭頭 圖示，然後點選 檔案。

  3. 複製您要連結的檔案網址。

  4. 在 Shopify 管理介面中，點選您要新增檔案的商品、商品系列、網頁或網誌文章。

  5. 在富文本編輯器中，輸入或選擇連結文字。

  6. 選取連結文字。

  7. 點選 插入連結

  8. 在 連結至 欄位中，貼上您要連結的檔案網址。

  9. 點選 插入連結。在富文本編輯器中，連結文字會以藍色顯示並加上底線。

使用富文本編輯器插入圖片

使用富文本編輯器插入圖片有三種方式，您可以：

上傳圖片

步驟：

  1. 在富文本編輯器中，按一下 插入圖片 按鈕。

  2. 在 插入圖片 對話方塊中，按一下 已上傳圖片 分頁。

  3. 按一下 上傳檔案。

  4. 從您的電腦選擇 WebP、HEIC、SVG、GIF、JPEG 或 PNG 圖片檔案。

  5. 按一下您上傳的圖片以選取。

  6. 在 尺寸 選單中，選取圖片的顯示大小。您可以選取 原始大小，以原始顯示大小插入圖片。

  7. 按一下 插入圖片，將圖片放入富文本編輯器。

從產品圖片中選擇

步驟：

  1. 在富文本編輯器中，按一下 插入圖片 按鈕。

  2. 在 插入圖片 對話方塊中，按一下 產品圖片 分頁。

  3. 按一下您要插入的圖片。若找不到要插入的商品多媒體檔案，您可以使用箭頭按鈕瀏覽不同頁面。

  4. 在 尺寸 選單中，選取圖片的顯示大小。您可以選取 原始大小，以原始顯示大小插入圖片。

  1. 按一下 插入圖片，將產品圖片放入富文本編輯器。

使用圖片網址

若要使用公開網址插入圖片：

  1. 在富文本編輯器中，按一下 插入圖片 按鈕。
  2. 在 插入圖片 對話方塊中，按一下 網址 分頁。
  3. 輸入圖片檔案的公開可存取網址。
  4. 按一下 插入圖片，以原始大小將圖片插入富文本編輯器。

在富文本編輯器中移動與調整圖片大小

在產品或商品系列說明、網頁或網誌加入圖片後，您可以將圖片移動到內容中的其他位置。

步驟：

  1. 在 Shopify 管理介面中，按一下包含您要移動或調整大小的圖片的商品、商品系列、網頁或網誌文章。
  2. 在富文本編輯器中，按一下圖片。
  3. 請執行下列其中一項操作：
    • 若要移動圖片，請按住並拖曳到 內容 欄位中的其他位置。
    • 若要調整圖片大小，請按住並拖曳其中一個角。
  4. 按一下 儲存。

在富文本編輯器中編輯圖片

您可以在富文本編輯器中變更圖片的尺寸、文字環繞與對齊方式。您也可以編輯圖片網址，或新增或編輯圖片替代文字。

步驟：

  1. 在富文本編輯器中連按兩下圖片，開啟 編輯圖片 對話方塊。
  2. 使用尺寸與對齊選項來編輯圖片：
    • 若要變更圖片尺寸，請選取尺寸選項。
    • 為提高您的線上店面的搜尋引擎最佳化 (SEO) 與無障礙功能，請新增或編輯圖片替代文字。
    • 若要加入間距，請輸入您希望各邊的空白像素數。
    • 若要變更圖片對齊方式，請選取左、中或右對齊圖示。
    • 若要讓文字環繞圖片，請勾選 文字環繞圖片。
  3. 按一下 編輯圖片 以儲存變更。

使用富文本編輯器插入影片

您可以使用富文本編輯器在網誌文章、頁面、產品說明與商品系列說明中插入或嵌入影片。

若要嵌入您自行製作的影片，必須先將影片上傳至影片串流網站，例如 YouTube 或 Vimeo。

YouTube 不允許您停用相關影片，但您可以指定只顯示與剛播放影片同一頻道的相關影片。

步驟：

  1. 在 PC 上按下 ctrl + C，或在 Mac 上按下 command + C，即可複製影片網址。
  1. 造訪 Embed Responsively。Embed Responsively 是一個工具，可為您的影片產生更佳的內嵌程式碼。
  1. 在 Embed Responsively 上，按一下以選取您的影片所在的網站。
  2. 在 Embed Responsively 的 Page URL 欄位貼上您複製的影片網址：在 PC 上按 ctrl + V，或在 Mac 上按 command + V。
  3. 按一下 Embed。Embed Responsively 會為您產生內嵌程式碼。
  4. 如果影片來自 YouTube，且您只想顯示同一個 YouTube 頻道的相關影片，請在內嵌程式碼中找到影片的網址，並在引號內的結尾加上 ?rel=0。
  5. 複製 Embed code 方塊中的所有程式碼。
  6. 在您的 Shopify 管理介面中，於富文本編輯器按一下 插入影片 按鈕。
  7. 將內嵌程式碼貼上到 插入影片 對話方塊中的欄位。
  8. 按一下 插入影片。
  9. 完成後，按一下 儲存，將變更儲存到您正在編輯的項目。

使用富文本編輯器插入音訊檔案

您可以使用富文本編輯器，將音訊檔案插入或嵌入至網誌文章、頁面、產品說明與商品系列說明中。

步驟：

  1. 在 Shopify 管理介面中，前往 內容 > Files。

  2. 按一下 上傳檔案，上傳您要在商店中插入或嵌入的音訊檔案。

  3. 在 線上商店 區段中，開啟您要顯示音訊檔案的頁面或網誌文章的富文本編輯器。

  4. 複製 <div id="player"><audio controls="controls">，然後將該程式碼貼到富文本編輯器，便可在頁面嵌入音訊播放器。

  5. 複製下列程式碼：

  • <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>
  1. 將這段程式碼貼在富文本編輯器中，放在音訊播放器程式碼的後面，然後把 https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 替換成您上傳到 Shopify 時為音訊檔案建立的網址。您隨時都可以在 檔案 頁面找到音訊檔案的網址。
  2. 按一下 儲存。
  3. 按一下 檢視，確認音訊檔案能正常播放。

在富文本編輯器中新增或移除內部註解

若有不想發佈到商店的內部文字，您可以使用註解標籤 <!-- 與 -->。

步驟：

  1. 在富文本編輯器中，按一下 顯示 HTML 按鈕。
  2. 若要新增內部註解，請將想要隱藏的文字置於 <!-- 與 --> 之間。例如：<!--yourtext-->。
  3. 按一下 儲存。

包在註解標籤內的 HTML 標籤會以內部文字的形式儲存。若要讓這些 HTML 標籤正常運作，您需要移除其外層的註解標籤 <!-- 與 -->。

瞭解富文本編輯器

富文本編輯器已與 TinyMCE 整合，TinyMCE 是第三方內容傳遞網路 (CDN)。這項整合有幾點重要注意事項：

  • 內容上限：輸入到富文本編輯器的內容有 64 KB 的硬性上限。此限制適用於頁面、部落格貼文，以及額外的指令碼。
  • HTML 清理：TinyMCE 會提供內容過濾邏輯，自動修正 HTML 格式，以避免線上店面發生故障與安全風險。雖然您可以手動將 HTML 調整回原始樣貌，但建議配合這些自動調整，以降低潛在問題。

富文本編輯器疑難排解

如果您在使用富文本編輯器時遇到問題，請參考以下的疑難排解步驟與常見問題。

針對格式問題進行疑難排解

複製內容造成的格式問題

文字會沿用其來源編輯器或網頁的格式。如果您在 Microsoft Word 撰寫內容，接著複製並貼到富文本編輯器中，系統會保留相同的顏色、大小、縮排與間距，甚至包含 <div> 標籤。

若情況允許，請直接在富文本編輯器中編輯與設定格式。

若頁面版面配置較複雜，可考慮使用頁面建立工具 app，例如 Shogun Drag & Drop Page Builder。

識別格式問題

富文本編輯器最常見的問題成因，是從其他來源複製貼上內容時，一併帶入的內嵌樣式或格式。

表現形式可能不同，但若 Shopify 管理介面與您的線上商店實際顯示內容有任何差異，通常就是由此造成，例如資訊未更新或樣式呈現不同。

針對格式問題進行疑難排解

有兩種方式可測試是否為格式問題所致：使用 清除格式 按鈕，或將富文本編輯器的內容丟進 HTML 清除工具。

要進行測試，請先建立發生問題之商品或頁面的副本，然後在該副本上執行以下任一測試。

測試 1：清除格式

  1. 在富文本編輯器中全選所有內容。
  2. 按一下 清除格式 按鈕。
  3. 按一下 儲存 並進行測試。

測試 2：HTML 清除工具

  1. 從富文本編輯器複製所有內容。
  2. 將其貼到 HTML 清除工具，例如 striphtml.com。
  3. 複製所有已清除格式的內容。
  4. 再貼回富文本編輯器，取代原始內容。
  5. 按一下 儲存 並進行測試。

如果上述任一步驟能解決問題，則表示問題源自最初將內容加入富文本編輯器時一併帶入的格式。您可以用相同的方法修正原始內容。

排解圖片對齊不正確的程式碼問題

若您使用文字環繞選項時，無法讓文字在圖片旁正確對齊，您可能需要調整程式碼，讓圖片標籤出現在段落開頭，而不是中間。

  1. 在富文本編輯器中按一下「編輯程式碼」按鈕。
  2. 找到圖片的程式碼，將整個 <img> 標籤移到段落最上方，放在 <p> 段落標籤之外。
  3. 移除圖片下方後續段落中的任何 <span> 標籤。
  4. 按一下儲存。

圖片對齊不正確的程式碼範例：

<p style="float: left;"><br/><img alt="" src="your image link" style="float: left; margin-right: 20px;">This 22x34 special purchase frame...</p>

修正後的程式碼：

<img alt="" src="your image link" style="margin-right: 20px; float: left;">
<p>This 22x34 special purchase frame...</p>
排解 mailto 連結無法運作的問題

如果 mailto: 連結無法運作 (載入空白頁或無法開啟電子郵件)，請確認連結是否符合以下格式：

mailto:email@example.com

若格式正確但仍無法如預期運作，可能是瀏覽器或電子郵件用戶端的設定問題。請檢查您的瀏覽器與電子郵件用戶端的設定，確保其已正確設定為可處理 mailto: 連結。

排解頁面圖片調整大小後又恢復原尺寸的問題

將圖片插入頁面時，產生的 HTML 會同時包含 src 參數與 data-mce-src 參數。若兩者不相符，src 最終會被更新為與 data-mce-src 一致。

不過，您使用富文本編輯器調整圖片大小時，只有 src 會更新，data-mce-src 仍為原始尺寸的網址。再點擊幾下後，src 會還原成 data-mce-src 的網址。

為避免此問題，請手動更新 data-mce-src 的網址，使其符合您設定的圖片尺寸：

  1. 在富文本編輯器中按一下「編輯程式碼」按鈕。
  2. 找出您調整過大小的圖片標籤。
  3. 找到 src 與 data-mce-src 兩個參數。
  4. 將 data-mce-src 的網址更新為與 src 的網址相同。
  5. 按一下儲存。
排解 HTML 自動變更 (淨化) 問題

您可能會發現，當您在富文本編輯器中變更內容時，系統會自動修改對應的 HTML。

為什麼會這樣？

Shopify 的富文本編輯器整合了 TinyMCE，一個第三方內容傳遞網路 (CDN)。此 CDN 提供廣泛且可靠的 content filtering 邏輯，能自動更正可能在線上店面發生故障或帶來安全風險的 HTML 格式。此程序稱為 HTML sanitization。

我該怎麼做？

雖然您可以手動編輯 HTML，繞過內容篩選邏輯、還原到原本的寫法，但建議您遵循自動變更。這些自動更正屬於預期行為，且可避免對您的線上店面造成問題的變更。

若您嘗試透過撰寫會被 CDN 更正的 HTML 來達成特定目的，請考量是否有更理想的方式，例如在佈景主題的程式碼中做調整，以支援預期的 HTML 格式。

排解連結將顧客導出其所選市場的問題

如果您搭配子資料夾與 Geolocation app 使用 Shopify Markets，則產品說明、網誌文章、頁面與商品系列說明中的連結，可能會把顧客重新導向至您的主要網域，而非維持在其所選地區。

為什麼會這樣？

富文本編輯器同時支援直接連結 (完整網址) 與內部連結 (短網址)。若您使用包含完整網址的直接連結 (例如：https://yourstore.com/collections/summer)，顧客將會被導向該特定網址，而不會保留其所選的市場。

如何修正

為確保連結能辨識地區並讓顧客維持在其所選市場，請改用以 / 開頭的內部連結，而非完整網址。

  • 直接連結 (不會辨識地區)：https://yourstore.com/collections/summer
  • 內部連結 (可辨識地區)：/collections/summer

更新現有連結：

  1. 在 Shopify 管理介面中，前往您要更新連結的商品、商品系列、頁面或網誌文章。
  2. 在富文本編輯器中，按一下編輯程式碼按鈕以檢視 HTML。
  3. 找出所有以 https:// 開頭且包含您商店網域的連結。
  4. 將完整網址替換為短網址格式。例如，將 https://yourstore.com/pages/about 改為 /pages/about。
  5. 按一下儲存。

如果您需要更新大量商品、商品系列、網誌或頁面，您可以 export them to CSV files，搜尋您的網域或 http 以找出直接連結，將其更新為內部連結，再將更新後的 CSV 檔案匯回商店。