Shopify Supply主题如何实现产品描述随变体联动切换

方案1：基于Shopify原生能力的零插件实现 #

核心逻辑：借助Shopify变体维度的元字段存储每个变体的专属描述，依托Supply主题内置的变体切换触发机制实现联动，不需要额外付费安装应用。

• 第一步：进入Shopify后台「设置→自定义数据→变体」板块，新建字段为「变体专属描述」，字段类型选择多行文本，保存后给每个需要独立描述的变体填写对应内容（比如不同规格植物的养护要求、尺寸参数、适用场景）。
• 第二步：进入主题代码编辑页，找到product.liquid文件中原先输出产品通用描述的位置，替换为如下Liquid判断逻辑：

<!-- 适配Supply主题原有产品描述类名 -->
<div class="product-description rte" itemprop="description">
  {% if product.selected_or_first_available_var.metafields.custom.variant_description != blank %}
    {{ product.selected_or_first_available_var.metafields.custom.variant_description }}
  {% else %}
    {{ product.description }}
  {% endif %}
</div>

• 第三步：如需实现无页面刷新的实时切换，在产品页底部追加如下JS脚本，适配Supply主题原生的变体切换事件：

// 页面隐藏节点存储所有变体的描述数据，避免额外网络请求
<script id="variant-desc-data" type="application/json">
  {{ product.variants | map: { id: id, desc: metafields.custom.variant_description | default: '' } | json }}
</script>
<script id="base-product-desc" type="text/template">
  {{ product.description }}
</script>

// 绑定Supply主题内置的变体切换回调
document.addEventListener('variant:changed', function(event) {
  const currentVariant = event.variant;
  const descWrapper = document.querySelector('.product-description');
  const variantMap = JSON.parse(document.getElementById('variant-desc-data').textContent);
  const baseDesc = document.getElementById('base-product-desc').textContent;
  
  const matchedVariant = variantMap.find(item => item.id === currentVariant?.id);
  descWrapper.innerHTML = matchedVariant?.desc || baseDesc;
});

方案2：借助现成应用的低配置实现 #

• 适合不想修改主题代码的场景，直接在Shopify官方应用市场选择支持「变体关联自定义内容」的工具，安装完成后只需要在应用后台给每个变体绑定对应的描述块、参数模块，工具会自动在Supply主题的产品页注入联动逻辑，保持和原有主题的样式兼容。
• 选型注意：优先选择明确标注适配Supply免费主题的应用，避免出现样式错位、原有加购功能失效的问题。

方案3：轻量自定义的多模块联动实现 #

• 如果后续需要给不同变体搭配专属的图片、养护卡片、提示信息，不需要依赖后端接口存储，只需要把对应内容块预先写在产品页的隐藏节点上，给每个内容块绑定对应的变体ID，通过JS在变体切换时控制对应内容块的显示/隐藏即可。
• 操作注意：不要覆盖Supply主题原有的变体选择器核心代码，只需要在原有切换事件的回调里追加自定义的内容切换逻辑，避免破坏原有库存提示、加购按钮状态更新的功能。

操作提示：所有配置操作都建议先在主题的预览调试模式下完成，测试覆盖「选中带专属描述的变体、选中无专属描述的通用变体、选中缺货变体」三类场景，确认描述切换正常、原有通用描述不会丢失后，再发布到线上版本。

内容的提问来源于stack exchange，提问作者OnlinePlantStore