首页、系列与信任
从首屏定位引导到系列与商品，再用有来源的内容支撑判断。
Banner、主标题与视频
标题和主要入口直接用 HTML；海报先承担首屏展示，视频由明确控制播放。手机的图像裁切和文案长度单独验收。
数据与依赖
- heading／summary 为文本；poster 为 image_picker。
- video 为 Shopify video；collection 为 collection 设置。
交互逻辑
- 先显示标题、海报与链接。
- 播放和暂停可操作，减少动效时不强制自动播放。
示例代码 · snippets/ww-hero.liquid
<section aria-labelledby="Hero-{{ section.id }}">
<h1 id="Hero-{{ section.id }}">{{ section.settings.heading | escape }}</h1>
<p>{{ section.settings.summary | escape }}</p>
{% if section.settings.poster != blank %}
{{ section.settings.poster | image_url: width: 1600 | image_tag: widths: '480, 800, 1200, 1600', sizes: '100vw', loading: 'eager' }}
{% endif %}
{% if section.settings.video != blank %}
{{ section.settings.video | video_tag: controls: true, autoplay: false, preload: 'none' }}
{% endif %}
{% if section.settings.collection != blank %}
<a href="{{ section.settings.collection.url | escape }}">Explore {{ section.settings.collection.title | escape }}</a>
{% endif %}
</section>
验收检查
- 页面主 H1 唯一且不嵌进图片。
- 核首图、长标题、视频未加载和手机点击。
片段用于页面主 Banner；作为中段模块复用时改用适当级别标题。
系列切换与选型入口
先展示每个系列的定位与真实链接，再按设计增强成可切换面板。系列名、图和导语来自同一个系列对象，切换时一起更新。
数据与依赖
- blocks 的 collection 设置和实际系列对象。
- 系列 custom.selection_summary：单行文本。
交互逻辑
- 默认内容可读；增强切换有选中态。
- 切换面板时只改变展示，不替换真实链接。
示例代码 · snippets/ww-series.liquid
<section aria-labelledby="Series-{{ section.id }}">
<h2 id="Series-{{ section.id }}">Choose a collection</h2>
{% for block in section.blocks %}
{% assign series = block.settings.collection %}
{% if series != blank %}
<article {{ block.shopify_attributes }}>
<h3><a href="{{ series.url | escape }}">{{ series.title | escape }}</a></h3>
<p>{{ series.metafields.custom.selection_summary.value | escape }}</p>
</article>
{% endif %}
{% endfor %}
</section>
验收检查
- 每个系列均能打开对应集合。
- 核键盘、重复实例和手机布局。
示例是稳定的链接列表基线；TAB 增强需补 aria-controls、键盘移动和面板状态。
商品卡、价格与加购入口
卡片让商品名、关键规格和价格可比较。多变体商品先进入选项选择；单默认变体才提供直接加购，避免静默替顾客决定规格。
数据与依赖
- product 对象与 selected_or_first_available_variant。
- custom.key_spec 为简短、可核对的规格。
交互逻辑
- 单规格且可售时显示加购。
- 多规格或缺货时进入详情核对。
示例代码 · snippets/ww-product-card.liquid
{% assign card_product = product %}
{% assign card_variant = card_product.selected_or_first_available_variant %}
{% assign card_form_id = 'CardProduct-' | append: section.id | append: '-' | append: card_product.id %}
<article>
<a href="{{ card_product.url | escape }}">
{% if card_product.featured_image %}
{{ card_product.featured_image | image_url: width: 640 | image_tag: widths: '320, 480, 640', sizes: '(max-width: 749px) 45vw, 25vw', loading: 'lazy' }}
{% endif %}
<h3>{{ card_product.title | escape }}</h3>
</a>
<p>{{ card_product.metafields.custom.key_spec.value | escape }}</p>
<p>{{ card_variant.price | money_with_currency }}</p>
{% if card_product.has_only_default_variant and card_variant.available %}
{% form 'product', card_product, id: card_form_id %}
<input type="hidden" name="id" value="{{ card_variant.id }}">
<button type="submit">Add to cart</button>
{% endform %}
{% else %}
<a href="{{ card_product.url | escape }}">Choose options and check availability</a>
{% endif %}
</article>
验收检查
- 对照详情页的型号、价格和币种。
- 核缺图、长标题和表单失败返回。
不要把起售价当成所有变体的成交价；片段中的 product 需由调用方传入。
奖项、评测与真实评价
先把出处、时间、适用型号和原始评价关系写清，再选择网格或轮播。媒体和星级不替代真实来源，评价应用继续负责其实际数据与状态。
数据与依赖
- public_evidence：list.metaobject_reference。
- title、context 为文本，source 为核准 url。
交互逻辑
- 先完整输出文字与链接。
- 轮播增强使用现有主题组件，自动播放可暂停。
示例代码 · snippets/ww-proof.liquid
{% assign evidence = shop.metafields.custom.public_evidence.value %}
{% if evidence != blank %}
<ul class="ww-evidence">
{% for item in evidence %}
<li>
<h3>{{ item.title.value | escape }}</h3>
<p>{{ item.context.value | escape }}</p>
{% if item.source.value != blank %}
<a href="{{ item.source.value | escape }}">Read the source</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
验收检查
- 逐项打开来源，核归属与适用型号。
- 核手机拖动、分页点和不加载插件时的内容。
片段只负责证据渲染，不自动产生评价、星级或客户关系。
先理解，再整合，最后验证
- 选择模块，确认数据和输入输出。
- 将片段接入当前主题或框架。
- 用真实变体、市场和失败恢复场景验收。
示例按 Shopify Online Store 2.0 主题编写；Headless 使用单独的数据与版本边界。代码片段需接实际字段、主题和语言文件。
架构参考
示例由 WESWOO 编写，结合 Shopify 官方文档和固定版本的仓库参考。采用仓库代码时应保留适用许可。
Shopify/dawn · 许可commit 3e9ee2281dc4 · Shopify 集成主题的限定许可；参考架构，不复制仓库实现。
Shopify/hydrogen · 许可commit 9e358a2462ba · MIT；采用实质代码时保留版权与许可。
依据核对 2026-11-12