您可以使用 Shopify 的富文本編輯器來對您在線商店上顯示的內容進行格式和樣式設置。
提示:在使用富文本編輯器時,按 enter 或 return 可以創建新的段落。若要插入換行符而不強制產生新段落,請按住 shift,然后按 enter 或 return。
您可以使用富文本編輯器來添加或編輯您商店上多個位置中的文本:
產品描述 產品系列描述 博客文章 頁面 商店政策如果您使用的是 Online Store 2.0 模板,則可以使用模板編輯器向頁面或模板中添加富文本分區。
可以使用富文本編輯器為您的博客文章、頁面、產品描述和產品系列描述輸入 HTML 內容。
點擊 </> 顯示 HTML 按鈕以在富文本編輯器中查看內容的 HTML 代碼。
在 HTML 視圖中,您可以在富文本編輯器中對內容進行許多更改。您可以使用 HTML 添加圖片、視頻或表格,還可以調試或微調布局和內容樣式。
嵌入媒體小組件如果您要嵌入視頻或音樂小組件,那么您首先需要將小組件托管在 YouTube、Vimeo 或 SoundCloud 等服務上。這些服務會生成嵌入代碼,您可將該代碼復制并粘貼到 Shopify 后臺的富文本編輯器中。
找到您想嵌入的媒體文件的嵌入代碼。
點擊嵌入代碼并按 ctrl + A (PC) 或 command + A (Mac) 來選擇整個嵌入代碼。
通過按 ctrl + C (PC) 或 command + C (Mac) 以復制嵌入代碼。
在 Shopify 后臺中,點擊富文本編輯器上的顯示 HTML 按鈕以查看您正在編輯的內容。
通過按 ctrl + V (PC) 或 command + V (Mac) 粘貼嵌入代碼。
單擊保存。
通過格式設置按鈕,您可以快速創建段落、標題或塊引用。使用正確的格式設置和標題級別有助于他人和搜索引擎閱讀您的網站內容。
若要為文本選擇格式,請突出顯示此文本,然后點擊格式設置按鈕。
格式設置選項段落
標題 (1-6)
塊引用
粗體文本若要將文本設置為粗體,請突出顯示文本并點擊粗體按鈕。
斜體文本若要將文本設置為斜體,請突出顯示文本并點擊斜體按鈕。
為文本添加下劃線若要給文本添加下劃線,請突出顯示文本并點擊下劃線按鈕。
創建項目符號列表若要創建項目符號列表,請點擊項目符號列表按鈕。
可通過鍵入創建第一個項目符號列表項。若要創建新的列表項,請按 enter 或 return 鍵。若要結束使用列表,請按 enter 或 return 鍵兩次。
創建編號列表若要創建編號列表,請點擊編號列表按鈕。
可通過鍵入創建第一個編號列表項。若要創建新的列表項,請按 enter 或 return 鍵。若要結束使用列表,請按 enter 或 return 鍵兩次。
縮進文本縮進段落會在段落左側產生邊距若要縮進段落,請點擊縮進按鈕。
取消縮進文本取消縮進段落會刪除它任何已縮進的邊距。若要取消縮進或“向左縮進”段落,請點擊向左縮進按鈕。
對齊文本若要對齊文本,請選擇文本,點擊對齊方式按鈕,然后選擇左對齊、居中對齊或右對齊。
使用富文本編輯器更改文本顏色
步驟:
突出顯示文本,然后點擊顏色按鈕。
點擊一種顏色或輸入十六進制代碼,即可將突出顯示的文本更改為這種顏色。
更改文本背景色 步驟:突出顯示文本,然后點擊顏色按鈕。
點擊背景選項卡。
點擊一種顏色或輸入十六進制代碼,將突出顯示的文本的背景更改為這種顏色。
若要從文本或圖片中刪除格式設置,請突出顯示內容,然后點擊清除格式按鈕。
可以使用富文本編輯器在您的博客文章、頁面、產品描述和產品系列描述中插入表格。創建表格之后,您可以將文本、圖片,甚至是視頻放入表格中。
在富文本編輯器中,點擊插入表格按鈕。
點擊插入表格以插入表格。這將創建包含一行和一列的表格。
創建表格后,再次點擊插入表格按鈕以修改表格的行和列:
在上方插入行:將光標放在一行中,然后點擊此按鈕在上方插入一個新行。 在下方插入行:將光標放在行中,然后點擊此按鈕在下方插入一個新行。 在之前插入列:將光標放在列中,然后單擊此按鈕在此列之前插入一個新列。 在之后插入列:將光標放在一列中,然后單擊此按鈕在該列之后插入一個新列。 刪除行:將光標放在要刪除的行中,然后點擊此按鈕。 刪除列:將光標放在要刪除的列中,然后單擊此按鈕。 刪除表格:將光標置于表格中的任意位置,然后單擊此按鈕以刪除整個表格。
使用富文本編輯器插入鏈接
您可以使用富文本編輯器在博客文章、頁面、產品描述和產品系列描述中插入鏈接(超鏈接)。您可以添加將客戶引導至您 Shopify 在線商店中的頁面以及其他網站的鏈接。還可以添加打開電子郵件或撥打電話的鏈接以幫助客戶與您聯系。
在鏈接到字段中輸入此鏈接的目標 URL:
若要鏈接到 Shopify 商店之外的外部網站,請輸入 https:// 以及相關網址,例如 https://www.example.com。 若要鏈接到您的 Shopify 在線商店中的頁面,請輸入短 URL,例如 /collections/summer-collection。 若要創建用于打開電子郵件的鏈接,請在此電子郵件地址前輸入 mailto:,例如,mailto:example@example.com。 若要創建用于撥打電話的鏈接,請輸入 tel:,后跟電話號碼,例如 tel:+0-123-456-7890。在鏈接標題框中輸入鏈接的簡短描述。
使用 Open this link in(在其中打開此鏈接)菜單選擇打開鏈接的方式:
同一窗口:此鏈接將在用戶當前的瀏覽器選項卡或窗口中打開。 新窗口:此鏈接將在新的瀏覽器選項卡或窗口中打開。點擊插入鏈接將突出顯示的文本轉換為鏈接。
指向您 Shopify 商店中的頁面的鏈接稱為內部鏈接。您可以使用短 URL 來創建內部鏈接。例如,URL /collections 將指向您商店的產品系列頁面。
若要鏈接到您在線商店的特定頁面(例如產品系列或產品頁面),請使用 URL 格式 /page-type/page-handle。例如,若要鏈接到您創建的名為“Summer Collection”的產品系列,請使用 URL /collections/summer-collection。
若要查看產品、產品系列、頁面或博客的 handle,您可以在 Shopify 后臺訪問它們的主頁,找到搜索引擎產品頁面部分,然后點擊編輯。
指向您 Shopify 商店外部網站的鏈接稱為外部鏈接。需要輸入完整的外部鏈接,并且以 http:// 開頭。
上傳文件后,您可以將此文件鏈接到富文本編輯器中的內容,從而在產品或產品系列描述、網頁或博客文章中提供下載。
URL 需要以 http://cdn.shopify.com/ 開頭。如果看到 http://static.shopify.com,請將它替換為 http://cdn.shopify.com。
步驟:
桌面
在 Shopify 后臺中,轉至內容 > 文件。 復制要鏈接的文件的 URL。 在 Shopify 后臺,點擊要在其中添加文件的產品、產品系列、網頁或博客文章。 在富文本編輯器中,輸入或選擇鏈接文本。 選擇鏈接文本。 點擊插入鏈接 在鏈接到字段中,粘貼您要鏈接的文件的 URL。 單擊插入鏈接。在富文本編輯器中,鏈接的文本顯示為藍色,并帶有下劃線。
iPhone /Android
在 Shopify 應用中,點擊 ... 按鈕,然后點擊設置。 在商店設置部分,點擊文件。 復制要鏈接的文件的 URL。 在 Shopify 后臺,點擊要在其中添加文件的產品、產品系列、網頁或博客文章。 在富文本編輯器中,輸入或選擇鏈接文本。 選擇鏈接文本。 點擊插入鏈接 在鏈接到字段中,粘貼您要鏈接的文件的 URL。 單擊插入鏈接。在富文本編輯器中,鏈接的文本顯示為藍色,并帶有下劃線。
使用富文本編輯器插入圖片
使用富文本編輯器插入圖片的方法分為三種。您可以:
上傳圖片 從您的產品圖片中進行選擇 使用公共圖片 URL。 備注雖然每個產品最多只能有 250 張關聯圖片(包括此產品的所有多屬性),但您可在商店其他部分使用的圖片數量沒有限制。
上傳圖片 步驟:在富文本編輯器中,點擊插入圖片按鈕。
在插入圖片對話框中,點擊已上傳的圖片選項卡。
點擊上傳文件。
從您的計算機中選擇 WebP、HEIC、SVG、GIF、JPEG 或 PNG 圖片文件。
點擊上傳的圖片以選中它。
從尺寸菜單中,選擇圖片的顯示尺寸。可以選擇原始尺寸以在不更改顯示尺寸的情況下插入圖片。
點擊插入圖片,將圖片放入富文本編輯器中。
從產品圖片中進行選擇 步驟:在富文本編輯器中,點擊插入圖片按鈕。
在插入圖片對話框中,點擊產品圖片選項卡。
點擊您要插入的圖片。
從尺寸菜單中,選擇圖片的顯示尺寸。可以選擇原始尺寸以在不更改顯示尺寸的情況下插入圖片。
點擊插入圖片將產品圖片放入富文本編輯器。
使用圖片 URL若要使用公共 URL 插入圖片,請執行以下操作:
在富文本編輯器中,點擊插入圖片按鈕。
在插入圖片對話框中,點擊 URL 選項卡。
輸入圖片文件的可公開訪問 URL。
點擊插入圖片,在富文本編輯器中插入原始大小的圖片。
在將圖片添加到產品描述、產品系列描述、網頁或博客后,您可以將它移動到內容中的其他地點。
步驟: 在 Shopify 后臺中,點擊包含要移動或要對大小進行調整的圖片的產品、產品系列、網頁或博客文章。 在富文本編輯器中,點擊圖片。執行以下任一操作:
若要移動圖片,請點擊圖片并將其拖動到內容區域中的其他地點。 若要調整圖片大小,請點擊并拖動圖片的一角。單擊保存。
您可以在富文本編輯器中更改圖片的大小、文本環繞方式以及對齊方式。您還可以編輯圖片 URL,或者添加或編輯圖片替換文本。
步驟: 在富文本編輯器中雙擊圖片,打開編輯圖片對話框。使用大小和對齊方式選項來編輯圖片:
若要更改圖片的大小,請選擇一個尺寸選項。 若要改善您在線商店的 SEO 和可訪問性,請添加或編輯圖片替代文本。 若要添加間距,請輸入每側所需留出的間距像素數。 若要更改圖片的對齊方式,請從代表左對齊、居中對齊或右對齊的圖標中進行選擇。 若要添加文字環繞方式,請選中 Wrap text around image(文字環繞圖片)。點擊編輯圖片以保存更改。
您可以使用富文本編輯器在博客文章、頁面、產品描述和產品系列描述中插入或嵌入視頻。
如果您想嵌入已創建的視頻,需要先將視頻上傳到視頻流網站,例如 YouTube 或 Vimeo。
YouTube 不允許禁用相關視頻,但您可以指定相關視頻應與剛才播放的視頻來自同一頻道。
步驟: 復制視頻 URL(在 PC 上按 ctrl + C,在 Mac 上按 command + C)。 提示:如果您的模板是 Brooklyn 或 Supply,那么您可以改為從 Youtube 或 Vimeo 復制視頻的嵌入代碼,然后跳到步驟 7。您的模板會自動使嵌入視頻做出響應。
訪問 Embed Responsively。Embed Responsively 工具可為您提供視頻的改進嵌入代碼。
備注
當您豎屏觀看使用 Embed Responsively 代碼嵌入的視頻時,某些 iPhone 機型上可能出現播放問題。
在 Embed Responsively 上,點擊以選擇視頻所在的視頻網站。
將您復制的視頻 URL 粘貼至 Embed Responsively 上的 Page URL(頁面 URL)框中(在 PC 上按 ctrl + V,在 Mac 上按 command + V)。
單擊嵌入。Embed Responsively 將為您創建嵌入代碼。
如果視頻來自 YouTube 并且您只想顯示來自同一 YouTube 頻道中的相關視頻,請在嵌入代碼中找到視頻的 URL。將 ?rel=0 復制并粘貼到引號內的末尾。
復制嵌入代碼框內的所有代碼。
在 Shopify 后臺中,點擊富文本編輯器中的插入視頻按鈕。
將嵌入代碼粘貼到插入視頻對話框中的框內。
點擊插入視頻。
完成后點擊保存將更改保存到正在編輯的項目。
您可以直接從 YouTube 中生成嵌入代碼,但嵌入的視頻不會對不同的屏幕大小做出響應。
您可以使用富文本編輯器在博客文章、頁面、產品描述和產品系列描述中插入或嵌入音頻文件。
步驟: 在 Shopify 后臺,點擊設置,然后點擊文件。 點擊上傳文件,上傳要在商店中插入或嵌入的音頻文件。 從在線商店部分中,為想包含該音頻文件的頁面或博客文章打開富文本編輯器。 復制 <div id="player"><audio controls="controls">,然后將代碼粘貼在富文本編輯器中,以在您的頁面上嵌入音頻播放器。
復制以下代碼:
<source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>在富文本編輯器中,將此代碼粘貼至音頻播放器代碼之后,然后將 https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 替換為您將音頻文件上傳至 Shopify 時為該音頻文件創建的 URL。您隨時都可在文件頁面上找到音頻文件的 URL。
單擊保存。
點擊查看以確保您的音頻文件可正常播放。
提示:您可以直接從 Soundcloud 嵌入音頻文件的代碼,但 Soundcloud 的音頻播放器可能無法在所有設備上都能正常工作。有關詳細信息,請訪問 Soundcloud 的幫助中心。
您可以對不想發布到商店的內部文本使用注釋標記 <!-- 和 -->。
步驟:在富文本編輯器中,點擊顯示 HTML 按鈕。
若要添加內部注釋,請將要隱藏的文本括在 <!-- 和 --> 之中。例如:<!--yourtext-->。
單擊保存。
包含在注釋標記中的 HTML 標記將另存為內部文本。為了使這些 HTML 標記正常工作,您需要刪除其兩邊的注釋標記 <!-- 和 -->。