页面模块 · 指南

站内搜索模块：搜索框、建议与结果

站内搜索模块如何把搜索框、预测建议、结果页与无结果处理连成一个任务入口，说明拼写容错与同义词的边界、建议与结果的一致性、搜索词日志作为需求来源的用法，以及隐私与 combobox 无障碍要求。

站内搜索模块把搜索框、输入时的建议、结果页和无结果出口连成一条路径，服务于已经知道自己要找什么的顾客。搜索是任务入口，不是页头里的装饰图标；同时，搜索词是顾客用自己语言写下的需求，可以反过来修正分类、FAQ 与商品资料。

模块 = 信息来源 × 展现或交互 × 页面语境：站内搜索 = 查询词与被索引内容 × 搜索框、建议、结果与无结果出口 × 全站页头与搜索结果页

先确定模块在完成什么任务

顾客问题：“有没有某个东西”“某型号在哪”“退货怎么办”。搜索经常用于找商品，也用于找页面与文章，结果类型需要事先约定。
对象层级：商品、集合、页面、文章、查询建议是不同对象，建议列表里必须让顾客分得清各自是什么。
进入前已知：一个查询词，可能带拼写错误、口语、型号或订单号。没有浏览上下文，因此结果必须自己说明为何匹配。

搜索与浏览互补：目标明确用搜索，范围明确用集合浏览与筛选。搜索结果页复用同一套筛选、排序与分页规则，不再另造一套。

信息来源与输入

输入	来源	最低要求
查询词	顾客输入（交易与隐私敏感）	保留原样回显；去除首尾空白；不预设只有一个词
被索引内容	商品标题、类型、变体、品牌、描述、标签、SKU；页面与文章	关键别名与型号写进标题或标签；索引字段以平台为准
同义词与别名	运营根据搜索词日志维护	记录来源词、目标词、复核日期；不得指向不可售商品
建议	商品、集合、页面、热门或历史查询	每类建议标注类型；只显示当前市场可见的对象
结果	平台搜索（运行时）	价格、可售、图片来自当前资源，不写成静态文案
无结果出口	商品分类、FAQ、客服入口	至少给出浏览入口与联系入口
搜索日志	平台报表或自有分析	见下节；先明确保留范围与访问人

搜索词日志：需求来源，也是隐私风险

搜索词日志回答“顾客想要什么而站点没有说清楚”。按下表分流，每类有负责人，而不是只看总榜：

日志现象	可能原因	处理
高频且无结果	词汇不匹配、商品缺失	补别名或标签；确属缺货则记入商品需求
有结果但无点击	结果与预期不符、标题不清	调整标题、主图或排序，复看查询意图
问句式查询（“怎么退货”）	政策或答疑内容缺失或难找	补充或前置 FAQ 与客服入口
型号、订单号、邮箱形态	售后诉求进入了商品搜索	给出售后路径；此类词不进入任何公开展示

隐私：顾客可能在搜索框里输入姓名、邮箱、电话或订单号。搜索词不得直接作为“热门搜索”公开显示，除非经过聚合、设阈值并过滤个人信息形态；日志的保留期限、访问范围与是否需要告知，取决于适用法规与隐私政策，需要法务/合规确认，本文不给出结论。

状态与退化

状态	处理
空输入	可显示最近浏览或热门分类；不显示需要读取顾客历史的内容，除非已告知
输入中	建议在稳定后请求，取消过期请求；建议未到达时不遮挡输入
建议为空	收起建议面板，不显示“没有建议”占位；提交仍可用
一项 / 多项	建议按类型分组并限制数量；结果页显示总数与排序口径
拼写容错命中	说明实际使用的词，例如“已显示 X 的结果”，并提供按原词搜索的入口
无结果	回显原词，给出检查拼写提示、热门分类和联系入口；不用无关商品冒充结果
加载 / 错误	提交后保留输入与旧结果；失败时说明未完成并可重试；不显示成无结果
不可售	明确显示或排到末尾；不作为首选建议
跨市场与语言	结果、价格与可售按当前市场；不同语言的别名分别维护

无结果页尤其要给下一步：热门分类、最近上新、客服入口。若沿用“备用商品”，页面必须说明它们不是搜索命中，见 Horizon 中对该分支的分析（集合与搜索）。

建议与结果必须一致

点击建议进入的目标，和提交同一个词后的结果页，不应互相矛盾：建议里排第一的商品，不应在结果页缺席，除非说明原因。
建议与结果页在平台上可能是分别配置的（Shopify 见下节），改一处后必须两处都验证。
提交空白或只含停用词的词，不应显示成功状态。
搜索语法（引号、AND、OR、减号）若被平台支持，结果页应能回显原查询，方便顾客修改。

可选展现与交互

入口：页头搜索图标展开为输入框，或直接显示输入框；移动端可用 Modal 或 Drawer 承载全屏搜索。若图标点击只是跳转到搜索页，就不要伪装成展开面板。
建议列表：用 List，分组标题标明类型；带缩略图的商品建议限制数量。选择判据：建议只需一行字就能区分时，不加图。
结果：商品结果用 Grid 或 List，与集合页保持一致。
表单形态：搜索框本质是简单的输入与提交，交互参见 Inline Form。
禁用条件：建议面板不放促销弹窗；不在没有可靠数据时显示“热门搜索”。

页面组合中的位置

搜索框出现在全站页头，搜索结果页与 404 页也可以放置。搜索结果页前面是搜索框（回显查询词），后面是筛选与分页。同一页面只保留一个主搜索入口；空购物车页可以给出搜索与热门分类。不应出现的语境：结账流程中间（会让顾客离开购买路径）。页面组合规则见页面组合。

无障碍与性能

combobox 结构（APG Combobox，核验于 2026-09-29）：输入框使用 role="combobox"，aria-controls 引用弹出层，aria-expanded 表示是否展开，aria-autocomplete 取 none、list 或 both；弹出层为 listbox，选项为 option。DOM 焦点保持在输入框，通过 aria-activedescendant 指示当前选项。
键盘：APG 写明 Down Arrow 打开弹出层或移入，Escape 关闭弹出层，Enter 接受选中项，Alt+Down 与 Alt+Up 为可选。列表自动补全示例展示了“手动选择”：弹出层出现时不自动选中任何建议；Escape 在弹出层显示时关闭它，未显示时清空输入。
提交：没有选中任何建议时按 Enter 应提交原词。这是搜索场景的设计要求，APG 的两页没有规定。
结果数量通知：APG 的这两页没有说明结果数量播报，需要自行补充。WCAG 2.2 SC 4.1.3 Status Messages（AA）要求状态消息可被辅助技术识别而不夺走焦点，其说明页以“18 results returned”为例（Understanding SC 4.1.3）。因此建议数量与结果数量都用不抢焦点的状态文字告知。
搜索地标：MDN 说明 search 是地标角色，应放在整个搜索区域（如 form）上而不是输入框上，并推荐使用 <search> 元素；同页有多个搜索时用 aria-label 区分。
性能：建议请求需防抖并取消过期请求；Predictive Search API 在触发节流时返回 429 与 Retry-After，前端应停止重试并保留输入。

映射到 Shopify

以下核验于 2026-09-29，来源为 shopify.dev 与 help.shopify.com 官方页面。

搜索结果页：搜索表单指向 /search，q 必填；type 可取 product、page、article；options[unavailable_products] 取 show、hide、last（默认 last）；options[prefix] 取 last（默认）或 none，控制对最后一个词是否做部分词匹配；sort_by 取 relevance（默认）、price-ascending、price-descending。search 对象提供 terms、performed、results（可为 article、page、product）、results_count；results 分页每页最多 50；search.filters 在结果超过 1,000 个商品时为空（该数值与帮助中心的 100,000 不一致，见集合浏览与筛选）。
Predictive Search API：端点为 /search/suggest.json，或返回渲染分区的 /search/suggest（需要 section_id）。resources[type] 取 product、page、article、collection、query，默认 query,product,collection,page；resources[limit] 取 1 到 10（默认 10）；resources[limit_scope] 取 all 或 each；resources[options][unavailable_products] 取 show、hide、last（默认 last）；resources[options][fields] 可指定搜索字段。触发节流时返回 429 并带 Retry-After。
语言：官方页面写明预测搜索需要所列受支持语言之一，且主题的 shopify-features 脚本中 predictiveSearch 为 true；查询建议（query suggestions）仅支持英文，要求店铺主语言与买家会话语言均为英文。读取到的预测搜索语言列表与帮助中心搜索语言表中均没有简体或繁体中文。因此中文店面的预测搜索、拼写容错和词干匹配效果未核验，必须在真实店铺中用中文词实测，不能按英文行为推断。
匹配行为（搜索行为）：按完整词匹配，部分词可能不命中；拼写容错限于标题、类型、变体标题和品牌，差一个字母或两个字母顺序颠倒可匹配，前四个字母需正确；词干处理仅英语等少数语言；缺货商品默认排在末尾；停用词不被索引；使用搜索语法（引号、AND、OR、减号、字段限定）时，拼写容错、预测搜索与语义理解不生效。
Search & Discovery 搜索设置（修改搜索）：可分别设置搜索结果页与预测搜索的结果类型和缺货显示方式，若已发布主题指定了类型参数，后台设置会被覆盖；商品提升（product boosts）每个提升最多 10 个搜索词，只作用于可售商品，含搜索语法时不生效，也不影响第三方搜索引擎；语义搜索有商品数量与套餐前提，且不适用于预测搜索。
同义词：帮助中心 Synonyms 页面的地址在读取时返回的是“修改搜索”页，其中没有同义词内容，因此同义词的当前设置方式与限制未核验，本文不写数值。
搜索报表（Search & Discovery 报表）：包含按查询词统计的搜索、无结果搜索、无点击搜索、点击率与购买率；应用内显示最近 30 天，完整历史在 Analytics 报表中；预测搜索的互动不计入。
主题层面：Horizon 4.2.0 的预测搜索与结果页职责见集合与搜索。
固定版本实现：见Dawn 预测搜索、Horizon 预测搜索；页面级组成见 Shopify 搜索结果页配方。
未核验：中文匹配质量、同义词、报表的数据保留期限、各主题的搜索框标记与无障碍实现。

验证一次站内搜索

准备约 20 个词：精确商品名、型号或 SKU、错拼、口语别名、单复数、完全无关词、含空格与标点、带引号的短语、问句式词、中文词。
逐个记录建议、结果页与无结果页表现，核对建议与结果一致，拼写容错有回显。
更换市场与语言，把一个商品设为售罄，确认建议与结果按设置显示。
只用键盘完成：进入搜索、输入、选择建议、提交原词、关闭、返回；用读屏软件确认数量被播报，焦点未丢。
输入一个邮箱形态的词，查看它在日志与公开展示位置的去向。
一周后复盘“无结果”与“无点击”榜，每条归入上文分流表。

平台正文

该机制的权威平台说明见 Search & Discovery；本文只写在当前内容或页面语境下的用法。

待继续完善

缺少真实店铺的中文搜索实测与同义词现状核对；
缺少搜索词日志的保留与隐私要求的合规结论；
尚未对照真实搜索日志，验证分流表的判据。