在 Shopify 店铺搜索中添加搜索词高亮功能
在一个产品众多、内容丰富的Shopify商店中，搜索功能是用户快速找到心仪商品的核心路径。而通过“关键词高亮显示”，可以让搜索结果更直观、聚焦，增强用户对搜索准确度的信心，有效提升转化率。
本文将教你如何在Shopify主题中添加“关键词高亮”功能，包括基本逻辑、代码实现与扩展建议，适用于大多数支持搜索模板的自定义主题。
一、为什么需要关键词高亮功能？
| 用户问题 | 高亮功能带来的好处 |
| 搜索结果信息量大，看不出匹配点 | 一眼聚焦搜索关键词，提高效率 |
| 无法确认结果与关键词匹配度 | 显示关键词匹配位置，增强信任感 |
| 搜索无感、体验平淡 | 提升交互感与视觉反馈，增强品牌体验 |
二、关键词高亮功能的基本原理
实现逻辑如下：
获取用户输入的搜索词（如 URL 中的 ?q=xxx 参数）
在展示搜索结果时，查找该关键词在标题或描述中出现的位置
将关键词用 关键词 包裹
使用CSS设置高亮样式，如背景色、加粗等
三、具体实现步骤
步骤一：修改搜索结果模板
路径：templates/search.json.liquid 或 templates/search.liquid（视主题结构而定）
找到显示产品标题或描述的位置：
{{ item.title }}
{{ item.content }}
替换为动态处理后的高亮内容：
{% assign query = search.terms | downcase %}
{{ item.title | highlight: query }}
{{ item.content | highlight: query }}
⚠ 默认Shopify并未内建 highlight filter，我们需在前端JS中实现它。
步骤二：在前端添加 JavaScript 高亮逻辑
在 theme.liquid 页脚前加入以下脚本（可存放在 assets/custom.js 中）：
document.addEventListener(‘DOMContentLoaded’, function () {
const urlParams = new URLSearchParams(window.location.search);
const keyword = urlParams.get(‘q’);
if (keyword) {
const pattern = new RegExp(`(${keyword})`, ‘gi’);
const elements = document.querySelectorAll(‘.search-result h3, .search-result p’);
elements.forEach(el => {
el.innerHTML = el.innerHTML.replace(pattern, ‘$1’);
});
}
});
请确保搜索结果块中相关元素加上 .search-result 类，以便选择器匹配。
步骤三：添加CSS样式美化高亮效果
在 theme.css 或 base.css 中加入：
.highlight {
background-color: #fff8b3;
color: #000;
font-weight: bold;
padding: 0 2px;
border-radius: 2px;
}
你也可以使用品牌色或渐变样式进一步增强美感。
四、扩展功能建议
| 功能 | 实现思路 |
| 多关键词支持 | 将搜索词按空格 split(‘ ‘) 并遍历多次替换 |
| 模糊匹配（拼写容错） | 使用 Fuse.js 等 JS库进行搜索词模糊匹配 |
| 高亮摘要内容片段 | 提取关键词前后固定字数片段，提高展示效率 |
| 支持搜索建议词高亮 | 在 Ajax 搜索联想中也实现关键词高亮 |
五、注意事项与调试建议
| 问题 | 建议操作 |
| 中文关键词未高亮 | 正则表达式需支持Unicode编码 (\u) |
| 出现重复包裹或嵌套 span | 可在替换前先 innerText 提取纯文本再处理 |
| 关键词大小写不一致 | 使用 gi 修饰符强制忽略大小写 |
| URL中参数为空或乱码 | 添加 if (keyword) 判断并进行 decodeURIComponent() |
六、结语：关键词高亮，是提升“搜索体验感”的小心机
在千篇一律的搜索结果页面中，一个简单的关键词高亮功能，可能就是决定用户是否愿意继续浏览和下单的关键。它不仅提升页面的可读性，更在潜移默化中传递出专业、细致、以用户为核心的品牌调性。
搜索体验的提升，不一定靠复杂的算法，有时候，一点“视觉回馈”，就能让用户感受到不一样的用心。
WESWOO - 跨境独立站开发专家
助力中国品牌出海，我们为您提供专业的独立站搭建和Shopify Plus集成技术服务。精准的跨境电商解决方案，助力品牌在全球市场成功落地，轻松跨越国界。
- shopify独立站品牌化
- 海外UI视觉设计
- SNS多渠道品牌营销