Shopify产品变体太多, 产品页面杂乱不堪? 试试 StarApps 的这4款应用

新注册Shopify账户可获得 14 天免费使用优惠 – 立即注册账户获取

如果你在独立站上销售的是服装箱包类等变体图片特别多的产品,比方说某一款服装,有7个颜色变体,每个变体有6张细节图,如果你要把所有的图片都放在产品页面上,那么就有42张图片堆在一个产品页面上。如果你选的主题能够合理的控制Shopify产品变体图片的展示,可能页面会干净整洁很多。不过如何能像亚马逊那样展示变体信息呢?例如下图中Color一共有20个变体颜色,假设每个变体都有3张细节图要展示,那按照很多Shopify主题的“习惯”,比方说Debut或者Brooklyn,在左侧可能就会堆积着60张产品图片。。。变体越多,客户的体验也就越差。

Shopify产品变体太多, 产品页面杂乱不堪? 使用Shopify插件让页面整洁有序

亚马逊的产品页面

先来看下安装App之后的效果图,(演示网站 https://demo.starapps.studio/products/printed-maxi-dress)如下图所示,该产品一共有4个变体,每个变体有5张细节图,因此一共有20张图片,不过只有当用户点击了Print一栏中某个变体(例如红色)的时候,在左侧的大图中才会展示相应变体(红色)的细节图,其他变体(绿色,棕色,青色)的细节图自动隐藏。

StarApp应用生成的产品页面

StarApp应用生成的Shopify产品页面

同时,在选择某个变体的时候,页面中的标题以及产品描述信息也会随之发生变化。上图和下图是Shopify同一个产品页面展示的信息,简单的比较可以看出来,在选择不同变体信息的时候,左边的大图,产品的标题,以及产品的描述都随之发生了改变。至少在功能上是不是和亚马逊Listing页面一模一样了呢?

StarApp应用生成的Shopify产品页面

StarApp应用生成的Shopify产品页面

如果你的Shopify主题不支持类似亚马逊那样管理变体信息的功能,那么你可以试试 Star Apps 开发的 4 款应用,让你的Shopify产品页面和亚马逊的Listing页面一样展示更丰富信息的同时,页面反而更加的整洁简单。

StarApps “家族”

Variant Options Swatch King 负责的是将变体色块变成小图片。
Variant Image Automator 负责的是在大图位置只显示当前变体的细节图,隐藏其他变体图片。
Product Description Tabs & FAQ 负责的是不同的变体展示不同的产品描述信息。
Variant Title King 负责的是不同的变体展示不同的产品标题。

Shopify产品变体插件 – Variant Options Swatch King

你可以按照自己的需求去选择和安装shopify主题,例如我之前推荐的Prestige这款主题,以及我所见过的大部分主题,在表达颜色变体信息的时候都是使用色块,而不是小图片(Swatch)来展示。如果你想让色块变成小图片,那么你可以安装“Variant Options Swatch King”这款应用来实现。

很多Shopify主题默认使用变体色块

很多Shopify主题默认使用变体色块

安装Variant Options Swatch King之后,这款应用会依据你的设置,在变体图片选项中将模版自带的色块替换为图片。

Variant Options Swatch King 负责将变体色块变成小图片

Variant Options Swatch King 负责将变体色块变成小图片

APP的安装过程很简单,不再赘述,安装成功之后,在Product Option Style settings板块中会自动展示出你的网站所有设置的shopify产品变体,例如 Color,Size, Material,Type等等,如果没有显示或者显示不完整,你可以点击右上角的 Refresh option list 按钮重新抓取。

Display Style 有 4 个选项,通常你选择Automated Variant Image Swatch即可,如果你有其他需求,也可以使用 Color or Custom image swatch。

Variant Options Swatch King 设置教程

Variant Options Swatch King 设置教程

例如,我将上图中的 Size 改为 Pattern,然后Display style选择 Color or custom image swatch,点击Update swatch,给每个属性值上传一个提前制作好的花色图案图标。

Variant Options Swatch King 自定义图片功能

Variant Options Swatch King 自定义图片功能

保存好以上设置之后,在网站前台的展示效果如下图所示。下图没有考虑实际情况,只是做一个简单的示例演示。

Variant Options Swatch King 自定义图片功能效果

Variant Options Swatch King 自定义图片功能效果

再比方说,如果你做的是宠物用品,牵引绳,狗窝等等产品,那么你的产品页面,除了可以使用这一应用展示颜色变体之外,是否可以将下图中的 Size 改成狗狗的图片,例如将Small改成泰迪犬的图片,将Large改为成年拉布拉多的图片,这样更加的直观和形象?(举例子的时候忽略了拉布拉多也是从小不点儿长大的,明白思路就好)

Shopify变体如何提供更好的客户体验

Shopify变体如何提供更好的客户体验

在App的设置页面,Customize Swatch Style 板块,可以调整Swatch的形状,大小,边框等等样式,按照你的主题样式进行设置和调整就可以。

Variant Options Swatch King 小图片设置教程

Variant Options Swatch King 小图片设置教程

安装好 Variant Options Swatch King 这一应用之后,该应用默认是关闭状态的,你需要完成上面的设置,然后在Master switch板块中点击 Enable 按钮启用应用,则网站前台产品页面会按照你的设置展示Swatch信息。

Variant Options Swatch King 功能启用

Variant Options Swatch King 功能启用

我在使用Prestige主题测试这款应用的时候,只要启用,网站前台变体就会由色块变成图片。如果这款应用不适配你使用的主题,或者根本不起作用,那么你可以联系应用的作者,让他们帮你免费修改主题的代码。

Variant Options Swatch King 客服

Variant Options Swatch King 客服

Shopify产品变体插件 – Variant image automator

Variant image automator 相比较于上面的Variant Options Swatch King的设置就要简单很多。

应用安装好之后,在Pick Your Theme选项中选择你在使用的主题,然后保存,如果你没有在Pick your theme中找到你的主题,那么可以直接点击Fill it up链接,在弹窗中将你的产品页面提交给插件的作者,他们会在48小时只能帮你搞定。

Variant image automator设置教程

Variant image automator设置教程

在选好主题之后,应用会自动给你发一封邮件,告诉你如何修改主题的代码,以保证插件可以正常工作,例如Prestige主题需要做的修改如下图邮件截图所示。不过,如果你看不懂,只需要将“support@starapps.studio”添加为你的Shopify员工账户,并将网站主题,应用,以及产品页面的编辑权限给到这个子账户,然后回复邮件即可,应用开发者会帮你修改好主题的代码。

Variant image automator 设置教程

Variant image automator 设置教程

修改好以上的代码之后在上传产品图片的时候,将所有相同颜色的图片放在一起,如下图,白色图片后面跟着白色图片,黄色图片跟着黄色图片,然后把所有白色产品图片中的第一张图片作为Variant的缩略图,就可以了,Variant image automator这款应用会自动的将所有的产品图片归类好。

Variant image automator 设置教程

Variant image automator 设置教程

如果某几张图片要显示在所有的变体图片选项中,只需要将这几张图片放到Media/Image板块的靠前位置即可。如下图所示,当我们在网站前台选择黄色变体时,展示出来的图片,除了两张黄色产品图片之外,还有放在Image板块最靠前位置的两张模特图片。而白色,绿色,灰色的产品图片自动隐藏了。

Variant image automator 使用之后的效果

Variant image automator 使用之后的效果

另外两款应用 Product Description Tabs & FAQ 以及 Variant Title King 我没有安装试用,就不再赘述,你有需求的话,可以安装试用下。

未经允许不得转载:歪猫跨境独立站博客 » Shopify产品变体太多, 产品页面杂乱不堪? 试试 StarApps 的这4款应用

赞 (5)
新评论邮件通知
提醒
guest
2 评论
由新到旧
由旧到新 点赞最多
Inline Feedbacks
View all comments
  • 关注公众号 “ WaimaoB2C ” 第一时间获取网站最新内容,了解跨境电商独立站圈内圈外每天发生的那些事儿,和20000+独立站卖家共同成长。

    $$$$$$$$ 每月 1 本书 $$$$$$$$
    2020年8月推荐
    <The Truly Ultimate Guide To 10X Your Shopify Store> 

    公众号回复信息“ 10X ”获取本电子书下载链接。不想关注公众号的直接Google搜索书名,在搜索结果中同样可以获得电子书下载链接地址。
    该电子书不是“葵花宝典”,所以不能指望靠它“独步武林”,不过个人觉得对独立站新手来说还是有非常大的帮助的。对老手来说,实用性没那么大,不过如果电子书中有那么一两点对你的网站运营有所启发,我觉得也算是比较值了。

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

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

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

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