Shopify自定义网站二级博客页面特色图片与标题消失问题求助

1. 核对模板变量调用 #

Shopify博客相关页面的核心显示逻辑依赖Liquid模板变量，先检查对应模板文件（article.liquid 对应文章详情页，blog.liquid 对应博客列表页）是否正确调用了以下变量：

• 标题：文章页用{{ article.title }}，博客列表页用{{ blog.title }}
• 特色图：文章页用{{ article.featured_image | img_url: 'large' }}，博客列表页用{{ blog.image | img_url: 'large' }}
  如果模板中缺失这些变量，直接补入对应位置即可。

2. 排查条件判断限制 #

部分主题会给标题/图片添加页面显示条件，比如类似以下代码会导致非指定页面无法显示内容：

{% if template == 'index' %}
  <h1>{{ article.title }}</h1>
{% endif %}

需将条件修改为包含博客相关页面，例如：

{% if template contains 'blog' or template contains 'article' %}
  <h1>{{ article.title }}</h1>
{% endif %}

3. 检查Section/Block配置（Online Store 2.0主题） #

若使用新版主题，博客页面多由Sections组件构建：

• 进入Shopify后台→在线商店→主题→自定义，选择对应的博客/文章页面
• 确认是否添加了「标题」「特色图」类的Block，且未被隐藏
• 查看Block设置，确认开启了显示开关，且数据源关联到文章/博客的标题、特色图

4. 验证变量可用性 #

若变量调用正确但仍不显示，可在模板中临时添加调试代码，确认数据源是否正常：

{{ article | json }}

查看输出的JSON内容，确认是否包含title和featured_image字段。如果缺失，说明文章本身未设置标题/特色图，或主题自定义逻辑过滤了这些字段。

5. 排查JavaScript动态隐藏 #

部分主题会通过JS动态修改DOM元素：

• 打开浏览器开发者工具（F12）→元素面板，搜索标题/图片的HTML标签，确认元素是否存在但被设置display: none/visibility: hidden
• 切换到控制台面板，查看是否有移除DOM节点的JS代码，针对性调整

6. 检查主题全局设置 #

进入主题设置→博客/文章页面，确认是否存在控制标题、特色图显示的开关，避免因误操作关闭了显示功能

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