Shopify中实现fixed position边角文本与居中图片布局咨询

不需要装额外插件，直接通过主题自定义代码就能实现，全版本主题通用，具体落地步骤如下：

操作入口 #

• 全站生效：进入Shopify后台 → 在线商店 → 主题 → 点击当前使用主题的「操作」下拉按钮 → 选择「编辑代码」
• 单页面生效：直接在主题可视化编辑器里，对应页面添加「自定义HTML」模块即可，不用改全局代码

插入核心结构代码 #

如果要全站生效，找到theme.liquid布局文件，把下面的HTML代码贴到文件末尾的</body>标签之前；如果是单页面生效，直接把代码粘贴到自定义HTML模块里：

<!-- 四个边角固定文本，不需要的角直接删掉对应div即可 -->
<div class="fixed-corner fixed-tl">左上角要显示的文字</div>
<div class="fixed-corner fixed-tr">右上角要显示的文字</div>
<div class="fixed-corner fixed-bl">左下角要显示的文字</div>
<div class="fixed-corner fixed-br">右下角要显示的文字</div>

<!-- 页面中间展示图片 -->
<div class="center-img-container">
  <img src="替换成你上传到Shopify后台的图片链接" alt="图片描述">
</div>

添加样式代码 #

如果是全站生效，找到主题全局样式文件（一般文件名是base.css/theme.css/global.css，不同主题命名略有区别），把下面CSS贴到文件最末尾；如果是单页面自定义HTML模块，把CSS用<style></style>标签包裹，和上面的HTML放一起即可：

/* 固定文本通用样式 */
.fixed-corner {
  position: fixed;
  z-index: 999; /* 数值越大层级越高，避免被导航、弹窗遮挡 */
  font-size: 14px;
  color: #111; /* 按需修改文字颜色 */
  padding: 6px 10px;
  /* 需要半透背景就取消下面这行注释
  background: rgba(255,255,255,0.85);
  border-radius: 4px;
  */
}
/* 四个角位置定义 */
.fixed-tl { top: 20px; left: 20px; }
.fixed-tr { top: 20px; right: 20px; }
.fixed-bl { bottom: 20px; left: 20px; }
.fixed-br { bottom: 20px; right: 20px; }

/* 中间图片布局样式 */
.center-img-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 60px; /* 预留边距，避免图片被边角文字遮挡 */
}
.center-img-container img {
  max-width: 100%;
  height: auto;
  /* 要限制图片最大宽度就取消下面注释，数值按需调整
  max-width: 720px;
  */
}

/* 移动端适配 */
@media (max-width: 767px) {
  .fixed-corner {
    font-size: 12px;
    padding: 4px 6px;
  }
  .fixed-tl, .fixed-tr { top: 12px; }
  .fixed-bl, .fixed-br { bottom: 12px; }
  .fixed-tl, .fixed-bl { left: 12px; }
  .fixed-tr, .fixed-br { right: 12px; }
  .center-img-container {
    padding: 70px 24px;
  }
}

注意：如果只需要在特定页面展示该效果，不要把代码粘贴到全局文件里，否则所有页面都会加载边角固定文本，找到对应页面的模板文件粘贴即可。

常见调整说明 #

• 不需要四个角都放文字的话，直接删掉HTML里对应角的div就行
• 文字离边角的距离直接改对应类里的top/bottom/left/right数值，数值越大距离越远
• 如果固定文字被其他页面元素盖住，把.fixed-corner的z-index数值调大到9999即可
• 文字大小、颜色直接改对应CSS属性值就行，和普通CSS调整规则完全一致

效果参考：

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