Shopify自定义页面集合选择Section开发问题：无法在Liquid文件中提取集合信息

阿华AIGC实验室

2026-4-30

解决Shopify Section无法提取选中集合信息的问题

我来帮你搞定这个问题！你现在的核心问题是没有正确从Section的Block设置里动态获取选中的Collection数据，而是在尝试调用全局的collection变量（这个只有在集合页面才有效）或者硬编码的集合名称，这肯定拿不到你选中的那个集合的信息。

错误原因分析

你循环section.blocks时，没有从当前block的settings里提取选中的集合句柄，而是直接用collection变量，这在非集合页面是无效的
你之前写的collections['flex-collection']这类代码是硬编码了集合的句柄，不是从后台选中的设置里动态获取的

修正后的完整代码

下面是修复后的Section代码，我已经帮你调整了关键部分，并且保留了你的原有结构：

<div data-section-id="{{ section.id }}" > 
  <div class="flex-wrapper ignite-collection">
    <ul>
      {%- for block in section.blocks -%}
        {%- assign selected_collection = collections[block.settings.flex-collection] -%}
        {%- if selected_collection -%}
          <li>
            <a href="{{ selected_collection.url }}">
              <img src="{{ selected_collection.image | img_url: '350x' }}" alt="{{ selected_collection.title }}">
              <h4 class="flex-collection-heading">{{ selected_collection.title }}</h4>
            </a>
          </li>
        {%- endif -%}
      {%- endfor -%}
    </ul>
  </div>
</div>

{% schema %}
{ 
  "name": "Ignite Collection list", 
  "class": "ignite-collection-list-section", 
  "max_blocks": 6, 
  "settings": [ 
    { 
      "type": "select", 
      "id": "justify-content", 
      "label": "Justify Content", 
      "options": [ 
        {"value": "flex-start", "label":"Flex Start"}, 
        {"value": "flex-end", "label":"Flex End"}, 
        {"value": "center", "label":"Center"}, 
        {"value": "space-between","label":"Space Between"}, 
        {"value": "space-around","label":"Space Around"}, 
        {"value": "space-evenly","label":"Space Evenly"} 
      ] 
    } 
  ], 
  "presets": [ 
    { 
      "name": "Ignite Collection list", 
      "category": "Collections", 
      "blocks": [ 
        {"type": "collection"}, 
        {"type": "collection"} 
      ] 
    } 
  ], 
  "blocks": [ 
    { 
      "type": "collection", 
      "name": "Collection", 
      "settings": [ 
        { 
          "id": "flex-collection", 
          "type": "collection", 
          "label": "Collection" 
        } 
      ] 
    } 
  ] 
}
{% endschema %}

关键修改点说明

获取选中的集合对象：在循环每个block时，用{% assign selected_collection = collections[block.settings.flex-collection] %}从当前block的设置里拿到选中集合的句柄，再通过collections[]获取完整的集合对象
添加存在性判断：用{%- if selected_collection -%}包裹内容，避免当后台没有选中集合或者集合不存在时出现报错
清理无效代码：移除了你之前测试用的那些<p>标签，让代码更干净
正确调用集合属性：所有集合的URL、图片、标题都通过selected_collection对象来调用，比如selected_collection.url、selected_collection.image等