电子商务视频托管的完整 Shopify + Swarmify 指南

Swarmify 可帮助您加速 Shopify 在线商店中的视频，以提高用户参与度并增加您的收入。

您是否知道包含视频内容的产品页面的转化率提高了 80% ？ 没错，您的客户喜欢看到他们得到的东西。

您可以上传最好的产品图片，撰写令人难以抗拒的描述，并收集有关您产品的精彩评论，但视频内容会在几秒钟内让您明白这一点。

您可以轻松地展示您的产品是如何工作的，并使用视频推荐来展示人们为何对您的产品赞不绝口。 关键是视频营销是提高 Shopify 电子商务商店销售额的有力策略。

在今天的博文中，我们将准确地向您展示如何使用 Swarmify 和 Shopify 为您的用户提供即时启动、无缓冲且速度极快的视频。 设置整个事情就像 A、B、C 一样简单，所以如果你不精通技术，那就不用担心 :)

使用 Swarmify，您可以享受更好的用户体验、更高的转化率，并最终获得更多销售额。 另一方面，载有第三方链接（例如 YouTube）的慢速视频只会损害您的品牌、窃取您的流量并将用户赶走。

现在你不想这样，我们也不想。 事不宜迟，让我们从一些背景信息开始，所以我们在同一页上。

什么是 Shopify？

Shopify 是行业领先的电子商务平台。 他们为您提供了大量工具来创建在线商店并开始运行。

无论您是初学者还是专业人士，Shopify 都可以让您非常轻松地开始销售，无论是在线销售还是实体店。

创建 Shopify 在线商店是四年级学生的事情。 该平台带有一个简单的商店构建器和大量现成的模板，您可以自定义这些模板，直到您放弃。

最重要的是，它们为您提供了一个用户友好的产品编辑器，让您可以像老板一样创建、发布和管理您的库存。 借助内置的 SEO 功能，您甚至可以针对搜索引擎优化您的产品。

此外，您拥有处理和运送订单所需的所有工具，而且毫不费力。 除此之外，他们还为您提供了一套营销工具来“......创建、执行和分析数字营销活动......”而无需猜测。

最重要的是，您可以使用多个支付网关，从而轻松收集和处理付款。

他们从 14 天开始，无需信用卡即可试水。 要解锁 Shopify 的全部功能，您必须注册付费计划。

Shopify 主要功能

Shopify 是数百万用户首选的电子商务平台，这要归功于以下功能：

• 易于使用的网站编辑器，可像经验丰富的网络开发人员一样打造在线商店
• 您可以自定义 70 多个主题以适合您的商店
• 销售点 (POS)，因此您可以在商店或智能手机/移动设备上进行销售
• 为一件代发业务提供轻松的 Oberlo 集成
• 在线商店建设者
• 多个支付处理器
• 响应式和移动友好型设计
• 免费素材照片
• 轻松编辑商店的 HTML、CSS 和 JS
• 自定义域名，例如 swarmify.com
• 完整的博客平台，非常适合内容营销
• 免费 SSL 证书
• 放弃结账恢复
• 灵活的运费和自动税费
• 多种语言
• 如果您在新的 Google Advertising 帐户上花费 25 美元，则可获得 100 美元的 Google 广告积分
• 无缝的社交媒体整合
• 无限带宽
• 24/7 支持
• 还有更多！

如果您已经使用 Shopify，则无需我指出为什么它是一个出色的电子商务平台。 如果您是一个技术技能为零的新手，那么 Shopify 作为您的电子商务提供商永远不会出错。

为了让交易更加甜蜜，Shopify 提供了价格实惠的计划，起价仅为每月 9 美元。 如果您要开展新业务，他们的基本Shopify计划（每月 29 美元）提供物超所值的服务。

也就是说，什么是 Swarmify？

什么是 Swarmify？

除非您是这里的新手，否则 Swarmify 是一种独一无二的视频加速服务，可帮助您以 12 倍的速度向用户提供视频。

我们使用流媒体巨头 Netflix 和 Hulu 使用的相同技术来提供无延迟和无缓冲的视频体验。

如果您在 Shopify 商店中使用（或计划使用）视频，我们会为您提供提高视频加载速度所需的确切内容。

最重要的是，我们帮助您为您的买家提供完全定制的视频体验。

我们为您提供我们的 SmartVideo 播放器，而不是使用带有 YouTube 品牌、链接和竞争对手推荐视频的 YouTube 视频播放器。

我们革命性的视频播放器不包含任何品牌或链接。 它 100% 整洁，而且您可以在几分钟内对其进行自定义以匹配您的 Shopify 商店。

这就是为什么许多像您这样的企业家为其 Shopify 在线商店选择 Swarmify SmartVideo 的原因。

Swarmify 主要功能

我们是该领域的领导者，并为您提供与我们的声誉相匹配的功能。

• 无限带宽，你知道的，就像 Shopify :)
• 无限存储
• SmartCDN 视频内容交付网络 - 您的买家无论身在何处都能享受比行业平均速度快 12 倍的视频
• 自动 YouTube 转换 - 如果您已经使用 YouTube，并且您的 Shopify 商店中有一些 YouTube 视频，SmartVideo 会自动转换所有视频，并从我们的超快速堆栈和 CDN 提供它们
• 能够在 YouTube、Wistia、Vimeo、Google Drive、Amazon S3、pCloud 等多个平台上托管视频。 您的客户不会区分，因为我们在我们整洁的视频播放器中提供您的所有视频
• 出色的视频编码，可在每台设备上优化观看体验
• 持续流媒体优化——在整个播放过程中，SmartVideo 持续监控每个用户的视频体验，并在故障发生之前预防故障。
• 无停顿播放 - SmartVideo 在播放期间为您提供的缓冲平均比其他播放器少 8 倍。 现在，您的客户不必等待产品视频缓冲。 你要感谢我们的EdgeAI :)
• 简易安装
• 由热情的开发人员支持的一流支持
• 还有更多（在此处阅读有关功能的更多信息）

作为一名企业家，您希望在 Shopify 在线商店中使用视频来更好地保留用户、提高转化率和增加销售额。

而且由于视频营销具有挑战性，您需要一个视频主持人，让您的工作更轻松，而不是更难。

进入 Swarmify，您可以挽救这一天。 我们为您提供所需的一切，为您的买家提供快速、定制和专业的视频体验。

有了快速和高质量的视频播放，在您的 Shopify 商店中进行销售比直接从 YouTube、Wistia、Vimeo 或其他视频托管网站提供视频要容易得多。

有了这个序言，让我们继续前进并将 SmartVideo 与您的 Shopify 商店集成。

如何使用 Shopify + SmartVideo 进行电子商务视频托管

对于以下部分，您需要有一个正常工作的 Shopify 商店。 如果您仍然耳后湿透，这里有一个关于如何创建 Shopify 商店的精彩指南。

最重要的是，您需要一个现成的 Swarmify 帐户。 查看我们负担得起的定价计划并选择最适合您业务的计划。 想要了解更多信息？ 查看我们不断增长的案例研究列表。

如何将 SmartVideo 添加到 Shopify 产品页面

在产品管理页面的“媒体”部分，单击“添加媒体”并上传视频。 在您的网站上安装 SmartVideo 后，视频将从我们的全球交付网络交付，但是，视频仍将显示在标准 Shopify 视频播放器中。

要在 SmartVideo 播放器中显示视频，您需要让 SmartVideo 自动转换 YouTube 或 Vimeo 视频。

对于我们的示例产品，我借用了 YouTube 上 Unbox Therapy 的评论视频。

然后我继续创建了一个包含 YouTube 视频的示例产品。 这是它在我们的示例 Shopify 商店中的外观：

很整洁，对吧？ 我必须承认它起初看起来不错，但有几个问题。

首先，有明显的 YouTube 品牌，这可能不适合您的 Shopify 商店。

其次，视频播放器顶部的标题是一个巧妙编织的链接，可将您的买家重定向到 YouTube。 当您如此努力地为您的网站增加流量时，您绝对不希望这种情况发生。

第三，当用户播放和暂停视频时，YouTube 播放器的外观如下：

看那个; YouTube 播放器充满了杂乱和干扰，意在吸引访问者。

查看“更多视频”部分？

该部分可能会显示来自竞争对手的视频，这简直是不可接受的。 当您的买家与朋友分享视频时，该链接会将用户重定向回 YouTube，而不是您的 Shopify 商店！

如果您喜欢在 Shopify 商店中使用产品视频，您可以清楚地看到直接从 YouTube 托管视频是一个问题，即使它是一项免费服务。

或者，正如他们所说，没有什么能比得上免费的午餐 :)

简单的说...

您无法使用 YouTube 视频播放器投射出专业的感觉和外观。 此外，分心只会带走您的买家，从而降低转化率和销售额。

如何将 SmartVideo 添加到标准 Shopify 页面

安装 SmartVideo 后，YouTube 和 Vimeo 视频将在您的网站上自动转换，但将 SmartVideo 添加到普通 Shopify 页面的最简单方法是利用 SmartVideo 标签。

在页面管理员的内容部分，单击“插入视频”按钮并将您的 SmartVideo 标记粘贴到文本框中。

安装 SmartVideo 后（我们将在下一节中讨论），视频将在您的页面上可见：

既然您知道我们正在使用什么，让我们将 Swarmify 与您的 Shopify 商店集成，看看有什么不同。

复制您的 Swarmify 配置片段

在撰写本文时，我们还没有 Shopify 应用程序。 这意味着您必须手动将 Swarmify 与 Shopify 集成。 尽管如此，这个过程就像 A、B、C 一样简单。

该怎么办？

登录到您的Swarmify 仪表板：

Swarmify 仪表板简单易用。 我们不会让您陷入无用的功能。 我们按照您喜欢的方式保持精益 :)

接下来，单击配置选项卡，如下所示。

在下一个屏幕上，选择您的 Shopify 商店中是否已有 YouTube 视频，然后单击Next ：

专业提示：最好选择“是”以打开 YouTube 自动转换。 我也选择了“是”。

之后，选择您的 Shopify 商店中是否有背景视频，然后单击Next 。 我没有背景视频，所以我选择了“否：”

在下一页上，选择是否要更改视频播放器配色方案。

如果您想更改配色方案，请选择是(1)，选择您的自定义颜色 (2)，然后单击下一步(3)，正如我们在下面的屏幕截图中突出显示的那样。

你做得很棒:)

接下来，选择视频播放器按钮形状，然后单击Next 。 目前，我们有三个选项：默认（六角形）、矩形和圆形：

接下来，选择是否要为视频添加自定义水印，然后单击下一步按钮：

最后，选择是否要在视频中启用广告，然后点击Finish ：

由于您可能正在向 Shopify 产品添加解释器视频，因此最好不要使用广告。

之后，单击Copy to Clipboard ，如下所述。

复制您的 Swarmify 代码段后，您就可以进行下一部分：将其添加到您的 Shopify 商店。

将 Swarmify 代码段添加到 Shopify 商店

在以下部分中，我们将您刚刚复制的 Swarmify 代码段添加到您的 Shopify 商店。

别担心，这很简单:)

登录到您的 Shopify 商店仪表板，然后从左侧导航菜单中单击在线商店：

接下来，单击Themes ，如下所示。

之后，单击Actions下拉菜单，然后选择Edit Code ：

接下来，点击{/} theme.liquid ：

向下滚动，直到您看到包含其他 JavaScript 代码的部分。 通常，它以<script>标记开头。 这是一个屏幕截图以提供帮助：

接下来，将您之前复制的Swarmify Snippet粘贴到<script>标记上方，然后单击Save ，如下所示。

就是这样！

您的 Shopify 商店现已连接到 Swarmify！

太棒了，对吧？

谢谢你这么有耐心。 我不想跳过任何步骤，因为从一开始就做好这件事很重要:)

现在，您可以继续将视频上传到 YouTube 并将它们添加到您的 Shopify 商店。 Swarmify 将在一个漂亮且整洁的视频播放器中编码、转换和提供所有视频。

你知道，是这样的：

没有 YouTube 品牌，没有链接，也没有干扰 - 只是一个整洁的视频播放器，即使在用户播放和暂停视频时看起来也很棒:)

N/B ：视频需要时间根据长度进行优化。 我的示例视频长 3.58 分钟，所以我等了大约四分钟 :)

我怎么知道视频已经完全优化？ 在您的视频播放器上，您会看到Video Acceleration: ON ，如下所示。

相同的视频，相同的页面 - 不同的结果。 一切会吸引您的流量的东西都消失了。

噗！ 全没了。

现在，您可以将买家放在最需要他们的地方 - 在您的产品页面上 :)

视频加载速度比普通播放器快 12 倍，新的整洁的播放器看起来令人惊叹且专业。

如果 Unbox Therapy 没有说“请订阅并通过描述中的链接关注我……等等等等……”，你不会知道我是从 YouTube 获得视频的。

顺便说一句，他是个好人，但我希望你明白这一点:)

进一步自定义视频播放器

我们有几个标签可以进一步自定义您的视频播放器。

N/B ：与我们添加到{/}theme.liquid文件的 <HEAD> 部分的 JavaScript 代码不同，您可以直接在要显示视频播放器的位置添加以下 SmartVideo 标记。 最后我们有一个很棒的 Shopify 示例:)

如果您想在视频中添加海报图片或缩略图，请在您的网站上复制粘贴以下代码：

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" poster="path/to/my/image.png" controls></smartvideo>

笔记：

• 将“ path/to/my/video.mp4”和“ path/to/my/image.png”分别替换为您的视频和海报图像的实际路径
• 您可以根据需要调整播放器的宽度和高度

要自动播放您的视频，请使用以下 SmartVideo 标签：

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" controls muted autoplay></smartvideo>

专业提示：除非与muted结合使用，否则许多浏览器会限制autoplay 。 我们建议仅将autoplay与muted结合使用。 此外，添加playinline对于在 IOS/Safari 中自动播放时正确播放是必不可少的。

要告诉视频播放器以静音开始播放，请使用：

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" controls muted></smartvideo>

要循环播放视频以在结束后重播，请使用：

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" controls loop></smartvideo>

要防止视频在 Safari iOS 上全屏播放，请使用：

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" controls playsinline></smartvideo>

要让玩家不响应（固定宽度和高度），请从标签中删除class="swarm-fluid" 。

N/B：如果您使用 YouTube 作为视频源：

• 将所有视频从“私人”更改为“不公开”。 通过这种方式，Swarmify 可以获取和处理您的视频。
• 使用正确的嵌入链接，而不是页面的直接链接。 例如，使用 https://www.youtube.com/embed/wBp0Rb-ZJak （好）而不是 https://www.youtube.com/watch?v=wBp0Rb-ZJak （坏） 。

此外，不要删除每个 SmartVideo 标记中包含的控件。 如果您这样做，您的用户将没有播放视频的按钮。

一个有效的 Shopify 示例

为了说明如何在 Shopify 中使用 SmartVideo 标签，我将向新的 Shopify 页面添加一个视频。

您也可以将 SmartVideo 标签添加到 Shopify 博客文章 - 过程保持不变。

我正在使用 Unbox Therapy 的相同视频。 请记住使用嵌入代码，而不是直接链接。

因此，我准备好的 SmartVideo 标签如下所示：

 <smartvideo src="https://www.youtube.com/embed/MPzBcvGtry8" width="1280" height="720" class="swarm-fluid" controls muted autoplay></smartvideo>

接下来，登录到您的 Shopify 商店管理员，然后导航到在线商店 > 页面并添加一个新页面：

请注意，我的是一个全新的商店，没有页面 :) 如果您有现有页面，您会看到如下内容：

没关系，您可以编辑现有页面或单击添加页面添加新页面。 这样做会将您带到页面编辑器。

接下来，为您的页面添加标题并切换到 HTML，如下所示。

接下来，复制粘贴您的 SmartVideo 标签并单击Save ，如下所示：

现在，如果您在前端查看页面，您将看到：

我们的测试视频在那里 - 完成了背景视频加速。 视频开始自动播放，因为我的 SmartVideo 标签包含自动播放并且被静音。 您还可以在那里看到所有控件。

这就是使用 SmartVideo 标签进一步自定义您的视频播放器的全部内容。 结合不同的标签来达到你想要的结果。

最后的话

Swarmify 是视频托管的新标准。 将我们的技术与 Shopify 相结合，您就拥有了为热切的买家提供出色视频体验的工具。

我们为各种企业提供快速、可定制和高质量的视频体验，就像您的企业一样。 这是我们的首要任务，我们每天都在做得更好。

不要相信我们的话，请查看我们的案例研究并了解其他企业如何通过 Swarmify 电子商务视频托管来扼杀它。