如何将Shopify公开API数据传入Liquid模板并动态添加二维码？

方案1：用产品元字段（Metafields）存储二维码URL #

这是最贴合Shopify原生数据访问逻辑的方式：

• 生成二维码后，通过Shopify Admin API将图片URL存入对应产品的元字段，指定命名空间为qrcode，键为image_url。示例代码（Node.js）：

  // 假设已初始化Shopify API客户端会话
  await shopify.rest.Metafield.create({
    session: session,
    product_id: productId,
    namespace: 'qrcode',
    key: 'image_url',
    value: 'https://your-proxy-domain/qrcode/xxx.png',
    type: 'url'
  });
  

• 完成存储后，在Liquid模板中直接调用：

  <img src="{{ product.metafields.qrcode.image_url }}" alt="产品二维码" />
  

方案2：通过App Block/Section封装服务器端请求 #

利用Shopify服务器端渲染规避前端CORS限制：

• 在你的应用中创建一个自定义App Block，Block的Liquid代码中直接拼接产品ID请求你的代理接口（请求由Shopify服务器发起，无浏览器CORS问题）：

  {% assign qrcode_url = 'https://your-app-proxy-url/get-qrcode?product_id=' | append: product.id %}
  <img src="{{ qrcode_url }}" alt="产品二维码" />
  

• 商家可在主题编辑器中将该Block添加到产品页面，实现动态渲染二维码。

方案3：Webhook触发预生成+元字段存储 #

通过Webhook实现二维码的自动更新：

• 监听产品创建/更新的Webhook事件，当产品变动时，自动生成对应二维码并更新到产品元字段。
• 前端Liquid直接读取预存的元字段数据，完全避免前端请求环节。

关键注意事项 #

• 确保App Proxy已在Shopify后台配置，且CSP策略允许Shopify服务器访问你的代理地址。
• 元字段的命名空间和键需保持统一，避免Liquid调用出错。
• 实时生成方案需做好缓存，避免频繁请求影响性能。

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