Shopify中Liquid文件图片响应式改造：让图片默认铺满可视宽度

开发者阿泽

2026-7-25

问题

在Shopify后台开发了一个新section，支持向页面添加图片，目前前端已能显示图片，但图片默认右对齐。需要实现图片默认扩展至可视屏幕宽度，同时具备响应式效果。

相关代码

image.liquid 文件代码

{%for block in section.blocks %}
    
   {{ block.settings.image_1 | img_url: "1250x" | img_tag }}

{% endfor %}
{% schema %}
  {
  "name": "Images_N",
  "blocks" : [ 
    {
      "type" : "image",
        "name" : "Image block",
        "settings": [
                        {
                              "type": "image_picker",
                              "id": "image_1",
                              "label": "Images_N"    
                        }
                    ] 
    }
        
    ],
    "presets" : [
                {
                  "category" : "image",
                  "name"  : "Images_N"
                }
    ]
  
}
{% endschema %}

product.aplustemplate.liquid 文件代码

{% section 'product-template' %}
{% section 'image' %}

解决方案

步骤1：修改image.liquid中的图片输出逻辑

给图片添加自定义类名，同时补充alt属性（提升页面可访问性），修改后的循环部分代码如下：

{%for block in section.blocks %}
  {% assign image = block.settings.image_1 %}
  {{ image | img_url: "1250x" | img_tag: image.alt, class: 'full-width-responsive-image' }}
{% endfor %}