使用 RTF 文字編輯器編輯內容

您可以使用 Shopify 的 RTF 文字編輯器來修改線上商店中所顯示內容的格式和樣式。

使用 RTF 文字編輯器的位置

您可以使用 RTF 文字編輯器來在商店上的許多地方新增或編輯文字:

若您使用 Online Store 2.0 佈景主題,可以使用佈景主題編輯器為頁面或範本新增 RTF 文字區段。

使用 RTF 文字編輯器新增 HTML 內容

您可以使用 RTF 文字編輯器,為部落格貼文、頁面、商品說明和商品系列說明輸入 HTML 內容。

點擊 </>顯示 HTML」按鈕,檢視 RTF 文字編輯器中內容的 HTML 程式碼。

在 HTML 檢視畫面中,您可以對 RTF 文字編輯器中的內容做任何變更。您可以使用 HTML 新增圖片、影片或表格,也可以對版面配置和內容樣式進行除錯或微調。

嵌入媒體小工具

若要嵌入影片或音樂小工具,您需要先將其託管於 YoutubeVimeoSoundCloud 等這類服務。這些服務會產生內嵌程式碼,您可以複製並貼上至 Shopify 管理員的 RTF 文字編輯器中。

步驟:

  1. 找到欲嵌入媒體的嵌入程式碼

  2. 按一下程式碼並按 ctrl + A (PC) 或 command + A (Mac),選取整段嵌入程式碼。

  3. ctrl + C (PC) 或 command + C (Mac),複製內嵌程式碼。

  4. 在 Shopify 管理介面,於 RTF 文字編輯器內對編輯中的內容按一下「顯示 HTML」按鈕。

  5. ctrl + V (PC) 或 command + V (Mac),貼上內嵌程式碼。

  6. 點擊「儲存」。

使用 RTF 文字編輯器修改文字格式

您可以使用「格式」按鈕快速建立段落、標題或區塊引用。使用正確的格式和標題層級,可協助使用者及搜尋引擎閱讀及讀取您網站的內容。

若要選擇文字格式,請反白選取文字,然後點擊「格式」按鈕。

格式選項

  • 段落

  • 標題 (1-6)

  • 區塊引用

粗體文字

若要將文字設為粗體,請反白選取文字,然後點擊「粗體」按鈕。

斜體文字

若要將文字設為斜體,請反白選取文字,然後點擊「斜體」按鈕。

為文字加上底線

若要為文字加上底線,請反白選取文字,然後點擊「底線」按鈕。

建立分項清單

若要建立分項清單,請點擊「分項清單」按鈕。

您可以輸入內容以建立第一筆分項清單項目。若要建立新清單項目,請按 enterreturn 鍵。若要完成清單,請按兩下 enterreturn 鍵。

建立編號清單

若要建立編號清單,請點擊「編號清單」按鈕。

您可以輸入內容以建立第一筆編號清單項目。若要建立新清單項目,請按 enterreturn 鍵。若要完成清單,請按兩下 enterreturn 鍵。

將文字縮排

將段落縮排會在其左側產生一段邊界。若要將段落縮排,請點擊「縮排」按鈕。

將文字取消縮排

將段落取消縮排會移除原來任何已縮排的邊界。若要將段落取消縮排或「凸排」,請點擊「凸排」按鈕。

對齊文字

若要對齊文字,請選取文字,點擊「對齊方式」按鈕,然後選擇「靠左對齊」、「置中對齊」或「靠右對齊」。

使用 RTF 文字編輯器變更文字顏色

步驟:

  1. 反白選取文字,然後點擊「顏色」按鈕。

  2. 點擊顏色或輸入顏色代碼以將反白文字變更為該顏色。

變更文字背景顏色

步驟:

  1. 反白選取文字,然後點擊「顏色」按鈕。

  2. 點擊「背景」分頁。

  3. 點擊顏色或輸入顏色代碼以將反白文字的背景變更為該顏色。

在 RTF 文字編輯器中清除格式

若要移除文字或圖片的格式,請反白選取內容,再點擊「清除格式」按鈕。

使用 RTF 文字編輯器插入表格

您可以使用 RTF 文字編輯器,在部落格貼文、頁面、商品說明和商品系列說明中插入表格。建立表格後,您可以將文字、圖片甚至是影片新增至表格中。

步驟:

  1. 在 RTF 文字編輯器中,點擊「插入表格」按鈕。

  2. 點擊「插入表格」以插入表格。此操作會建立含有一列和一欄的表格。

建立表格後,請再點擊「插入表格」按鈕來修改表格的列和欄:

  • 插入上方列」:將游標放在某列中,再按一下此按鈕來在上方插入新的一列。
  • 插入下方列」:將游標放在某列中,再按一下此按鈕來在下方插入新的一列。
  • 插入前方欄」:將游標放在某欄中,再按一下此按鈕來在該欄前方插入新的一欄。
  • 插入後方欄」:將游標放在某欄中,再按一下此按鈕來在該欄後方插入新的一欄。
  • 刪除列」:將游標放在您要刪除的列中,然後按一下此按鈕。
  • 刪除欄」:將游標放在您要刪除的欄中,然後按一下此按鈕。
  • 刪除表格」:將游標放在表格中的任意位置,然後按一下此按鈕來刪除整個表格。

使用 RTF 文字編輯器插入連結

您可以使用 RTF 文字編輯器在部落格貼文、頁面、商品說明和商品系列說明中插入連結 (超連結)。您可以新增連結,將客戶導向至 Shopify 線上商店和其他網站中的頁面。您也可以新增用來開啟電子郵件訊息或撥打電話的連結,協助客戶與您聯絡。

步驟:

  1. 反白選取要轉換成連結的文字或圖片。
  2. 按一下「插入連結」。
  3. 在「連結至」欄位中,輸入連結的目的地 URL:

    • 若要連結至 Shopify 商店以外的外部網站,請輸入 https:// 後面再接著網址,例如 https://www.example.com
    • 若要連結至 Shopify 線上商店中的頁面,請輸入短 URL,例如 /collections/summer-collection
    • 若要建立用於開啟電子郵件訊息的連結,請輸入 mailto: 並接著電子郵件地址,例如 mailto:example@example.com
    • 若要建立用於撥打電話的連結,請輸入 tel: 並接著電話號碼,例如 tel:+0-123-456-7890
  4. 在「連結標題」方塊中,輸入連結的簡短說明。

  5. 使用「在以下位置開啟此連結」選單,選擇開啟連結的方式:

    • 相同視窗」:連結會在使用者現在使用的瀏覽器分頁或視窗中開啟。
    • 新視窗」:連結會在新的瀏覽器分頁或視窗中開啟。
  6. 按一下「插入連結」,即可反白的文字轉換為連結。

使用 RTF 文字編輯器新增內部和外部連結

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

若要連結至您線上商店的特定頁面 (例如某商品系列或商品頁面),請使用以下 URL 格式:/page-type/page-handle。例如,若要連結至您所建立的「夏季商品系列」,請使用以下 URL:/collections/summer-collection

Shopify 商店之外網站的連結稱為外部連結。外部連結需完整輸入,且開頭需為 http://

頁面內容中的檔案連結

上傳檔案之後,您可以將其連結至 RTF 文字編輯器中的內容,以便讓使用者從商品或商品系列說明、網頁或網誌文章中下載該檔案。

步驟:

使用 RTF 文字編輯器插入圖片

使用 RTF 文字編輯器插入圖片的方式有三種,您可以:

上傳圖片

步驟:

  1. 在 RTF 文字編輯器中,點擊「插入圖片」按鈕。

  2. 在「插入圖片」對話方塊中,按一下「已上傳的圖片」索引標籤。

  3. 按一下「上傳檔案」

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

  5. 點擊已上傳的圖片來選取。

  6. 在「尺寸」選單中,選取圖片的顯示大小。您可以選擇「原始」,插入原始圖片而不變更其顯示大小。

  7. 按一下「插入圖片」,將圖片放入 RTF 文字編輯器中。

從產品圖片中選擇

步驟:

  1. 在 RTF 文字編輯器中,點擊「插入圖片」按鈕。

  2. 在「插入圖片」對話方塊中,按一下「產品圖片」索引標籤。

  3. 點擊您要插入的圖片。

  4. 在「尺寸」選單中,選取圖片的顯示大小。您可以選擇「原始」,插入原始圖片而不變更其顯示大小。

  5. 按一下「插入圖片」,將產品圖片放入 RTF 文字編輯器中。

使用圖片 URL

使用公開 URL 插入圖片的方式:

  1. 在 RTF 文字編輯器中,點擊「插入圖片」按鈕。

  2. 在「插入圖片」對話方塊中,按一下「URL」索引標籤。

  3. 輸入開放給大眾使用的圖片檔案網址。

  4. 按一下「插入圖片」,將圖片以原始大小插入 RTF 文字編輯器中。

在 RTF 文字編輯器中移動圖片和調整大小

將圖片新增到商品或商品系列說明、網頁或部落格中之後,您可以將該圖片移動到內容中的其他位置。

步驟:

  1. 在 Shopify 管理介面,按一下包含您想移動或調整大小的圖片之商品、商品系列、網頁或部落格貼文。
  2. 在 RTF 文字編輯器中按一下圖片。
  3. 請執行以下任一操作:

    • 若要移動圖片,請按一下並拖曳至「內容」欄位中的其他位置。
    • 若要調整圖片大小,請按一下並拖曳任一角。
  4. 點擊「儲存」。

在 RTF 文字編輯器中編輯圖片

您可以在 RTF 文字編輯器中變更圖片的大小、文字換行和對齊方式。您也可以編輯圖片 URL,或是新增或編輯圖片替代文字。

步驟:

  1. 在 RTF 文字編輯器中按兩下圖片,開啟「編輯圖片」對話方塊。
  2. 使用大小和對齊選項編輯圖片:

    • 若要變更圖片大小,請選擇大小選項。
    • 若要改善線上商店的 SEO 和可及性,請新增或編輯圖片替代文字。
    • 若要新增間距,請輸入兩側所需的間距像素。
    • 若要變更圖片的對齊方式,請選擇代表靠左、置中對齊的圖示。
    • 若要新增文字換行,請勾選「讓文字包圍圖片」。
  3. 按一下「編輯圖片」以儲存您的變更內容。

使用 RTF 文字編輯器插入影片

您可以使用 RTF 文字編輯器在部落格貼文、頁面、商品說明和商品系列說明中插入或嵌入影片。

若要嵌入您製作的影片,首先您需要將影片上傳至影片串流網站,例如 YouTubeVimeo

YouTube 不允許您停用相關影片功能,但您可以特別指定相關影片應與剛才播放的影片來自相同的頻道。

步驟:

  1. ctrl + C (PC) 或 command + C (Mac) 以複製影片 URL。
  1. 造訪 Embed Responsively。Embed Responsively 是可改善影片內嵌程式碼的工具。
  1. 在 Embed Responsively 上,按一下以選擇影片所在的影片網站。

  2. 在 Embed Responsively 上,按 ctrl + V (PC) 或 command + V (Mac),將您複製的影片 URL 貼到「頁面 URL」方塊中。

  3. 按一下「嵌入」,Embed Responsively 隨即會為您建立內嵌程式碼。

  4. 如果該影片位於 YouTube 上,且您僅希望只顯示來自同一個 YouTube 頻道的相關影片,請在內嵌程式碼中找到影片的網址。複製 ?rel=0 並在末端引號中間貼上。

  5. 複製「嵌入程式碼」方塊中的所有程式碼。

  6. 在 Shopify 管理介面,點擊 RTF 文字編輯器中的「插入影片」按鈕。

  7. 在「插入影片」對話方塊裡的方塊中,貼上嵌入程式碼。

  8. 按一下「插入影片」。

  9. 完成時請按一下「儲存」,將您所做的變更儲存至編輯中的項目。

使用 RTF 文字編輯器插入音訊檔案

您可以使用 RTF 文字編輯器在部落格貼文、頁面、商品說明和商品系列說明中插入或嵌入音訊檔案。

步驟:

  1. 在 Shopify 管理介面 按一下「設定」,然後按一下「檔案」。
  2. 按一下「上傳檔案」,上傳您想插入或嵌入商店中的音訊檔案。
  3. 在「線上商店」區段中,針對要使用該音訊檔案的頁面或部落格貼文開啟 RTF 文字編輯器。
  4. 複製 <div id="player"><audio controls="controls">,然後在 RTF 文字編輯器中貼上這段程式碼,即可將音訊播放器嵌入您的頁面上。
  5. 複製以下程式碼:

    • <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>
  6. 在 RTF 文字編輯器中,將這段程式碼貼在音訊播放器的程式碼後面,然後用您將音訊檔案上傳至 Shopify 時為其建立的 URL 取代 https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3。您可以隨時前往「檔案」頁面,取得音訊檔案的 URL。

  7. 點擊「儲存」。

  8. 按一下「檢視」,確認您的音訊檔案可正常播放。

使用 RTF 文字編輯器新增或移除內部註解

您可以針對您不想發布至商店的內部文字使用 <!----> 註解標記。

步驟:

  1. 在 RTF 文字編輯器中,按一下「顯示 HTML」按鈕。

  2. 若要新增內部註解,請將要隱藏的文字括在 <!----> 內。例如:<!--yourtext-->

  3. 點擊「儲存」。

註解標記中包含的 HTML 標記將另存為內部文字。若要讓這些 HTML 標記正常運作,您需要移除註解標記旁的 <!---->

準備好開始透過 Shopify 銷售商品了嗎?

免費試用