Shopify自定义section无法选择图片问题求助

• 核心错误原因：你在schema中定义的block type 使用了Shopify内置的类型名 image，这会和Shopify原生的图片block组件产生冲突，导致图片选择器功能异常。

修复步骤 #

1. 将block的type修改为自定义名称（比如about_slider_image），避免与内置类型冲突
2. 同步调整模板中的{% when %}条件，匹配新的block type

修改后的完整代码 #

模板部分 #

<section id="menu">
  <div class="wrapper">
    <div class="slider-menu">
      <div class="menu-wrapper">
        <div class="menu-photo">
          {% for block in section.blocks %}  
            {% case block.type %}
          
              {% when 'about_slider_image' %}  
                <div class="slide"><img class="load lazyload" data-src="{{ block.settings.image.src | img_url: "medium" }}" width="1140" height="715" alt="{{ block.settings.image.alt | default: "フ" }}"></div> 
          
            {% endcase %} 
          {% endfor %}
        </div>
      </div>
  </div>
</section>

Schema部分 #

{% schema %}
{
  "name": "about-slider",
  "tag": "section",
  "class": "section",
  "blocks": [
    {
      "name": "about_slider_blocks",
      "type": "about_slider_image",
      "settings": [
        {
          "type": "text",
          "id": "about_tab_name",
          "label": "Tab Name"
        },
        {
          "type": "text",
          "id": "about_tab_content_heading",
          "label": "Tab Heading"
        },
        {
          "type": "richtext",
          "id": "about_tab_content",
          "label": "Tab Body"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Tab Image"
        }
      ]
    }
  ],
  "max_blocks": 5,
  "presets": [
    {
      "name": "custom-about-slider",
      "blocks": [
        {
          "type": "about_slider_image"
        }
      ]
    }
  ]
}
{% endschema %}

额外优化提示 #

顺便将img标签的alt属性改为从图片设置中获取{{ block.settings.image.alt }}，比固定值更符合SEO规范。

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