Shopify主题中能否单独展示图片？无需for循环实现独立编辑

要实现不用for循环、每张图片放入专属容器的需求，你可以直接通过区块索引逐个调用section.blocks中的图片设置，同时为每张图片包裹独立容器元素，方便后续独立编辑样式或结构。

代码示例 #

假设你需要最多展示3张图片，代码如下：

<div class="col">
  <!-- 第一张图片专属容器 -->
  {% if section.blocks[0] %}
    <div class="image-container image-container--first">
      <img src="{{ section.blocks[0].settings.image | image_url: width: 250 }}" 
           alt="{{ section.blocks[0].settings.image.alt | escape }}">
    </div>
  {% endif %}

  <!-- 第二张图片专属容器 -->
  {% if section.blocks[1] %}
    <div class="image-container image-container--second">
      <img src="{{ section.blocks[1].settings.image | image_url: width: 250 }}" 
           alt="{{ section.blocks[1].settings.image.alt | escape }}">
    </div>
  {% endif %}

  <!-- 第三张图片专属容器 -->
  {% if section.blocks[2] %}
    <div class="image-container image-container--third">
      <img src="{{ section.blocks[2].settings.image | image_url: width: 250 }}" 
           alt="{{ section.blocks[2].settings.image.alt | escape }}">
    </div>
  {% endif %}
</div>

关键说明 #

• 用section.blocks[index]直接访问对应位置的区块，索引从0开始计数
• 加入{% if section.blocks[index] %}判断，避免未添加对应区块时输出空容器
• 每个容器添加专属类名（如image-container--first），可单独编写CSS样式实现独立定制
• 补充图片alt属性，提升页面可访问性

注意事项 #

• 这种方式需要提前确定最大展示图片数量，后续要新增图片需手动添加对应索引的代码块
• 主题编辑器中区块的顺序对应代码中的索引位置，调整区块顺序会同步改变页面图片展示顺序
• 若需给每个区块添加更多自定义设置（如标题、跳转链接），直接调用section.blocks[index].settings.xxx即可

内容的提问来源于stack exchange，提问作者Hyun Hae Park