第 220 期 关联多款 Shopify 产品实现组合 Listing
本期教程教你如何实现多款商品关联在一起，方便客户进行浏览和购买。
Shopify 也有推出 类似的 App，不过必须是 Shopify Plus 店铺 才能使用。
用途
通过将多款产品关联在一起，可以创建同类商品的组合 Listing，对于一些出售服装、手机壳等产品变体较多的公司而言，既可以实现每个变体拥有独立的产品详情页（不仅仅是产品描述，页面下方的所有模块都可以用不一样的内容），又能让每个变体拥有独立的 URL（实际上已经转换为不同的产品）。
而且对于一些产品数量较少甚至单品 Shopify 站而言，这种方式可以让店铺里的产品看起来更丰富（否则客户浏览产品系列时会发现只有寥寥几款产品）。
还能方便客户在产品系列快速点击直接进入不同的选项（例如不同的颜色），改善客户体验。顺便也实现了变体选项改为 Swatch 图片。
一举三得：突破变体数量 100 限制、实现每个产品变体独立的详情页内容、产品选项改为 Swatch 图片展示。
往期相关内容
我在去年发布过：
Shopify 产品关联跳转 突破变体数 100 限制 实现每个变体不同详情页
那一期内容是通过在产品页面添加 Block 并选择产品的方式，优点是不需要在每款产品的产品编辑页面进行设置，并且可以自由排序，缺点是如果产品多的话创建和分配模板操作起来工作量有点大（Shopify 2.0 主题必须创建和分配模板才能进行不同的页面设置，这是平台的设定）。
新方法的特点
本期分享的内容只需要设置产品 Tags 即可将商品关联起来，并且在上方效果预览视频中可以看到，当前商品始终会显示在第一位，不需要手动对每一款产品进行排序设置。也不依赖于元字段，不需要在店铺后台分别为不同的变体选项上传特定命名格式的 Swatch 图片（因为自动获取产品图进行显示）。
设置 Tags
- 参考视频演示，在需要关联的商品上设置 Tags
- 要点：每款产品设置相同的 Tags，而不是设置单独的某个 Tag
- Tag 跟产品的 handle 保持一致，用英文逗号隔开，再一起粘贴
修改现有代码
本教程以 Shopify 官方 2.0 系列主题最新版进行演示。
参考视频操作，在 Snippets 文件夹：
product-variant-picker.liquid搜索：
elsif picker_type == 'button'在其下方添加：