案例作品集 浏览精选项目

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

开发知识库 / 内容、品牌与合作

内容、品牌与合作

将真实文章、主体、门店和合作资料连成可核对的页面关系。

联盟、经销与邮件订阅

把合作申请和邮件订阅分开。申请写清对象、地区与审核路径,订阅说明发送内容和条件;反馈来自各自实际提交结果。

数据与依赖

  • 合作使用 contact 类型,保留申请类型。
  • 订阅使用 customer 类型;权益由真实规则提供。

交互逻辑

  • 提交成功表示已接收,不能显示已批准合作。
  • 关闭订阅弹层后页面仍可正常使用。
示例代码 · snippets/ww-partner-request.liquid
Liquid · WESWOO
{% 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
Liquid · WESWOO
{% 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 %}

验收检查

  • 核两类合作信息分流与处理人。
  • 核邮箱、错误反馈和隐私入口。

示例不配置佣金、经销价或审批。营销同意与后续发送应接项目实际账户和适用规则。

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

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

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

架构参考

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

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

依据核对 2026-11-12