Shopify富文本编辑器

Shopify 的富文本编辑器是Shopify后台生产力工具，用来对在线商店上显示的内容进行格式和样式设置。在使用富文本编辑器时，按 enter 或 return 可以创建新的段落。若要插入换行符而不强制产生新段落，请按住 shift，然后按 enter 或 return。

一、适用位置

可以使用富文本编辑器来添加或编辑商店上多个位置中的文本：

• 产品描述；
• 产品系列描述；
• 博客文章；
• 页面；
• 商店政策。

如果使用的是 Online Store 2.0 模板，则可以使用模板编辑器向页面或模板中添加富文本分区。

二、添加HTML

使用富文本编辑器可以为博客文章、页面、产品描述和产品系列描述输入 HTML 内容。点击 </> 显示 HTML 按钮以在富文本编辑器中查看内容的 HTML 代码。在 HTML 视图中，可以在富文本编辑器中对内容进行许多更改。可以使用 HTML 添加图片、视频或表格，还可以调试或微调布局和内容样式。

1、嵌入媒体小组件

如果要嵌入视频或音乐小组件，那么首先需要将小组件托管在 YouTube、Vimeo 或 SoundCloud 等服务上。这些服务会生成嵌入代码，可将该代码复制并粘贴到 Shopify 后台的富文本编辑器中。

设置步骤：

• 找到想嵌入的媒体文件的嵌入代码；
• 点击【嵌入代码】并按 ctrl + A (PC) 或 command + A (Mac) 来选择整个嵌入代码；
• 通过按 ctrl + C (PC) 或 command + C (Mac) 以复制嵌入代码；
• 在 Shopify 后台中，点击富文本编辑器上的显示 HTML 按钮以查看正在编辑的内容；
• 通过按 ctrl + V (PC) 或 command + V (Mac) 粘贴嵌入代码；
• 单击【保存】。

三、设置文本格式

Shopify 富文本编辑器通过格式设置按钮可以快速创建段落、标题或块引用，使用正确的格式设置和标题级别有助于网站搜索引擎优化。

若要为文本选择格式，请突出显示此文本，然后点击【格式设置】按钮。

格式设置选项如下：

• 段落；
• 标题 (1-6)；
• 块引用。

1、粗体文本

选中显示文本并点击粗体按钮。

2、斜体文本

选中显示文本并点击斜体按钮。

3、为文本添加下划线

选中显示文本并点击下划线按钮。

4、创建项目符号列表

若要创建项目符号列表，请点击项目符号列表按钮。

可通过键入创建第一个项目符号列表项。若要创建新的列表项，请按 enter 或 return 键。若要结束使用列表，请按 两次enter 或 return 键。

5、创建编号列表

若要创建编号列表，请点击【编号列表】按钮。

可通过键入创建第一个编号列表项。若要创建新的列表项，请按 enter 或 return 键。若要结束使用列表，请按 enter 或 return 键两次。

6、缩进文本

缩进段落会在段落左侧产生边距若要缩进段落，请点击【缩进】按钮。

7、取消缩进文本

取消缩进段落会删除它任何已缩进的边距。若要取消缩进或“向左缩进”段落，请点击向左缩进按钮。

8、对齐文本

若要对齐文本，请选择文本，点击对齐方式按钮，然后选择左对齐、居中对齐或右对齐。

四、更改文本颜色

使用富文本编辑器更改文本颜色步骤如下：

• 突出显示文本，然后点击【颜色】按钮；
• 点击任意一种颜色或输入十六进制代码，即可将突出显示的文本更改为这种颜色。

1、更改文本背景色

使用富文本编辑器更改文本背景色步骤如下：

• 突出显示文本，然后点击【颜色】按钮；
• 点击【背景】选项卡；
• 接着点击一种颜色或输入十六进制代码，将突出显示的文本的背景更改为这种颜色。

五、清除格式

若要在富文本编辑器中删除格式设置，请突出显示内容，然后点击【清除格式】按钮。

六、插入表格

使用富文本编辑器可以在博客文章、页面、产品描述和产品系列描述中插入表格，还可以将文本、图片，甚至是视频放入表格中。

设置步骤：

• 在富文本编辑器中，点击【插入表格】按钮；
• 点击插入表格以插入表格。这将创建包含一行和一列的表格。
• 创建表格后，再次点击【插入表格】按钮以修改表格的行和列：
• 在上方插入行：将光标放在一行中，然后点击此按钮在上方插入一个新行；
• 在下方插入行：将光标放在行中，然后点击此按钮在下方插入一个新行；
• 在之前插入列：将光标放在列中，然后单击此按钮在此列之前插入一个新列；
• 在之后插入列：将光标放在一列中，然后单击此按钮在该列之后插入一个新列；
• 删除行：将光标放在要删除的行中，然后点击此按钮；
• 删除列：将光标放在要删除的列中，然后单击此按钮；
• 删除表格：将光标置于表格中的任意位置，然后单击此按钮以删除整个表格。

七、插入链接

使用富文本编辑器在博客文章、页面、产品描述和产品系列描述中插入链接（超链接），还可以添加将客户引导至 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、使用 Open this link in（在其中打开此链接）菜单选择打开链接的方式：

• 同一窗口：此链接将在用户当前的浏览器选项卡或窗口中打开；
• 新窗口：此链接将在新的浏览器选项卡或窗口中打开。

6、点击【插入链接】将突出显示的文本转换为链接。

八、添加内部和外部链接

指向 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。

链接到页面内容中的文件步骤：

1、桌面

• 在 Shopify 后台中，转至内容 > 文件；
• 复制要链接的文件的 URL；
• 在 Shopify 后台，点击要在其中添加文件的产品、产品系列、网页或博客文章；
• 在富文本编辑器中，输入或选择链接文本
• 选择链接文本；
• 点击【插入链接】；
• 在链接到字段中，粘贴要链接的文件的 URL；
• 单击【插入链接】。在富文本编辑器中，链接的文本显示为蓝色，并带有下划线。

2、iPhone

• 在 Shopify 应用中，点击 【...】 按钮，然后点击【设置】；
• 在商店设置部分，点击【文件】；
• 复制要链接的文件的 URL；
• 在 Shopify 后台，点击要在其中添加文件的产品、产品系列、网页或博客文章；
• 在富文本编辑器中，输入或选择链接文本；
• 选择链接文本；
• 点击【插入链接】；
• 在链接到字段中，粘贴要链接的文件的 URL；
• 单击【插入链接】。在富文本编辑器中，链接的文本显示为蓝色，并带有下划线。

3、Android

• 在 Shopify 应用中，点击 【...】 按钮，然后点击【设置】；
• 在商店设置部分，点击【文件】；
• 复制要链接的文件的 URL；
• 在 Shopify 后台，点击要在其中添加文件的产品、产品系列、网页或博客文章；
• 在富文本编辑器中，输入或选择链接文本；
• 选择链接文本；
• 点击【插入链接】；
• 在链接到字段中，粘贴要链接的文件的 URL；
• 单击【插入链接】。在富文本编辑器中，链接的文本显示为蓝色，并带有下划线。

十、插入图片

使用富文本编辑器插入图片的方法分为三种。可以：

• 上传图片；
• 从产品图片中进行选择；
• 使用公共图片 URL。

虽然每个产品最多只能有 250 张关联图片（包括此产品的所有多属性），但可在商店其他部分使用的图片数量没有限制。

1、上传图片

• 在富文本编辑器中，点击【插入图片】按钮；
• 在插入图片对话框中，点击【已上传的图片】选项卡；
• 点击【上传文件】；
• 从计算机中选择 WebP、HEIC、SVG、GIF、JPEG 或 PNG 图片文件；
• 点击上传的图片以选中它；
• 从尺寸菜单中，选择图片的显示尺寸。可以选择原始尺寸以在不更改显示尺寸的情况下插入图片；
• 点击【插入图片】，将图片放入富文本编辑器中。

2、从产品图片中进行选择

• 在富文本编辑器中，点击【插入图片】按钮；
• 在插入图片对话框中，点击【产品图片】选项卡；
• 点击要插入的图片；
• 从尺寸菜单中，选择图片的显示尺寸。可以选择原始尺寸以在不更改显示尺寸的情况下插入图片；
• 点击【插入图片】将产品图片放入富文本编辑器。

3、使用图片 URL

若要使用公共 URL 插入图片，请执行以下操作：

• 在富文本编辑器中，点击【插入图片】按钮；
• 在【插入图片】对话框中，点击【URL】选项卡；
• 输入图片文件的可公开访问 URL；
• 点击【插入图片】，在富文本编辑器中插入原始大小的图片。

十一、移动图片并调整大小

在富文本编辑器中将图片添加到产品描述、产品系列描述、网页或博客后，可以将它移动到内容中的其他地点。

设置步骤：

1、在 Shopify 后台中，点击包含要移动或要对大小进行调整的图片的产品、产品系列、网页或博客文章；

2、在富文本编辑器中，点击图片；

3、执行以下任一操作：

• 若要移动图片，请点击图片并将其拖动到内容区域中的其他地点；
• 若要调整图片大小，请点击并拖动图片的一角。

4、单击【保存】。

十二、编辑图片

可以在富文本编辑器中更改图片的大小、文本环绕方式以及对齐方式。还可以编辑图片 URL，或者添加或编辑图片替换文本。

1、在富文本编辑器中双击图片，打开编辑图片对话框；

2、使用大小和对齐方式选项来编辑图片：

• 若要更改图片的大小，请选择一个尺寸选项；
• 若要改善在线商店的 SEO 和可访问性，请添加或编辑图片替代文本；
• 若要添加间距，请输入每侧所需留出的间距像素数；
• 若要更改图片的对齐方式，请从代表左对齐、居中对齐或右对齐的图标中进行选择；
• 若要添加文字环绕方式，请选中 Wrap text around image（文字环绕图片）。

3、点击【编辑图片】以保存更改。

十三、插入视频

使用富文本编辑器可以在博客文章、页面、产品描述和产品系列描述中插入或嵌入视频。如果想嵌入已创建的视频，需要先将视频上传到视频流网站，例如 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 标记正常工作，需要删除其两边的注释标记 <!-- 和 -->。