Shopify Dawn主题图片横幅区域添加Logo技术求助

数据老陈

2026-7-30

1. 给区块新增Logo配置字段（解决后台关联Logo的问题）

Shopify的区块需要先在配置中定义字段，才能在后台选择媒体库中的图片。你可以直接打开sections/image-banner.liquid，翻到文件末尾的{% schema %}代码块，在"settings"数组里添加这段配置：

{
  "type": "image_picker",
  "id": "banner_logo",
  "label": "Banner Logo"
}

保存后，回到后台编辑Image Banner区块时，就能看到新增的Logo选择项，直接选取已上传的Logo即可。

2. 在Liquid文件中渲染Logo

回到image-banner.liquid，找到你想要放置Logo的位置（比如Banner容器的开头、标题上方等），插入以下代码：

{% if section.settings.banner_logo %}
  <div class="banner-logo">
    {{ section.settings.banner_logo | image_url: width: 200 | image_tag: alt: shop.name }}
  </div>
{% endif %}

section.settings.banner_logo对应你刚定义的配置字段，通过判断确保只有选了Logo才会渲染
image_url: width:200用于控制Logo的最大宽度，可根据需求调整数值
image_tag会自动生成符合Shopify规范的img标签，alt文本可以替换为你的Logo名称

3. 用CSS调整Logo样式（按需自定义）

在主题的自定义CSS面板，或者assets/component-image-banner.css文件中添加样式，比如将Logo固定在Banner左上角：

.banner-logo {
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: 10;
  max-width: 150px;
  /* 需要透明效果可添加：opacity: 0.8; */
}

/* 移动端适配 */
@media screen and (max-width: 749px) {
  .banner-logo {
    max-width: 100px;
    top: 1rem;
    left: 1rem;
  }
}