比如我们要给shopify的产品增加一个params字段，如何实现？以下是步骤：

1. 后台-》设置-》自定义数据-》产品，如下图：
2. 在“产品元字段定义”界面-》“添加定义”，如下图：
3. 保持后，随便点击一个产品，就能在产品编辑页面的“类别 元字段”中看到刚新增的元字段，我们在这里输入需要增加的元字段内容，如图：
4. 如何在产品页面main-product.liquid或product-card-xxx.liquid中引用这个字段获取它的值并显示出来呢？
5. 引用方法:只需要在liquid代码中通过{{ product.metafields.custom（你的命名空间）.params | escape }}即可获取该自定义元数据的值

6. 步骤5获取的值是一个json对象，那如何在前台页面正确的显示出来呢？❌ 问题：Liquid 原生无法解析 JSON 字符串为对象

   Shopify 的 Liquid 目前 不支持原生将 JSON 字符串解析为对象进行访问，这就是为什么你不能用：

   liquid

   复制编辑

   {{ lines[0].children[0].value }}


   来访问它。

   解决方法：用 JavaScript 在前端处理 JSON（推荐）

   你可以把这个 metafield 的原始 JSON 打印到页面上，然后用 JS 提取。

   💡 步骤：代码如下：{%- if product.metafields.custom(你的命名空间).params != blank -%}
   <div
   id=”params-list-{{ product.id }}”(因为一个collection可能有多个产品，这里id必须唯一，否则下面的脚本只会显示一个产品的自定义内容)
   class=”product-card-params”
   data-json=”{{ product.metafields.custom.params | escape }}”（关键！！！）
   ></div>
   <ul id=”params-ul-{{ product.id }}”></ul>
   {%- endif -%}

   将以上代码放入你想显示的位置中，并增加以下js脚本输出元数据的json数据，必须增加这个，否则无法显示

<script>
document.addEventListener(‘DOMContentLoaded’, function () {
const container = document.getElementById(‘params-list-{{ product.id }}’);
const ul = document.getElementById(‘params-ul-{{ product.id }}’);

if (!container || !ul) return;

// 清空旧内容，防止重复渲染出现重复内容
ul.innerHTML = ”;

try {
const raw = container.dataset.json;
const parsed = JSON.parse(raw);

// 保证数据存在且类型为列表（可能还有段落 p、heading 等）
const children = parsed.children || [];
const listBlock = children.find(child => child.type === ‘list’);

if (listBlock && listBlock.children) {
listBlock.children.forEach(item => {
const textNode = item.children?.[0];
if (textNode?.value) {
const li = document.createElement(‘li’);
li.textContent = textNode.value;
ul.appendChild(li);
}
});
}
} catch (e) {
console.error(‘Failed to parse metafield JSON:’, e);
}
});
</script>