案例作品集 浏览精选项目

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

开发知识库 / 帮助、手册与政策

帮助、手册与政策

从问题和型号找到资料,再连接适用政策、账户与人工服务。

按型号组织可展开 FAQ

问题来自实际兼容、使用、订单或售后任务,答案保留条件和下一步。使用原生 details 可先保证无脚本阅读,再按需要增强分类。

数据与依赖

  • custom.faqs:list.metaobject_reference。
  • question 为文本,answer 为 rich_text_field,guide 为 page_reference。

交互逻辑

  • 键盘和触摸均可展开。
  • 无指南时保留答案,不造占位链接。
示例代码 · snippets/ww-faq.liquid
Liquid · WESWOO
{% assign questions = product.metafields.custom.faqs.value %}
{% if questions != blank %}
  <section aria-labelledby="Questions-{{ section.id }}">
    <h2 id="Questions-{{ section.id }}">Questions about this model</h2>
    {% for question in questions %}
      <details>
        <summary>{{ question.question.value | escape }}</summary>
        <div>{{ question.answer | metafield_tag }}</div>
        {% if question.guide.value != blank %}
          <a href="{{ question.guide.value.url | escape }}">Read the guide</a>
        {% endif %}
      </details>
    {% endfor %}
  </section>
{% endif %}

验收检查

  • 初始 HTML 中能找到完整答案。
  • 核同型号、地区、版本与关联页面。

FAQ 是可读帮助内容;不要仅为富结果自动制造 FAQPage 或复制不适用条款。

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

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

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

架构参考

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

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

依据核对 2026-11-12