提问Shopify如何实现套餐分类 Tab+Variant卡片？

Shopify 如何实现「套餐分类 Tab + Variant 卡片选择器」？（A / B分组，卡片绑定 variant_id）

我在做 Shopify 产品页的自定义套餐选择器，想实现类似这个交互：

• 顶部两个 Tab：A / B

• Tab 下方显示不同的套餐卡片，点击卡片会选中并更新加入购物车的 variant

我目前的思路是绕开 Shopify 默认的 variant picker：

• 每张套餐卡片直接绑定 Variant ID

• Tab 切换通过切换容器 hidden/display 来显示对应分组

• 点击卡片时更新 form 里 input[name="id"] 的 variant id，然后用 /cart/add.js fetch 加购

但我不确定最佳实践是：

1. 分组逻辑应该用 variant title/option 规则匹配，还是用 metafields / section schema 手动配置 更稳？

2. 在 Dawn/OS2 主题下，如何优雅地避免与原生 variant-selects / 价格更新逻辑冲突？

3. 有人做过类似组件的开源 snippet / 推荐实现方式吗？

感谢任何思路/代码片段/架构建议！