案例作品集 浏览精选项目

WESWOO 提供 Shopify Plus 项目开发费抵扣,至多 US$4,800

开发知识库 / 导航、公告与搜索

导航、公告与搜索

先把顾客带到正确系列、指南与支持,再增强菜单和搜索。

公告、活动条件与滚动文字

公告读取单一记录,正文写清适用条件和详情入口。先保证静态文字可读,再考虑动效;政策变更时,公告和安心条从同源资料一起核对。

数据与依赖

  • shop.custom.announcement:metaobject_reference。
  • text 为单行文本,destination 为 url。

交互逻辑

  • 无目标时显示文字;无正文时隐藏模块。
  • 采用滚动时可暂停,并响应减少动效偏好。
示例代码 · snippets/ww-announcement.liquid
Liquid · WESWOO
{% 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 只保留一份完整公告。
  • 核币种、门槛、日期和手机首屏。

示例为无动效基线;不自行增加全站包邮、保修或优惠承诺。

先理解,再整合,最后验证

  1. 选择模块,确认数据和输入输出。
  2. 将片段接入当前主题或框架。
  3. 用真实变体、市场和失败恢复场景验收。

示例按 Shopify Online Store 2.0 主题编写;Headless 使用单独的数据与版本边界。代码片段需接实际字段、主题和语言文件。

架构参考

示例由 WESWOO 编写,结合 Shopify 官方文档和固定版本的仓库参考。采用仓库代码时应保留适用许可。

Shopify/dawn · 许可commit 3e9ee2281dc4 · Shopify 集成主题的限定许可;参考架构,不复制仓库实现。
Shopify/hydrogen · 许可commit 9e358a2462ba · MIT;采用实质代码时保留版权与许可。

依据核对 2026-11-12