Shopify技术问题：如何在.liquid文件中用JavaScript访问Shopify元字段？

可行解决方案 #

1. 通过HTML data属性传递值 #

先在页面的HTML元素中挂载元字段值：

<div class="product-wrapper" data-sample-name="{{ product.metafields.custom.sample_name.value | escape }}">
  <!-- 产品内容区域 -->
</div>

再在JS块中读取该属性：

{% javascript %}
  const productEl = document.querySelector('.product-wrapper');
  const sampleName = productEl.dataset.sampleName;
  console.log(sampleName);
{% endjavascript %}

escape过滤器能避免特殊字符破坏HTML结构，保证值的完整性。

2. 挂载到全局window对象 #

在模板中用普通<script>标签定义全局变量：

<script>
  window.productSampleMeta = "{{ product.metafields.custom.sample_name.value | json }}";
</script>

之后在任意JS代码中直接访问：

{% javascript %}
  console.log(window.productSampleMeta);
{% endjavascript %}

json过滤器会自动处理字符串转义，生成合法的JS语法，避免引号冲突或特殊字符报错。

3. 直接在{% javascript %}块中正确插值（推荐） #

先捕获转义后的元字段值，再传入JS：

{% capture sampleMeta %}{{ product.metafields.custom.sample_name.value | json }}{% endcapture %}
{% javascript %}
  const sampleName = {{ sampleMeta }};
  console.log(sampleName);
{% endjavascript %}

json过滤器会自动添加引号并转义特殊字符，彻底避免语法错误，同时保证Liquid变量正确渲染为JS可识别的值。

之前尝试失败的原因 #

• 直接输出无引号：若元字段是文本内容，会被渲染成console.log(test);，JS会把test当作未定义变量抛出错误。
• 手动加引号：如果元字段包含单引号、换行等特殊字符，会直接破坏JS语法结构，导致脚本无法执行。
• assign变量未插值：你写的console.log(tempVar);中，tempVar是Liquid变量，但JS会将其视为自身的未定义变量，必须用{{ tempVar }}才能让Liquid替换为实际值，且这种方式未处理特殊字符，仍存在语法风险。

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