跳转至主要内容
Shopify 主题优化

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

通过 YouTube 观看本期 Shopify 教程

一、用途与优势

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

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

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

Shopify 店铺搜索词高亮功能

二、添加方法

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

<p

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

 | highlight: predictive_search.terms

2. 添加样式

base.css 文件底部添加:

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

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

三、搜索结果页面

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

Shopify 搜索页面搜索词高亮功能

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

Shopify 增强版主题更新日志

Shopify 最近浏览商品功能
Shopify 增强版主题 适用于所有官方推出的 2.0 主题 额外添加五十几项功能
Shopify 店铺用什么主题比较好?哪款主题更好用?Shopify增强版主题,添加几十项功能,支持一键开启或关闭。适用于所有Shopify推出的 2.0 版九款主题,减少插件安装,降低每个月的插件订阅费。访问查看具体内容与视频演示

下期预告

下期视频将介绍 Shopify Theme App Extensions(Shopify 主题 App 扩展)

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

Shopify Theme App Extensions