第 210 期在 Shopify 店铺搜索中添加搜索词高亮功能让搜索结果更直观

一、用途与优势

在 Shopify 店铺中添加搜索词高亮可以帮助客户快速定位搜索的关键词在产品标题等位置的匹配情况，不需要仔细浏览每个搜索结果来找到所需内容，提高了搜索效率。

高亮显示搜索词会使 Shopify 网站访客的注意力自然集中在与他们查询最相关的内容上，提高内容的醒目度和关注度。良好的搜索体验可以减少用户在网站的搜索顿挫感，从而降低店铺订单弃购率。

本期教程演示如何在 Shopify 默认主题 Dawn 的搜索框中实现搜索词高亮功能，其他主题也可以参考本篇内容分享的方法。

1. 在 Sections 文件夹 ~ predictive-search.liquid 中搜索：

<p

在每个搜索结果中添加 filter（具体操作参考视频演示）

 | highlight: predictive_search.terms

2. 添加样式

在 base.css 文件底部添加：

strong.highlight {
  font-size: 14px;
}

保存并刷新店铺前台，搜索即可看到高亮效果。文字颜色可参考视频自定义。

除了搜索框中高亮，当用户回车时在搜索结果页面高亮也很重要，增强版主题中已同步添加此功能，同时支持在搜索框和搜索结果页面高亮搜索词。

与此同时，本次发布版本还添加了最近浏览商品功能，方便客户快速查找和继续浏览，提高店铺订单转化率。更多功能和更新日志详见：

下期视频将介绍 Shopify Theme App Extensions（Shopify 主题 App 扩展）

将功能以 App 的形式安装到店铺中，不依赖于主题，即使更换主题也能继续使用。