如何在Shopify幻灯片中设置桌面与移动端不同图片？

方案1：自定义元字段 + CSS媒体查询（通用方案） #

适合产品页、页面等需要不同设备显示不同图片的场景：

1. 添加自定义元字段
   后台进入「设置」→「元字段」→选择「产品」或「页面」→点击「添加定义」：

   • 名称设为desktop_image，类型选「文件」，用于上传桌面端图片
   • 再添加一个mobile_image，同样类型为「文件」，用于上传移动端图片
     完成后到对应产品/页面编辑页，上传对应的两张图片。

2. 修改主题代码替换图片
   找到主题中负责显示目标图片的模板文件（比如product-template.liquid或page.liquid），替换原有图片代码：

   <div class="responsive-image-wrap">
     <img class="img-desktop" src="{{ product.metafields.custom.desktop_image.src | img_url: '1200x' }}" alt="{{ product.title }}">
     <img class="img-mobile" src="{{ product.metafields.custom.mobile_image.src | img_url: '600x' }}" alt="{{ product.title }}">
   </div>
   

3. 添加CSS控制显示逻辑
   在主题的base.css或stylesheet.css文件末尾添加：

   .responsive-image-wrap {
     width: 100%;
     position: relative;
   }
   .img-desktop {
     display: block;
     width: 100%;
   }
   .img-mobile {
     display: none;
     width: 100%;
   }
   /* 根据主题断点调整，这里用768px作为移动端阈值 */
   @media (max-width: 768px) {
     .img-desktop { display: none; }
     .img-mobile { display: block; }
   }
   

方案2：主题编辑器区块显示条件（无代码方案） #

如果你的主题（如Dawn、Refresh等官方主题）支持区块显示条件，可直接操作：

• 进入「在线商店」→「主题」→「自定义」，找到要修改的页面/模板
• 添加两个「图片」区块，分别上传桌面、移动端图片
• 点击每个区块的「显示条件」：
  • 桌面端图片设置为「屏幕宽度 > 768px 时显示」
  • 移动端图片设置为「屏幕宽度 ≤ 768px 时显示」
• 调整两个区块到同一位置，保存即可。

方案3：修改Section文件（针对首页横幅等模块） #

如果是首页的Hero Banner这类Section，直接修改对应Section文件：

1. 添加图片上传字段
   找到目标Section文件（如hero.liquid），在schema的settings数组中添加：

   {
     "type": "image_picker",
     "id": "desktop_banner",
     "label": "桌面端横幅图片"
   },
   {
     "type": "image_picker",
     "id": "mobile_banner",
     "label": "移动端横幅图片"
   }
   

2. 替换Section中的图片代码
   找到原有图片渲染的代码，替换为：

   <div class="hero-banner-wrap">
     {% if section.settings.desktop_banner %}
       <img class="banner-desktop" src="{{ section.settings.desktop_banner | img_url: '1920x' }}" alt="{{ section.settings.desktop_banner.alt }}">
     {% endif %}
     {% if section.settings.mobile_banner %}
       <img class="banner-mobile" src="{{ section.settings.mobile_banner | img_url: '750x' }}" alt="{{ section.settings.mobile_banner.alt }}">
     {% endif %}
   </div>
   

3. 添加CSS控制显示
   同样在CSS文件中添加媒体查询：

   .hero-banner-wrap { width: 100%; }
   .banner-desktop { display: block; width: 100%; }
   .banner-mobile { display: none; width: 100%; }
   @media (max-width: 768px) {
     .banner-desktop { display: none; }
     .banner-mobile { display: block; }
   }
   

注意事项 #

• 修改代码前务必备份当前主题，避免操作失误导致网站异常
• 图片尺寸建议适配设备：桌面端用1920px宽，移动端用750px宽左右
• 可根据主题实际断点调整媒体查询中的宽度值（部分主题用750px作为移动端阈值）

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