帮助、手册与政策
从问题和型号找到资料,再连接适用政策、账户与人工服务。
按型号组织可展开 FAQ
问题来自实际兼容、使用、订单或售后任务,答案保留条件和下一步。使用原生 details 可先保证无脚本阅读,再按需要增强分类。
数据与依赖
- custom.faqs:list.metaobject_reference。
- question 为文本,answer 为 rich_text_field,guide 为 page_reference。
交互逻辑
- 键盘和触摸均可展开。
- 无指南时保留答案,不造占位链接。
示例代码 · snippets/ww-faq.liquid
{% 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 或复制不适用条款。
型号索引、操作步骤与手册
手册以型号、版本和语言为索引,关键安装或排障步骤用 HTML;PDF 用于完整下载。商品到手册与手册回商品应有明确关系。
数据与依赖
- custom.manuals:list.metaobject_reference。
- model、revision、language 为文本;instructions 为富文本;download 为限定 PDF 的 file_reference。
交互逻辑
- 找不到文件时仍可读已核步骤。
- 型号搜索失败提供人工联系入口。
示例代码 · snippets/ww-manuals.liquid
{% assign manuals = product.metafields.custom.manuals.value %}
{% if manuals != blank %}
<ul>
{% for manual in manuals %}
{% assign file_url = manual.download.value.url %}
<li>
<h3>{{ manual.model.value | escape }} — {{ manual.revision.value | escape }}</h3>
<p>{{ manual.language.value | escape }}</p>
<div>{{ manual.instructions | metafield_tag }}</div>
{% if file_url != blank %}<a href="{{ file_url | escape }}">Download the manual PDF</a>{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
验收检查
- 核文件实际可下载及内容版本。
- 核型号别名、语言和返回商品入口。
示例字段不自动上传手册;未核实的文件或其他型号说明不能充作当前型号资料。
物流、退换与保修的地区条件
先按地区和实际条款对应摘要与申请入口,再供商品、安心条与帮助页引用。更改地区时重新匹配,空匹配不能套用任意地区的承诺。
数据与依赖
- shop.custom.market_policies:list.metaobject_reference。
- country_code、title、summary 为文本;policy_page 为 page_reference。
交互逻辑
- 只输出当前 country_code 匹配的记录。
- 无匹配时提供联系或政策索引。
示例代码 · snippets/ww-market-policy.liquid
{% assign policies = shop.metafields.custom.market_policies.value %}
{% assign country_code = localization.country.iso_code %}
{% for policy in policies %}
{% if policy.country_code.value == country_code %}
<section>
<h2>{{ policy.title.value | escape }}</h2>
<p>{{ policy.summary.value | escape }}</p>
{% if policy.policy_page.value != blank %}
<a href="{{ policy.policy_page.value.url | escape }}">Read the applicable policy</a>
{% endif %}
</section>
{% endif %}
{% endfor %}
验收检查
- 核条款正文、摘要和申请责任方。
- 核地区切换、退款条件及凭证要求。
按国家匹配只是示例;跨国家 Markets、自定义 B2B 合同和商品例外应按实际业务建模。
账户自助与客服表单
账户入口交给平台实际账户路由,帮助问题通过带标签的原生表单提交。字段错误、服务端成功和人工后续处理是不同状态。
数据与依赖
- routes.account_login_url。
- contact[email]、contact[body] 与表单结果。
交互逻辑
- 只在 posted_successfully? 时显示提交成功。
- 错误保留在表单旁,不模拟工单已解决。
示例代码 · snippets/ww-support-contact.liquid
<a href="{{ routes.account_login_url | escape }}">Open your customer account</a>
{% assign support_form_id = 'Support-' | append: section.id %}
{% form 'contact', id: support_form_id %}
<label for="Email-{{ section.id }}">Email</label>
<input id="Email-{{ section.id }}" name="contact[email]" type="email" autocomplete="email" required>
<label for="Message-{{ section.id }}">Model and question</label>
<textarea id="Message-{{ section.id }}" name="contact[body]" required></textarea>
<button type="submit">Send the question</button>
{% if form.posted_successfully? %}
<p role="status">Your message was submitted.</p>
{% else %}
<div role="alert">{{ form.errors | default_errors }}</div>
{% endif %}
{% endform %}
验收检查
- 用获准测试资料核必填与回执。
- 核账户跳转、新旧账户配置和手机操作。
原生联系表单不是订单权限系统;不让顾客在公开字段提交密码或支付敏感资料。
先理解,再整合,最后验证
- 选择模块,确认数据和输入输出。
- 将片段接入当前主题或框架。
- 用真实变体、市场和失败恢复场景验收。
示例按 Shopify Online Store 2.0 主题编写;Headless 使用单独的数据与版本边界。代码片段需接实际字段、主题和语言文件。
架构参考
示例由 WESWOO 编写,结合 Shopify 官方文档和固定版本的仓库参考。采用仓库代码时应保留适用许可。
Shopify/dawn · 许可commit 3e9ee2281dc4 · Shopify 集成主题的限定许可;参考架构,不复制仓库实现。
Shopify/hydrogen · 许可commit 9e358a2462ba · MIT;采用实质代码时保留版权与许可。
依据核对 2026-11-12