Shopify自定义板块中部分image-picker无法使用的问题排查

Shopify单板块内的image-picker没有数量限制，4个完全在允许范围内，问题大概率出在schema解析或页面渲染层面，以下是具体排查方向：

核心排查点 #

• 修正Schema的引号格式：你提供的代码中schema使用了HTML转义的"，但在Shopify的{% schema %}标签内，应该直接使用标准双引号"，转义字符会导致Shopify无法正确解析完整的设置项，从而忽略后面的左右箭头image-picker。修正后的schema头部示例：

{% schema %}
{
  "name": "Anim'Sport",
  "settings": [
    {
      "type": "text",
      "label": "Title",
      "id": "title",
      "default": "blabla"
    },
    ...
  ]
}
{% endschema %}

• 校验Schema语法正确性：将schema的JSON部分（去掉{% schema %}和{% endschema %}标签）放到JSON校验工具中检查，确保没有逗号遗漏、括号不闭合等语法错误，这类错误会导致Shopify中断解析后续设置项。

• 查看浏览器控制台错误：在Shopify后台编辑该板块时，打开浏览器开发者工具（F12）的Console标签，查看是否有Schema解析失败、编辑器脚本报错等信息，这些错误会直接导致部分设置项无法交互。

• 主题兼容性测试：将该板块添加到Shopify官方默认主题（如Dawn）中测试，若能正常使用所有image-picker，说明当前使用的主题存在兼容性限制，需要调整主题代码适配多image-picker场景。

你提供的原始代码（含转义引号问题） #

{% schema %}
{
  "name": "Anim'Sport",
  "settings": [
    {
      "type": "text",
      "label": "Title",
      "id": "title",
      "default": "blabla"
    },
    {
      "type": "textarea",
      "label": "Description",
      "id": "description",
      "default": "blabla"
    },
    {
      "type": "image_picker",
      "label": "Image 1",
      "id": "image_1"
    },
    {
      "type": "image_picker",
      "label": "Image 2",
      "id": "image_2"
    },
    {
      "type": "image_picker",
      "label": "Left Arrow Image",
      "id": "left_arrow_image"
    },
    {
      "type": "image_picker",
      "label": "Right Arrow Image",
      "id": "right_arrow_image"
    }
  ],
  "presets": [
    {
      "name": "Anim'Sport"
    }
  ]
}
{% endschema %}

<div class=&quot;animsport-container&quot; style=&quot;display: flex;&quot;&gt;
    <div class=&quot;animsport-text&quot;&gt;
        <h1>{{ section.settings.title }}</h1>
        <p>{{ section.settings.description }}</p>
    </div>
    <div class=&quot;animsport-images-container&quot;>
        <img src=&quot;{{ section.settings.image_1 | img_url }}&quot; alt=&quot;Image 1&quot; class=&quot;animsport-images-album&quot; id=&quot;current-image&quot; />
        
        
        <img src=&quot;{{ section.settings.right_arrow_image | img_url }}&quot; alt=&quot;Arrow Right&quot; class=&quot;animsport-arrow-right&quot; id=&quot;right-arrow&quot; />
        <img src=&quot;{{ section.settings.left_arrow_image | img_url }}&quot; alt=&quot;Arrow Left&quot; class=&quot;animsport-arrow-left&quot; id=&quot;left-arrow&quot; />
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const images = [
        "{{ section.settings.image_1 | img_url }}", 
        "{{ section.settings.image_2 | img_url }}"
    ];

    let currentIndex = 0; 

    const imageElement = document.getElementById('current-image');
    const leftArrow = document.getElementById('left-arrow');
    const rightArrow = document.getElementById('right-arrow');

    function changeImage() {
        imageElement.src = images[currentIndex];
    }

    rightArrow.addEventListener('click', () => {
        currentIndex = (currentIndex + 1) % images.length; 
        changeImage();
    });

    leftArrow.addEventListener('click', () => {
        currentIndex = (currentIndex - 1 + images.length) % images.length; 
        changeImage();
    });
});
</script>

内容的提问来源于stack exchange，提问作者Charles A.