第 220 期关联多款 Shopify 产品实现组合 Listing

本期教程教你如何实现多款商品关联在一起，方便客户进行浏览和购买。

Shopify 也有推出类似的 App，不过必须是 Shopify Plus 店铺才能使用。

用途

通过将多款产品关联在一起，可以创建同类商品的组合 Listing，对于一些出售服装、手机壳等产品变体较多的公司而言，既可以实现每个变体拥有独立的产品详情页（不仅仅是产品描述，页面下方的所有模块都可以用不一样的内容），又能让每个变体拥有独立的 URL（实际上已经转换为不同的产品）。

而且对于一些产品数量较少甚至单品 Shopify 站而言，这种方式可以让店铺里的产品看起来更丰富（否则客户浏览产品系列时会发现只有寥寥几款产品）。

还能方便客户在产品系列快速点击直接进入不同的选项（例如不同的颜色），改善客户体验。顺便也实现了变体选项改为 Swatch 图片。

一举三得：突破变体数量 100 限制、实现每个产品变体独立的详情页内容、产品选项改为 Swatch 图片展示。

我在去年发布过：

那一期内容是通过在产品页面添加 Block 并选择产品的方式，优点是不需要在每款产品的产品编辑页面进行设置，并且可以自由排序，缺点是如果产品多的话创建和分配模板操作起来工作量有点大（Shopify 2.0 主题必须创建和分配模板才能进行不同的页面设置，这是平台的设定）。

本期分享的内容只需要设置产品 Tags 即可将商品关联起来，并且在上方效果预览视频中可以看到，当前商品始终会显示在第一位，不需要手动对每一款产品进行排序设置。也不依赖于元字段，不需要在店铺后台分别为不同的变体选项上传特定命名格式的 Swatch 图片（因为自动获取产品图进行显示）。

本教程以 Shopify 官方 2.0 系列主题最新版进行演示。

参考视频操作，在 Snippets 文件夹：

product-variant-picker.liquid

搜索：

elsif picker_type == 'button'

在其下方添加：

别人能学会的, 你也能会