仅需一个插件，让产品360°动起来！
店匠D2C
Posted on
360°全景产品主图，指图片自身能够从360°等多个方向全方位展示产品的一种 GIF 动图形式。
1. 背景
对于产品颜色为白色或者浅色的情况下，就可以选用黑色或者灰色的背景色，根据产品的颜色和特征进行灵活调整。
2. 帧率
3. 图片
拍摄完成的照片需要经过加过处理，将杂乱的背景或者是不需要的细节部分进行调整优化。照片文件必须按照统一的规则去进行命名。
关于制作360°全景产品主图的工具，店匠SHOPLAZZA 向大家推荐 Sirv 插件。它有以下几大优点：
有免费套餐可以使用，并且免费套餐的功能已经非常充沛。
Sirv 所提供的几种套餐定价及功能
操作简单，针对不懂代码的卖家，能够自行使用。 针对想要更多自定义功能的卖家，提供 API 接口。 图片不光能自主旋转，也可以放入详情页中实现手动拖拽（drag to spin），使消费者能够浏览更多细节，增强互动。
1. Sirv 插件使用方法
首先将拍摄好的所有产品图片按照统一的规则命名 接着在 Sirv (https://sirv.com/) 将账号注册好，进入插件后台 新建文件夹并将产品图片文件上传 进入文件夹后全选图片，然后点击右上角的 Create spin
输入文件名，默认选择 Horizontal spin (a row of images)，点击 Create，spin 文件即创建成功
选中 spin 文件，点击更多(…)选项 Download as GIF - 适用商品主图 Embed - 适用商品详情页
2. 店匠SHOPLAZZA 主图制作方法
点击 Download as GIF，将 GIF 文件下载下来，然后返回到 店匠SHOPLAZZA 后台，依次找到“后台设置-素材中心”，点击右上角的本地上传(Local upload)，将 GIF 文件上传
接着返回“商品-商品管理”找到对应的商品链接，点击添加图片，将上传好的 GIF 选中并插入(Insert)，点击保存。
3. 店匠SHOPLAZZA 详情页制作方法
点击 Embed 进入代码设置页面。
依次找到“商品-商品管理”，找到对应商品的描述部分，点击编辑框右上角“源代码(Source code)”将在 Sirv 中拿到的第一行代码复制粘贴进来。
如果想在详情页中把图片居中摆放，可以在特定部分加上 style="text-align: center;" 这部分代码，然后保存，示例： 修改前：<div class="Sirv" data-src="https://ivercerj.sirv.com/Spins/Egg-Chair/Egg-Chair.spin"></div> 修改后：<div class="Sirv" data-src="https://ivercerj.sirv.com/Spins/Egg-Chair/Egg-Chair.spin" style="text-align: center;"></div>
然后在 店匠SHOPLAZZA 店铺后台的应用市场里找到“自定义代码嵌入(Custom code)”插件，点击进入。
点击右上角的新增代码(Create Code)创建新的自定义代码
将在 Sirv 插件中拿到的第二行代码复制粘贴过来 用户端(Select APP)：选择 PC 端和手机端 出发页面(Trigger page)：选择全部 代码位置(Code location)：选择顶部
设置完成后点击保存(Save)，然后在前台商品详情描述部分就能实现手动进行拖拽旋转了。
往期推荐