导航、公告与搜索
先把顾客带到正确系列、指南与支持,再增强菜单和搜索。
公告、活动条件与滚动文字
公告读取单一记录,正文写清适用条件和详情入口。先保证静态文字可读,再考虑动效;政策变更时,公告和安心条从同源资料一起核对。
数据与依赖
- shop.custom.announcement:metaobject_reference。
- text 为单行文本,destination 为 url。
交互逻辑
- 无目标时显示文字;无正文时隐藏模块。
- 采用滚动时可暂停,并响应减少动效偏好。
示例代码 · snippets/ww-announcement.liquid
{% assign announcement = shop.metafields.custom.announcement.value %}
{% if announcement.text.value != blank %}
<aside class="ww-announcement" aria-label="Store announcement">
{% if announcement.destination.value != blank %}
<a href="{{ announcement.destination.value | escape }}">{{ announcement.text.value | escape }}</a>
{% else %}
<p>{{ announcement.text.value | escape }}</p>
{% endif %}
</aside>
{% endif %}
验收检查
- DOM 只保留一份完整公告。
- 核币种、门槛、日期和手机首屏。
示例为无动效基线;不自行增加全站包邮、保修或优惠承诺。
商品、配件与指南搜索
先让原生 GET 搜索返回正确内容类型与可点击结果,再添加输入建议。预测结果、正式结果、无结果和请求失败分别处理。
数据与依赖
- q 来自用户输入,输出时转义。
- 示例 type 显式包含 product、page、article。
交互逻辑
- 键盘提交得到正式结果页。
- 建议请求应防抖、取消旧请求并提供加载/空结果状态。
示例代码 · snippets/ww-search.liquid
<form action="{{ routes.search_url }}" method="get" role="search">
<label for="Search-{{ section.id }}">Search products and guides</label>
<input id="Search-{{ section.id }}" type="search" name="q" value="{{ search.terms | escape }}">
<input type="hidden" name="type" value="product,page,article">
<button type="submit">Search</button>
</form>
{% if search.performed %}
<p role="status">{{ search.results_count }} results</p>
{% paginate search.results by 12 %}
<ul>
{% for result in search.results %}
<li><a href="{{ result.url | escape }}">{{ result.title | escape }}</a> <small>{{ result.object_type | escape }}</small></li>
{% endfor %}
</ul>
{{ paginate | default_pagination }}
{% endpaginate %}
{% endif %}
验收检查
- 用型号、帮助问题及无结果词复核。
- 核主题请求是否覆盖应用结果类型设置。
结果渲染部分放在搜索模板;其他模板只使用表单。搜索类型与外部搜索排名分开。
先理解,再整合,最后验证
- 选择模块,确认数据和输入输出。
- 将片段接入当前主题或框架。
- 用真实变体、市场和失败恢复场景验收。
示例按 Shopify Online Store 2.0 主题编写;Headless 使用单独的数据与版本边界。代码片段需接实际字段、主题和语言文件。
架构参考
示例由 WESWOO 编写,结合 Shopify 官方文档和固定版本的仓库参考。采用仓库代码时应保留适用许可。
Shopify/dawn · 许可commit 3e9ee2281dc4 · Shopify 集成主题的限定许可;参考架构,不复制仓库实现。
Shopify/hydrogen · 许可commit 9e358a2462ba · MIT;采用实质代码时保留版权与许可。
依据核对 2026-11-12