SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场shopify-built-for-shopify

shopify-built-for-shopify

编程与开发

查看项目

更新于 10-16 05:10

技能介绍

用途

该技能用于在 Shopify 应用开发过程中强制执行 Built for Shopify（BFS）质量标准，确保应用达到 Shopify App Store 的最高质量门槛。适用于构建、审查或审计 Shopify 应用时的 BFS 合规性检查。

参考文档：https://shopify.dev/docs/apps/launch/built-for-shopify/requirements

主要能力

快速合规检查清单

在审查代码或构建功能时，可使用以下清单进行 BFS 合规审查：

  • 应用嵌入 Shopify 管理后台（App Bridge）
  • 使用会话令牌认证
  • 主要工作流保持在 Shopify 管理后台内
  • 无需额外登录/注册
  • 使用主题应用扩展（而非 Asset API 进行写入）
  • 满足 Web Vitals 目标（LCP ≤2.5s，CLS ≤0.1，INP ≤200ms）
  • 使用 Polaris 组件匹配管理后台样式
  • 移动端响应式设计
  • 使用导航菜单（s-app-nav）和上下文保存栏
  • 错误消息为红色、上下文相关且有用
  • 无暗黑模式或施压策略
  • 高级功能被禁用并标注
  • 推广内容可关闭

集成要求

嵌入（强制）：应用必须嵌入 Shopify 管理后台，在文档的 <head> 中添加 App Bridge 脚本，并使用会话令牌认证。

主要工作流：所有主要应用工作流必须能在 Shopify 管理后台内完成，核心功能无需外部网站，第三方连接设置需在应用内可访问。

干净安装：对于店面应用，使用主题应用扩展而非 Asset API。不得使用 Asset API 创建、修改或删除主题文件（读取允许）。

性能要求

Web Vitals 目标（第 75 百分位）：LCP ≤ 2.5s，CLS ≤ 0.1，INP ≤ 200ms。优化策略包括懒加载重型组件、使用 React.memo 处理昂贵渲染、使用骨架加载器避免布局偏移。店面性能不得使 Lighthouse 分数降低超过 10 分；结账请求 p95 ≤ 500ms，失败率 ≤ 0.1%。

设计要求

熟悉感（匹配 Shopify 管理后台）：使用 Polaris Web 组件匹配管理后台样式。需避免的拒绝原因包括：自定义按钮颜色、衬线/手写字体、非标准背景色、内容未放在卡片容器中、对比度差（必须满足 WCAG 2.1 AA）。

导航：使用 App Bridge 导航菜单（s-app-nav），不要创建自定义导航菜单、在导航项中使用表情符号或单独的“Home”链接。

上下文保存栏：用于所有表单输入。

模态框：使用 s-modal 并正确设置插槽。

移动端响应式：移动端无水平滚动，内容适当换行/堆叠，所有内容可访问。

有用的 UX 要求

引导：简洁，引导商家完成，完成后可关闭，无需安装额外应用，需说明任何商家信息请求的理由。

主页：必须包含主题块/嵌入状态（如适用）、相关指标/分析、动态内容（不仅是静态链接）。

错误消息：红色、上下文相关、持久显示，不要使用 toast 显示错误，不要使用非红色错误颜色，不要将字段问题显示在页面顶部。

用户友好要求（无暗黑模式）

禁止的做法包括：升级倒计时器、内疚/羞辱语言、自动出现的模态框/弹出窗口、保证结果（如“增加销售 18%”）、评论激励、不可关闭的推广、模仿 Shopify 的图标/颜色。

高级功能：必须在视觉和功能上都被禁用，并标注“Pro Plan”等标签。Shopify Plus 专属功能必须对非 Plus 商家隐藏（而不仅仅是禁用）。

类别特定要求

  • 广告/分析/联盟应用：必须使用 Web Pixel 扩展，而非脚本标签。
  • 邮件/SMS 营销应用：同步客户数据，使用 Shopify 细分通过客户细分操作扩展，使用访客 API 识别商店访客。
  • 折扣应用：使用折扣函数或原生 API，不要使用草稿订单创建自定义折扣，使用 discountRedeemCodeBulkAdd 批量添加代码。
  • 订阅应用：使用 Selling Plan API、Subscription Contract API、Customer Payment Method API，使用主题应用块用于产品页面，清晰显示订阅信息，使用 Customer Account UI 扩展进行订阅管理。
  • 履行应用：等待商家履行请求后再履行，4 小时内响应履行请求，1 小时内响应取消请求，履行创建后 1 小时内添加跟踪信息，99% 完成率，99.9% 回调成功率。
  • 退货应用：同步所有退货生命周期事件（returnCreate、reverseDeliveryCreateWithShipping、reverseFulfillmentOrderDispose、returnLineItemRemoveFromReturn、returnCancel、returnClose、refundCreate）。

代码审查清单

技术：App Bridge 脚本在 <head> 中；会话令牌认证（无 cookie 认证）；主题应用扩展（无 Asset API 写入）；Web Pixel 扩展（无脚本标签用于跟踪）；按应用类别正确使用 API。

UI/UX：全程使用 Polaris 组件；使用 s-app-nav 导航；表单使用上下文保存栏；s-modal 正确设置插槽；响应式设计；WCAG 2.1 AA 对比度。

内容：无结果保证；无施压策略；可关闭的推广内容；禁用并标注的高级功能；清晰的错误消息（红色、上下文相关）；有用的引导；动态主页内容。

使用方式

该技能以参考文档和检查清单形式提供，在开发、审查或审计 Shopify 应用时，按照上述清单逐项核对代码和功能，确保符合 BFS 标准。技能中包含大量代码示例，涵盖 App Bridge 集成、Polaris 组件使用、Web Pixel 扩展、折扣 API 等。

适用场景

  • 构建新的 Shopify 应用时确保符合 BFS 标准
  • 审查现有 Shopify 应用的 BFS 合规性
  • 审计 Shopify 应用以准备提交至 Shopify App Store
  • 针对特定应用类别（广告、营销、折扣、订阅、履行、退货）检查特定要求

限制

该技能为指南和检查清单性质，不提供自动化验证工具。具体实施需开发者根据实际代码和 Shopify 官方文档进行判断。部分要求（如性能指标）需通过实际测量验证。