在 Shopify 店铺搜索中添加搜索词高亮功能

在一个产品众多、内容丰富的Shopify商店中，搜索功能是用户快速找到心仪商品的核心路径。而通过“关键词高亮显示”，可以让搜索结果更直观、聚焦，增强用户对搜索准确度的信心，有效提升转化率。

本文将教你如何在Shopify主题中添加“关键词高亮”功能，包括基本逻辑、代码实现与扩展建议，适用于大多数支持搜索模板的自定义主题。

一、为什么需要关键词高亮功能？

用户问题

高亮功能带来的好处

搜索结果信息量大，看不出匹配点

一眼聚焦搜索关键词，提高效率

无法确认结果与关键词匹配度

显示关键词匹配位置，增强信任感

搜索无感、体验平淡

提升交互感与视觉反馈，增强品牌体验

二、关键词高亮功能的基本原理

实现逻辑如下：

获取用户输入的搜索词（如 URL 中的 ?q=xxx 参数）

在展示搜索结果时，查找该关键词在标题或描述中出现的位置

将关键词用 <span class="highlight">关键词</span> 包裹

使用CSS设置高亮样式，如背景色、加粗等

三、具体实现步骤

步骤一：修改搜索结果模板

路径：templates/search.json.liquid 或 templates/search.liquid（视主题结构而定）

找到显示产品标题或描述的位置：

<h3>{{ item.title }}</h3>

<p>{{ item.content }}</p>

替换为动态处理后的高亮内容：

{% assign query = search.terms | downcase %}

<h3>{{ item.title | highlight: query }}</h3>

<p>{{ item.content | highlight: query }}</p>

⚠ 默认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, '<span class="highlight">$1</span>');

});

}

});

请确保搜索结果块中相关元素加上 .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()

六、结语：

在千篇一律的搜索结果页面中，一个简单的关键词高亮功能，可能就是决定用户是否愿意继续浏览和下单的关键。它不仅提升页面的可读性，更在潜移默化中传递出专业、细致、以用户为核心的品牌调性。

搜索体验的提升，不一定靠复杂的算法，有时候，一点“视觉回馈”，就能让用户感受到不一样的用心。