方案一：使用自定义代码（仅首页店铺名称加粗）
一、适用场景
当商家不方便修改主题代码，或希望快速实现首页店铺名称加粗效果时，可通过后台自定义代码功能完成配置。
该方案无需编辑主题代码，仅通过后台新增一段自定义代码即可实现。
二、操作步骤
第一步：进入自定义代码
进入后台：
应用 → 自定义代码
点击新增代码。
第二步：配置代码信息
按照以下方式进行配置：
| 配置项 | 建议配置 |
|---|---|
| 代码名称 | 首页标题加粗（可自定义） |
| 应用范围 | 根据实际需求选择（PC端及移动端 / PC端 / 移动端） |
| 触发页面 | 首页 |
| 插入位置 | 顶部 |
| 主题代码语言 | Handlebars |
第三步：添加代码
在代码内容中添加以下代码：
<style>
.header__logo-text.typography-default {
font-weight: 700;
}
</style>
如后续开发提供新的代码内容，请以最新代码为准。
第四步：保存
点击保存。
刷新首页后即可查看效果。
三、验证结果
确认首页店铺名称已成功加粗，并检查：
- 首页显示符合预期；
- PC、移动端显示正常（根据应用范围验证）；
- 页面无异常样式。
四、注意事项
- 本方案为通过自定义代码实现，不会修改主题源码。
- 代码仅会在所选触发页面生效。
- 删除或停用该自定义代码后，加粗效果将失效。
- 如主题升级导致类名变化，需同步更新代码内容。
方案二：通过页头配置项修改店铺名称样式（所有页面店铺名称同步加粗）
一、适用场景
适用于已升级支持「店铺名称字体版式」配置项的 Fashion/Bottle 主题。
商家无需编写代码，可直接在主题编辑器中修改页头店铺名称的字体样式。
二、操作步骤
- 进入 在线商店 > 主题 > 自定义。
- 在左侧选择 页头（Header） 组件。
- 在右侧找到 店铺名称字体版式 配置项。
- 根据需要选择对应的字体样式（如：默认、标题、标题1~标题5）。
- 保存配置并预览效果。
三、效果说明
- 页头店铺名称将采用所选择的字体版式显示。
- 字体样式（如字重、字号、行高等）与对应的 Typography 配置保持一致。
- 无需添加自定义代码即可完成样式调整。
四、适用优势
可视化配置，无需修改代码。- 操作简单，维护成本低。
- 与主题 Typography 配置保持一致，便于统一管理。
方案三：修改主题代码（所有页面店铺名称同步加粗）
一、适用场景
当商家希望店铺名称显示为加粗时，可通过主题代码包增加一段 CSS 实现。
二、适用范围
- 支持修改主题代码包的店铺
- 不影响 Logo 图片，仅影响文字 Logo
三、操作步骤
第一步： 进入主题代码包
后台进入：
在线商店 → 主题 → 当前主题 → 编辑代码
第二步： 找到 Header 样式文件
在左侧搜索框输入：
header
找到：
sections
└── header
└── header.css
不同主题目录可能略有区别，但一般都是 header.css。
第三步： 搜索 Logo Text
点击右上角查找
搜索：
.header__logo-text
一般会找到类似代码：
.header__logo-text {
text-align: center;
word-break: break-all;
white-space: normal;
}
第四步： 在其后新增样式
紧接着下面新增：
.header__logo-text.typography-default {
font-weight: 700;
}
最终效果例如：
.header__logo-text {
text-align: center;
word-break: break-all;
white-space: normal;
}
.header__logo-text.typography-default {
font-weight: 700;
}
.header__logo-image {
width: var(--desktop-size);
height: auto;
}
建议放在 .header__logo-text {} 后面，便于维护。
第五步： 保存代码
点击右上角
保存
等待保存成功。
第六步： 验证效果
打开店铺首页。
使用浏览器开发者工具 检查：
选中
<span class="header__logo-text typography-default">
确认样式中出现：
font-weight:700;
页面效果应为：
- 页面店铺名称变粗
- Logo 图片不受影响
- 其它 Header 布局正常
四、验证项
| 验证项 | 预期效果 |
|---|---|
| 首页店铺名称 | 加粗显示 |
| PC | 正常 |
| Mobile | 正常 |
| Logo 图片 | 无变化 |
| Header 布局 | 无错位 |
五、注意事项
- 仅适用于文字 Logo。
如果 Header 使用的是 Logo 图片：
<img class="header__logo-image">
则不会生效。
- 必须存在：
<span class="header__logo-text typography-default">
如果没有 typography-default：
<span class="header__logo-text">
则需要改为：
.header__logo-text{
font-weight:700;
}
或者根据主题实际 class 调整选择器。
- 不同主题代码目录可能不同。
例如：
sections/header/header.css
或
assets/header.css
均属于正常情况，只需找到 Header 对应 CSS 文件即可。
六、验收标准
- 页面文字 Logo 显示加粗。
- 非文字 Logo（图片 Logo）无异常。
- Header 布局未发生变化。
- PC 与移动端显示正常。
- 浏览器开发者工具中可看到
.header__logo-text.typography-default已应用font-weight: 700;。