在 Shopify 产品页面上选择一种颜色选项时隐藏其他产品图片

问题描述

我正在尝试仅显示我在产品页面上选择的颜色变体的图像。他们目前被产品列表 CSV 中的 Img Alt 文本拉入。 当其他颜色的缩略图未被选中时,我会隐藏它们,并在它们被选中时切换到它们,包括替换较大的特色图片

任何帮助将不胜感激。谢谢。

product-template.liquid https://pastebin.com/AyaDpNG4

theme.js https://pastebin.com/KBniw7J8

Blue selected

Red selected

链接到产品页面

https://4158qu33fstl4w69-53119090861.shopifypreview.com/products/lightweight-trainers

CSV 链接

https://docs.google.com/spreadsheets/d/1lc8XcHDMyMFGAkegTRrBLLTlQN8oNVbU430vT0aeP4Y/edit?usp=sharing

解决方法

从数据的角度来看,不幸的是,在 vanilla shopify 中无法做到这一点(没有应用程序或使用元字段来设置变体图像)。

这样做的原因是变体在数据结构中只允许一张特色图片。因此,您可能需要走应用路线。

另一种“hacky”方法是在图像名称的末尾添加 slug('-maroon'、'-black'、'-all'),然后使用 javascript 将图像与当前活动的图像匹配变体。不过,这总是有点冒险,并且在上传图片时需要工作。

,

这里有一些APP,但Shopify上的APPS大部分都是付费的。

  1. Variant Image Wizard

  2. Variant Image Automator