如何在Shopify Dawn主题中仅隐藏桌面端的Banner区块？

问题分析 #

你尝试添加display:none到桌面端媒体查询但无效，大概率是CSS优先级不足、选择器不够精准，或是主题内置样式/JS覆盖了你的设置。以下是几种可靠的解决方法：

方法一：精准CSS隐藏（快速生效） #

直接针对Banner的唯一ID添加高优先级样式，确保覆盖主题默认样式：

在你的Banner section代码中，新增一个独立的<style>块（放在现有样式之后即可）：

{%- style -%}
  /* 桌面端完全隐藏Banner */
  @media screen and (min-width: 750px) {
    #Banner-{{ section.id }} {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  }
{%- endstyle -%}

为什么这样有效？ #

• 使用Banner的唯一ID（#Banner-{{ section.id }}）作为选择器，优先级远高于类选择器；
• 同时设置多个隐藏属性，避免因主题JS或其他样式导致的布局残留；
• !important强制提升样式优先级，确保不会被其他规则覆盖。

方法二：Liquid条件渲染（更高效） #

直接在桌面端不输出Banner的任何代码，既节省资源又彻底避免显示问题：

将整个Banner的HTML代码包裹在Liquid条件判断中，仅在移动端渲染：

{%- if request.mobile -%}
  <!-- 原Banner的所有HTML代码从<div id="Banner-{{ section.id }}" ...>开始到结束 -->
  <div id="Banner-{{ section.id }}" class=" {{ section.settings.show_on_device }} banner ...">
    <!-- 内部图片、内容等代码 -->
  </div>
{%- endif -%}

说明 #

• request.mobile是Shopify内置变量，自动识别访问设备是否为移动设备；
• 桌面端不会加载Banner的图片、样式和内容，性能更优。

方法三：检查主题内置设置（无代码方案） #

部分Dawn主题版本在Banner区块的设置面板中，提供了显示设备选项：

• 进入Shopify后台 → 在线商店 → 主题 → 自定义 → 找到目标Banner区块；
• 查找类似“在哪些设备上显示”的设置，选择“仅移动端”即可。

如果有这个选项，优先使用该方法，无需编写任何代码。

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