Shopify Liquid循环中如何获取商品变体的CDN完整图片URL

直接使用Shopify官方提供的image_url过滤器处理变体图片对象即可，系统会自动补全CDN域名、尺寸参数、版本戳，生成可直接访问的完整路径，不需要手动拼接字符串。

可直接复用的循环代码 #

{% for variant in product.variants %}
  {{ variant.id }}<br>
  {{ variant.sku }}<br>
  {{ variant.title }}<br>
  {{ variant.price | divided_by: 100 }}<br>
  <!-- 直接渲染可正常加载的图片标签，指定600px宽度（对应示例里的grande尺寸） -->
  <img src="{{ variant.featured_image | image_url: width: 600 }}" alt="{{ variant.title }}" loading="lazy">
  <!-- 仅获取完整URL字符串的写法 -->
  完整CDN地址：{{ variant.featured_image | image_url: width: 600 }}
{% endfor %}

常见踩坑说明 #

• 不要直接输出variant.image或variant.featured_image.src：这两种写法默认只会返回products/xxx.jpg格式的相对路径，不会补全CDN域名和版本参数，放到img标签里必然会加载失败
• image_url过滤器支持自定义尺寸：可传入具体宽度值，也可以直接用预设尺寸关键字，比如image_url: 'grande'、image_url: 'master'（原图），按需选择即可
• 空值兼容：如果某个变体没有上传专属关联图，过滤器会自动 fallback 到商品主图，不会出现空链接报错
• 命名优化提示：原代码里循环变量命名用了复数variants，单条遍历项实际是单个变体对象，建议改成单数variant提升代码可读性，不修改也不会影响功能运行

内容的提问来源于stack exchange，提问作者Adam Scot