Shopify FAQ 页面模板（带搜索）：案例研究

FAQ 搜索框上线后，Kestrel 的创始人又发来一个链接：一个竞争对手的帮助页面，彩色页头、居中的搜索框、按主题分组的问题，底部还有一条“还有问题？”栏。能不能做一模一样的，作为新模板，不动现在的 FAQ 页面？一天后，第二个请求来了：还能把内容全部填好吗？我们不想自己打字。

本案例涵盖这两部分：Shopify FAQ 页面模板本身，以及不那么光鲜、却必须做的工作：写出 41 个真正正确的答案。

关于本案例：这是根据真实 Shopify 项目整理的综合案例。品牌名称和部分细节已更改。版块代码、遇到的限制和内容问题都与我们实际处理的完全一致。

新的帮助中心页面，桌面端和移动端。（示意图，品牌已匿名。）

项目一览

交付内容	1 个新版块、1 个新页面模板，不改动任何现有文件
布局	带搜索的彩色页头、分类折叠问答、联系栏
内容	7 个分类、41 个问题，依据店铺自己的政策撰写
结构化数据	根据问题区块生成的 FAQPage JSON-LD
编辑方式	所有标题、问题、答案和颜色都可在主题编辑器中修改

新建模板，确保其他页面不受影响

现有 FAQ 页面用的是主题自带的 FAQ 版块，旁边还有联系表单。我们没有改造它，而是新建了一个独立版块 faq-page.liquid，以及使用它的页面模板 page.faq-2.json。商家在后台把模板分配给某个页面即可。旧页面在切换之前照常运行，想切回去也只需一个下拉框。

版块是怎样构建的

这个版块有两种区块类型：分类和问题，放在同一个平铺列表里。在主题编辑器中很好理解：每个问题都属于它上方的分类，拖动区块就能把它移到另一个分类。在 Liquid 中，一个小循环在遇到每个分类时开启新分组，并关闭上一个分组：

{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'category' -%}
      {%- unless forloop.first -%}</div>{%- endunless -%}
      <div class="faqp__group" data-faqp-group>
        <h2>{{ block.settings.title | escape }}</h2>
    {%- when 'question' -%}
      <details class="faqp__item" data-faqp-item>…</details>
  {%- endcase -%}
  {%- if forloop.last -%}</div>{%- endif -%}
{%- endfor -%}

原生折叠。每个问题都是一个 <details> 元素，展开和收起不需要 JavaScript，也支持键盘操作。
内置搜索。与之前的 snippet 相同的筛选逻辑，但只作用于本版块，并在搜索时查找条目。
FAQPage 结构化数据。版块根据问题区块输出 JSON-LD，标记始终与页面内容一致。
用设置，不用代码。页头颜色、文字颜色、按钮颜色、占位文字、无结果提示和联系按钮都是主题编辑器里的设置项。

分类和问题都是同一列表中的区块。该版块使用了 50 个区块中的 48 个。

没人提起的限制：50 个区块

我们的第一版内容草稿有 7 个分类和 49 个问题，共 56 个区块。Shopify 规定一个版块最多 50 个区块，超出的模板无法保存。分类也算区块。

我们把内容精简到 41 个问题，总共 48 个区块，给商家留出再加两个的空间。决定删掉哪些内容其实很容易，原因见下一节。需要超过 50 条的店铺，可以在同一个模板里再加一个该版块的实例，比如一个放订单相关、一个放商品相关。

写出 41 个正确的答案

商家请我们把页面填上“和他们一样”的内容。照搬别家公司的帮助文字从来不是选项。他们的政策不是这家店铺的政策，他们的措辞也属于他们自己。因此，每个答案都根据商家自己的资料撰写：退款政策、配送政策、保修页面、商品页面，以及页脚显示的支付方式。

认真做下来，发现了一件商家自己没注意到的事：店铺在四个地方自相矛盾：

免运费门槛	旧 FAQ 写 €70 起，商品页和网站横幅写 €30 起
退货期限	退款政策写 30 天，旧 FAQ 和商品页写 90 天
退货运费	政策写由顾客承担，商品页写“免费退货”
电池续航	商品卖点写 120 分钟，该商品自己的 FAQ 写 90 分钟

我们没有默默地选一个答案。凡是有法律政策的地方，FAQ 都以政策为准，同时给商家一份简短清单，列出每处矛盾和我们的选择，方便他们决定并同步修改原始页面。我们还删掉了两个在网站任何地方都无法核实的答案，而不是去猜。正因如此，压缩到 50 个区块以内才变得容易。

答案简短，开头就是顾客要找的事实。

内容放在文件里，而不是靠点击

在主题编辑器里手动输入 48 个区块既慢又容易出错。我们把问题保存在一个小内容文件里，用脚本生成模板 JSON。等商家对那些矛盾做出决定，重新生成模板只需几秒钟。安装之后，每个答案仍然可以在主题编辑器中正常修改。

如何安装

在代码编辑器中创建版块 faq-page，粘贴版块文件。
创建一个名为 faq-2 的页面模板（JSON），粘贴模板文件。必须先有版块，因为模板引用了它。
在在线商店 → 页面中打开 FAQ 页面，选择模板 faq-2。

我们在每个 FAQ 项目中都会做的事

依据政策撰写，而不是凭记忆或参照竞争对手。
发布前检查矛盾。与退款政策不一致的 FAQ，只会制造它本该避免的客服工单。
在写内容之前就规划好 50 个区块的上限。
把内容保存在可重新生成的文件中，再交付一个商家可以像其他模板一样编辑的模板。

想要这样的帮助中心页面，或一个真正能回答顾客问题的 FAQ？请了解我们的 Shopify 主题开发服务，或联系我们。

常见问题

不用应用能做 Shopify FAQ 页面吗？

能。一个带分类和问题区块、原生折叠和小型搜索脚本的自定义版块，就能覆盖大多数 FAQ 应用的功能，而且没有月费，也不会在每个页面额外加载脚本。

FAQ 结构化数据能让我在 Google 上获得富媒体搜索结果吗？

自 2023 年起，Google 主要只为知名的政府和健康类网站展示 FAQ 富媒体结果。结构化数据仍然有效，也有助于搜索引擎理解页面，但大多数店铺不应指望出现可展开的 FAQ 摘要。

一个 FAQ 版块能放多少个问题？

一个 Shopify 版块最多 50 个区块，分类也计算在内。需要更多时，在同一模板中再添加一个 FAQ 版块。

我的团队以后能修改这些问题吗？

能。每个分类、问题和答案都是主题编辑器里的一个区块，添加、删除或调整顺序都不需要代码。

带搜索的 Shopify FAQ 页面模板：41 个问题、一个版块、无需应用