如何在 Shopify 产品图片中插入 YouTube 或者 Vimeo 视频

Shopify 为新注册账户 限时提供 90 天免费使用优惠 – 立即注册账户获取 Siteground: WordPress / WooCommerce官方推荐建站主机 $3.95/月

Shopify最近的一次重要的系统更新(2020年3月16日),就是将产品添加/编辑页面原来的“Images”板块,修改为了“Media”板块,当然,改掉的不仅仅是一个单词,在“Media”板块的右上角还可以看到“Add Media from URL”的选项,在下拉菜单中可以看到 Embed Youtube Video的选项,意味着Shopify系统目前已经支持在产品图片展示区域添加Youtube视频。

直接将视频通过Media上传插入到产品页面 (未来最佳方案)

Shopify系统更新之后,后台的 Images 板块更改为 Media

点击 下图虚线框中的 Add media or drop files to upload 区域,也可以直接将你电脑本地上的视频上传到Shopify系统中,并将该视频添加到网站前台产品页面产品图片展示区域。上传成功的视频,在右下角会有一个黑色背景的播放按钮。

你可以通过Media将本地视频直接上传到Shopify后台并展示在前台

Media板块的更新,除了支持图片和视频之外,还支持插入3D模型。如下图所示,下图动态内容并不是一个视频,而是我使用鼠标拖拽产品3D模型的同时,使用GIPHY录制的一个GIF动图(你可以通过这条链接实际体验下产品3D模型的魅力 – https://debut-theme-default.myshopify.com/products/studio-bag)。通过3D模型,客户可以使用放大,拖拽等操作更全面细致的了解产品细节,对我们卖家来说,当然更有利于提高网站的转化率。

Debut演示主题展示的产品页面 3D模型 显示样式

目前只是Shopify系统完成了更新,虽然你在后台可以添加视频和3D模型,但是还需要主题完成相应的更新之后,才能在你的网站前台展示出视频或者3D模型的内容。目前我知道的已经支持3D Models和Video的主题只有 Debut,不过相信很快大部分主题都会完成一次更新,支持在产品图片区域插入视频和3D模型。

关于图片视频 3D模型的文件格式要求和建议如下:

  • 图片文件 格式最好为 JPEG。(Shopify会自动将文件格式转化为Webp格式)。图片最大不能超过20MB,尺寸最大不能超过 4472 * 4472 px,Shopify推荐的最佳产品尺寸为 2048 * 2048 px。(Shopify会在你上传文件的时候,依据各种参数来决定是否要对文件进行压缩。)
  • 3D模型文件 格式为 GLB,文件最大为15MB,最好小于等于6MB
  • 视频文件 格式为mp4或者mov,视频清晰度最高为4K (4096 x 2160 px),文件大小不能超过 1GB,视频长度不能超过60秒。这些要求仅仅针对你上传到Shopify系统的视频,如果你是将Youtube视频插入到Shopify中,则不受上面的要求限制。

3D模型文件的制作你可以找Shopify官方的Expert帮你做,也可以去淘宝搜索服务商或者Fiverr这类的平台上发布需求。我看到的一家Shopify Expert的报价如下:

来自Spase的3D模型报价

以上报价来自于 https://spase.io/pricing

你可以看下你现在在用的主题的更新日志,或者联系主题的作者,看下主题现在是否已经更新,并支持在产品图片的位置插入视频或者3D模型。(注意,如果你的网站主题使用的是“盗版主题”,不建议联系主题作者,严重的可能会导致Shopify账户被封。)

将视频链接地址插入到产品图片的ALT中 (部分主题支持)

其实在Shopify更新之前,已经有不少主题支持通过将Youtube视频链接或者Vimeo的视频链接插入到图片ALT位置,来实现在产品图片位置展示视频的功能。例如我之前推荐的Shopify主题 Prestige 就是支持这一功能的。(并不是所有的Shopify主题都是支持在图片ALT中插入视频链接来支持视频功能的,建议详细阅读你的主题说明文档查找相关说明,或者联系主题作者询问主题是否支持这一功能)

  1. 首先将你制作好的视频上传到Youtube或者Vimeo
  2. 按照主题说明里面的要求复制下来Youtube视频的链接地址,或者视频的代码
  3. 将对应视频链接地址插入到图片ALT中

Prestige主题要求的是截取视频代码中的一部分内容插入到图片的ALT文本框中。例如我要把视频 https://www.youtube.com/watch?v=jzF_y039slk 插入到产品图片中,则需要打开这段视频,然后右击视频“复制嵌入代码”,或者点击分享按钮,获取嵌入代码。

<iframe src=”https://www.youtube.com/embed/jzF_y039slk” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

然后将上面的代码中“https://www.youtube.com/embed/jzF_y039slk”链接复制下来,插入到图片的ALT中就可以了。(注意,Prestige这个主题要求的是将嵌入代码中的视频链接地址,而不是浏览器地址栏中的链接地址,插入到图片ALT中)然后在网站前台的产品页面中就会显示如下图所示的视频播放按钮。点击播放按钮之后,就会在弹窗中播放视频内容。

你可以查看主题作者制作的如何在Prestige主题的产品图片位置插入Youtube视频的英文文字教程

个人并不是特别推荐使用Youtube视频,因为Youtube系统本身的内容推荐机制会在视频播放完成之后,推送更多相关视频来吸引观看者的注意力,点击相关内容就会跳出网站到Youtube视频中,对网站的转化形成了干扰,反而起到了负面的影响。推荐将视频上传到VIMEO,没有相关内容或者广告推送。

 

通过插件 如 EasyVideo 实现产品页面视频插入功能

如果你的主题既没有更新到最新版支持Shopify系统的视频或者3D模型,也无法在ALT中填写Youtube视频链接地址实现视频插入的功能,那么你可以试试Shopify插件,例如 EasyVideo

EasyVideo的安装使用非常的简单,视频插入方式和Prestige主题的方式很像,都是将Youtube视频或者VIMEO的视频链接地址插入到图片的ALT中来实现。其实,你可以理解为,你安装EasyVideo这个插件的同时,相当于完成了对你的主题代码的修改,让那个你的主题也支持和Prestige主题相同的视频插入方式。

EasyVideo的视频样式定制相对更灵活一些,可以自定义视频的长宽比例,视频弹窗播放还是嵌入播放,是否自动播放视频,是否在图片上展示视频播放按钮等等。另外比较赞的是,我在安装测试EasyVideo的时候发现,这一插件貌似通过某种方式屏蔽了Youtube的广告和视频推送功能,当视频播放完成之后,没有弹出显示更多视频的选项,这一点是很赞的。

如果你在安装EasyVideo这个插件之后,将Youtube视频插入到了图片ALT中,但是在前台产品页面依然无法显示视频,你就需要联系EasyVideo让他们手动帮你修改主题的代码,来实现这一功能。改代码是免费的,不过EasyVideo需要每个月3美金的费用。如果能够显著提高网站的转化率,那么这钱花的也算是超值的。

未经允许不得转载:歪猫跨境独立站博客 » 如何在 Shopify 产品图片中插入 YouTube 或者 Vimeo 视频

赞 (6)

留下你的问题, 我们交个朋友 1

  1. 匿名您好,我按照这个方面,上传视频,预览怎么没有看到有视频的出现呢,是哪里的问题嘛回复
  • 关注公众号 “ WaimaoB2C ” 第一时间获取网站最新内容,了解跨境电商独立站圈内圈外每天发生的那些事儿,和20000+独立站卖家共同成长。

    $$$$$$$$ 每月 1 本书 $$$$$$$$

    2020年5月推荐 <Google Shopping for Shopify>

    公众号回复信息“ GSFS ”获取本电子书
    本电子书是澳大利亚一个提供广告代运营服务的服务商写的,不过提供的内容质量还是很高的,值得新手花点时间看下。

    *推荐亚马逊购买正版Kindle电子书或纸质书籍,获取最佳阅读体验。本分享来自于互联网以及网友上传,网站内所提供的下载链接均为站外链接,版权归原作者以及开发商所有,网站本身不存储相关资源文件. 如侵犯到版权方,请发送邮件到 hello@waimaob2c.com,站长会在第一时间删除并向您道歉。

  • Shopify 新卖家账户注册注意事项-非常重要

  • Shopify新卖家注册账户前请务必认真阅读以下注意事项:

    注册前关闭翻墙工具; 不建议使用 QQ,126,163邮箱注册账号
    打开Shopify官网 WWW.SHOPIFY.COM 获取 90 天免费使用
    注册账户时地址信息真实有效; 缴纳月租前关闭翻墙工具