Shopify章节标题旁添加Logo失败，请求技术排查解决

效果说明 #

• 预期效果：章节标题旁显示自定义Logo
• 失败结果：Logo未在标题旁正常显示

已修改的文件及内容 #

1. index.json #

添加了heading_image配置项：

"featured_collection_LaVJqD": {
  "type": "featured-collection",
  "settings": {
    "title": "<strong>最新上架</strong>",
    "heading_size": "h2",
    "description": "",
    "show_description": false,
    "description_style": "body",
    "collection": "",
    "products_to_show": 25,
    "columns_desktop": 4,
    "full_width": false,
    "show_view_all": true,
    "view_all_style": "solid",
    "enable_desktop_slider": true,
    "color_scheme": "",
    "image_ratio": "adapt",
    "image_shape": "default",
    "show_secondary_image": false,
    "show_vendor": false,
    "show_rating": false,
    "enable_quick_add": false,
    "columns_mobile": "2",
    "swipe_on_mobile": false,
    "padding_top": 36,
    "padding_bottom": 36,
    "heading_image": "shopify://shop_image/logotesttest.jpg"
  }
}

2. featured-collection.liquid #

添加了固定路径的img标签：

<div class="color-{{ section.settings.color_scheme }} isolate gradient">
  <div class="collection section-{{ section.id }}-padding{% if section.settings.full_width %} collection--full-width{% endif %}">
    <div class="collection__title title-wrapper title-wrapper--no-top-margin page-width{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% endif %}{% if show_desktop_slider %} collection__title--desktop-slider{% endif %}">
      {%- if section.settings.title != blank -%}
        <img alt="llogo" src="shopify://shop_images/logotesttest.jpg" width="100" height="200" class="title-image">
        <h2 class="title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
          {{ section.settings.title }}
        </h2>
      {%- endif -%}
      <!-- 其余代码省略 -->
    </div>
  </div>
</div>

3. base.css #

添加了图片浮动样式：

.title-image {
  float: left; /* or right, depending on where you want the image */
  margin-right: 10px; /* adjust spacing as needed */
}

问题原因分析 #

1. 图片路径错误：Shopify前端不支持直接使用shopify://作为图片路径，且硬编码地址未调用section配置的heading_image字段，导致图片无法加载。
2. 缺失schema定义：仅在index.json添加配置项，未在featured-collection.liquid的schema中声明heading_image设置，Liquid无法识别该变量。
3. 布局样式冲突：原标题容器的块级布局限制了float属性的生效，导致图片与标题无法横向排列。

解决方案 #

步骤1：修正featured-collection.liquid的图片调用逻辑 #

替换硬编码的img标签，改为读取section配置的图片并添加存在性判断：

{%- if section.settings.title != blank -%}
  {% if section.settings.heading_image != blank %}
    <img alt="标题Logo" src="{{ section.settings.heading_image | img_url: '200x200' }}" width="100" height="auto" class="title-image">
  {% endif %}
  <h2 class="title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
    {{ section.settings.title }}
  </h2>
{%- endif -%}

步骤2：在featured-collection.liquid的schema中添加图片选择器 #

找到文件末尾的{% schema %}块，在settings数组中加入以下配置：

{
  "type": "image_picker",
  "id": "heading_image",
  "label": "标题旁Logo"
}

这一步确保Shopify后台能识别该设置项，index.json中的配置才能生效。

步骤3：优化CSS布局样式 #

替换原base.css中的样式，使用Flex布局确保图片与标题横向对齐：

.title-wrapper {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 12px; /* 图片与标题的间距，可调整 */
}

.title-image {
  width: 100px;
  height: auto; /* 保持图片比例，避免拉伸变形 */
  object-fit: contain;
}

步骤4：发布主题并清除缓存 #

1. 在Shopify后台「在线商店」→「主题」中，点击发布修改后的主题。
2. 按Ctrl+Shift+R清除浏览器缓存，刷新页面查看效果。

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