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

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

最近 Shopify 在国内不太稳定，如果打不开 Shopify 官网, 或者打开速度很慢，无法注册或者登录 Shopify 账户，请使用所谓的“梯子”换到美国IP重试。

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

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

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

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”这款应用来实现。

安装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。

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

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

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

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

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

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

Shopify产品变体插件 – Variant image automator

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

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

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

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

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

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