如何在Shopify主题应用区块设置中使用app.metafields作为动态选项？

核心问题原因 #

Shopify主题应用扩展的{% schema %}是静态JSON结构，在扩展上传验证阶段就会被解析，仅available_if字段支持Liquid语法，其余设置项的JSON值必须是静态定义的。你直接将{{ app.metafields.myapp.somelistofdynamicvalues }}写入options的写法，会被解析器识别为字符串而非数组，因此触发options must be an array错误。

可行替代方案 #

方案1：预览区域动态渲染选项+自动同步设置值 #

放弃在设置面板中显示动态选项，改为在区块预览区域渲染可交互的选项，通过JS将选中值同步到设置项中，让商家能在编辑器内完成选择：

1. 修改schema，定义用于存储选中值的文本输入项：

{% schema %}
{
  "name": "App block",
  "target": "section",
  "available_if": "{{ app.metafields.myapp.global_enable }}",
  "stylesheet": "animate.css",
  "javascript": "app.min.js",
  "settings": [
    {
      "type": "header",
      "content": "App Block"
    },
    {
      "type": "text",
      "id": "selected_value",
      "label": "选中值（自动填充）",
      "default": ""
    }
  ]
}
{% endschema %}

2. 在区块Liquid模板中渲染动态选项并添加同步逻辑：

{% if app.metafields.myapp.somelistofdynamicvalues %}
  <div class="editor-dynamic-options">
    {% for value in app.metafields.myapp.somelistofdynamicvalues %}
      <button class="dynamic-option-btn" data-value="{{ value }}">{{ value }}</button>
    {% endfor %}
  </div>
{% endif %}

<style>
  .editor-dynamic-options { margin: 10px 0; }
  .dynamic-option-btn { 
    padding: 6px 12px; 
    margin-right: 8px; 
    cursor: pointer;
  }
  .dynamic-option-btn.selected { background: #008060; color: #fff; }
</style>

<script>
  // 点击选项时同步到设置输入框
  document.querySelectorAll('.dynamic-option-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const input = document.querySelector('[data-setting-id="selected_value"] input');
      if (input) {
        input.value = btn.dataset.value;
        input.dispatchEvent(new Event('change'));
        // 高亮选中项
        document.querySelectorAll('.dynamic-option-btn').forEach(b => b.classList.remove('selected'));
        btn.classList.add('selected');
      }
    });
  });

  // 页面加载时高亮已保存的选项
  window.addEventListener('load', () => {
    const savedValue = '{{ section.settings.selected_value }}';
    if (savedValue) {
      document.querySelector(`.dynamic-option-btn[data-value="${savedValue}"]`)?.classList.add('selected');
    }
  });
</script>

方案2：关联Shopify原生资源（仅适用于特定场景） #

如果你的动态选项是产品、集合等Shopify原生资源，可以使用resource_reference类型设置项，让商家通过动态源选择资源后，在Liquid中读取该资源的metafield值：

{% schema %}
{
  "settings": [
    {
      "type": "product",
      "id": "target_product",
      "label": "选择目标产品"
    }
  ]
}
{% endschema %}

{% comment %} 在模板中读取选中产品的metafield {% endcomment %}
{% if section.settings.target_product %}
  {% assign product_meta = section.settings.target_product.metafields.myapp.custom_field %}
{% endif %}

关键注意事项 #

• 主题应用扩展的schema仅available_if支持Liquid，其余设置项必须是静态JSON，无法动态注入metafield内容。
• 主题编辑器的设置面板UI完全基于schema静态定义生成，无法动态加载外部数据源作为选项。

内容的提问来源于stack exchange，提问作者S.M. Pat