Shopify Expanse主题：解决变体元字段需刷新才更新的问题

你的问题出在当前代码仅渲染了所有变体的元字段内容，却没有通过JavaScript监听变体切换动作来控制对应内容的显示/隐藏，所以必须刷新页面才能看到变化。以下是具体解决步骤：

1. 优化Liquid代码（确保初始显示正确） #

调整原代码的默认显示逻辑，保证页面加载时只有选中的变体元字段可见：

{% for variant in product.variants %}
<div class="variant__description" data-variant-id="{{ variant.id }}" style="display: {% if product.selected_or_first_available_variant.id == variant.id %}block{% else %}none{% endif %};">
  {% if variant.metafields.custom.variant_size %}
  <p><span class="font-body-bold">尺寸:</span> {{ variant.metafields.custom.variant_size }}</p>
  {% endif %}
  {% if variant.metafields.custom.variant_cubage %}
  <p><span class="font-body-bold">体积:</span> {{ variant.metafields.custom.variant_cubage }}</p>
  {% endif %}
</div>
{%- endfor -%}

2. 添加JavaScript监听变体切换 #

在产品模板的底部（比如对应section文件或product.liquid末尾）添加以下代码，实现切换变体时自动更新元字段内容：

document.addEventListener('DOMContentLoaded', function() {
  const productForm = document.querySelector('form[action="/cart/add"]');
  if (!productForm) return;

  // 监听Shopify变体切换事件
  productForm.addEventListener('variantChange', function(event) {
    const selectedVariantId = event.detail.variant.id;
    
    // 隐藏所有变体元字段容器
    document.querySelectorAll('.variant__description').forEach(container => {
      container.style.display = 'none';
    });
    
    // 显示当前选中变体的元字段容器
    const targetContainer = document.querySelector(`.variant__description[data-variant-id="${selectedVariantId}"]`);
    if (targetContainer) {
      targetContainer.style.display = 'block';
    }
  });
});

说明 #

这段JS会监听产品表单的variantChange事件（Shopify主题通用的变体切换触发事件），当用户选择不同的尺寸/颜色时，自动隐藏所有变体的元字段内容，只显示当前选中变体对应的容器，全程无需刷新页面。

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