Shopify富文本编辑器使用教程- 站长百科

Shopify

类型：独立站平台

简介：一站式SaaS平台，全球化支持、自控能力强，提供3天免费试用，首月仅需$1。

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 的帮助中心。