内容、品牌与合作
将真实文章、主体、门店和合作资料连成可核对的页面关系。
文章卡、作者与用途分类
文章标题说明解决的问题,摘要交代适用对象,作者或审校资料保持真实。标签按用途组织,商品与指南之间建立有理由的链接。
数据与依赖
- article 标题、摘要、作者与更新时间。
- custom.author_profile:已核 page_reference。
交互逻辑
- 有作者资料才显示资料入口。
- 标签入口能打开正确文章范围。
示例代码 · snippets/ww-article-summary.liquid
<article>
<h2><a href="{{ article.url | escape }}">{{ article.title | escape }}</a></h2>
<p>{{ article.excerpt_or_content | strip_html | truncatewords: 28 | escape }}</p>
<p>By {{ article.author | escape }} · {{ article.updated_at | date: '%Y-%m-%d' }}</p>
{% if article.metafields.custom.author_profile.value != blank %}
<a href="{{ article.metafields.custom.author_profile.value.url | escape }}">About the contributor</a>
{% endif %}
<ul>
{% for tag in article.tags %}
<li>{{ tag | link_to_tag: tag }}</li>
{% endfor %}
</ul>
</article>
验收检查
- 核作者/审校与 About 主体一致。
- 核列表与正文的标题、日期和链接。
模板不会证明作者资历或客户关系;缺少资料时保留真实署名,不自行补名人背书。
品牌介绍、历程与工艺证据
从真实公司定位走到里程碑、工艺和质检资料,每个结论对应日期、范围和出处。布局可以图文交错,事实仍使用可读文字。
数据与依赖
- shop.custom.milestones:list.metaobject_reference。
- date 为 date;title/scope 为文本;source 为 url。
交互逻辑
- 没有证明的节点暂不公开成结果。
- 图像未加载时保留文字和出处。
示例代码 · snippets/ww-brand-evidence.liquid
{% assign milestones = shop.metafields.custom.milestones.value %}
{% if milestones != blank %}
<ol>
{% for milestone in milestones %}
<li>
<time datetime="{{ milestone.date.value | date: '%Y-%m-%d' }}">{{ milestone.date.value | date: '%Y-%m' }}</time>
<h3>{{ milestone.title.value | escape }}</h3>
<p>{{ milestone.scope.value | escape }}</p>
{% if milestone.source.value != blank %}
<a href="{{ milestone.source.value | escape }}">View the evidence</a>
{% endif %}
</li>
{% endfor %}
</ol>
{% endif %}
验收检查
- 核公司名称、日期、职责及授权。
- 核工艺资料的型号和测试条件。
示例是资料渲染,未填实际品牌结果;PDF 的周数也不构成项目交付承诺。
门店卡、文字地址与地图
先展示可读的名称、地址、营业时间和联系资料,地图作为进一步导航入口。地点筛选和地图标记引用同一记录。
数据与依赖
- shop.custom.public_stores:list.metaobject_reference。
- name、address、opening_hours 为文本;map_url 为核准 URL。
交互逻辑
- 不加载地图仍可读地址。
- 按城市切换时列表与标记同步。
示例代码 · snippets/ww-store-list.liquid
{% assign stores = shop.metafields.custom.public_stores.value %}
<ul>
{% for store in stores %}
<li>
<h2>{{ store.name.value | escape }}</h2>
<p>{{ store.address.value | escape }}</p>
<p>{{ store.opening_hours.value | escape }}</p>
{% if store.map_url.value != blank %}
<a href="{{ store.map_url.value | escape }}">Open the map for {{ store.name.value | escape }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
验收检查
- 核真实地址、时区、时段和地图目标。
- 核手机打开地图及无网络地图状态。
无实际门店时不生成假地点;第三方地图嵌入按项目隐私与性能要求接入。
联盟、经销与邮件订阅
把合作申请和邮件订阅分开。申请写清对象、地区与审核路径,订阅说明发送内容和条件;反馈来自各自实际提交结果。
数据与依赖
- 合作使用 contact 类型,保留申请类型。
- 订阅使用 customer 类型;权益由真实规则提供。
交互逻辑
- 提交成功表示已接收,不能显示已批准合作。
- 关闭订阅弹层后页面仍可正常使用。
示例代码 · snippets/ww-partner-request.liquid
{% assign partner_form_id = 'Partner-' | append: section.id %}
{% form 'contact', id: partner_form_id %}
<label for="Partner-Type-{{ section.id }}">Request type</label>
<select id="Partner-Type-{{ section.id }}" name="contact[Request type]">
<option value="Distributor">Distributor application</option>
<option value="Affiliate">Affiliate inquiry</option>
</select>
<label for="Partner-Email-{{ section.id }}">Business email</label>
<input id="Partner-Email-{{ section.id }}" type="email" name="contact[email]" required>
<button type="submit">Send application</button>
{% if form.posted_successfully? %}<p role="status">Application submitted for review.</p>{% endif %}
<div role="alert">{{ form.errors | default_errors }}</div>
{% endform %}
示例代码 · snippets/ww-newsletter.liquid
{% assign newsletter_id = 'Newsletter-' | append: section.id %}
{% form 'customer', id: newsletter_id %}
<input type="hidden" name="contact[tags]" value="newsletter">
<label for="Newsletter-Email-{{ section.id }}">Email for product news</label>
<input id="Newsletter-Email-{{ section.id }}" type="email" name="contact[email]" autocomplete="email" required>
<p>Subscribe to product news. Read the privacy policy before submitting.</p>
{% if shop.privacy_policy != blank %}<a href="{{ shop.privacy_policy.url | escape }}">Privacy policy</a>{% endif %}
<button type="submit">Subscribe</button>
{% if form.posted_successfully? %}<p role="status">Your request was submitted.</p>{% endif %}
<div role="alert">{{ form.errors | default_errors }}</div>
{% endform %}
验收检查
- 核两类合作信息分流与处理人。
- 核邮箱、错误反馈和隐私入口。
示例不配置佣金、经销价或审批。营销同意与后续发送应接项目实际账户和适用规则。
官方开发文档
先理解,再整合,最后验证
- 选择模块,确认数据和输入输出。
- 将片段接入当前主题或框架。
- 用真实变体、市场和失败恢复场景验收。
示例按 Shopify Online Store 2.0 主题编写;Headless 使用单独的数据与版本边界。代码片段需接实际字段、主题和语言文件。
架构参考
示例由 WESWOO 编写,结合 Shopify 官方文档和固定版本的仓库参考。采用仓库代码时应保留适用许可。
Shopify/dawn · 许可commit 3e9ee2281dc4 · Shopify 集成主题的限定许可;参考架构,不复制仓库实现。
Shopify/hydrogen · 许可commit 9e358a2462ba · MIT;采用实质代码时保留版权与许可。
依据核对 2026-11-12