今天,我们很高兴地推出全新的 Polaris——一个统一的 UI 工具包,可在所有 Shopify 界面(包括 Admin、Checkout 和 Customer Accounts)中无缝协作。
基于 Web Components 构建,新版 Polaris 比其前身更小、更快,并能与任何框架(或无需框架)直观配合工作。开发人员现在可以使用熟悉的、类似 HTML 的组件以及统一的 API 和属性,在所有 Shopify 触点创建一致的用户体验。Polaris 的这一最新演进版本直接通过 Shopify 的 CDN 提供,确保您的组件始终保持最新状态。
新版 Polaris 现已上线,赋能您在用户与 Shopify 交互的任何地方构建更加连贯、高性能的应用体验。
借助 Web Components 扩大覆盖范围
正如我们之前提到的,Shopify 的平台是 web 平台。我们的目标是让尽可能多的 Web 开发者感到熟悉。通过提供自定义 Web 组件,开发者可以以类似编写 HTML 的方式为应用和 UI 扩展编码,而无需学习新的范式或框架。
Web 组件允许开发者将功能封装并打包到自定义 HTML 标签中,创建可重用且独立的组件,从而在不同环境中保持兼容性。我们开始通过 App Bridge API(如 导航菜单 和 标题栏)引入自定义 Web 组件。
现在我们正在将所有核心 UI 组件延续这种熟悉的语法。
<s-section heading="Subscription Toast"> <s-text-field name="toast" placeholder="e.g. We'll be in touch!"></s-text-field> <s-paragraph>A short toast message to show when someone subscribes</s-paragraph> </s-section>
使用统一组件更轻松地跨多个 Shopify 界面呈现应用体验
Shopify 开发人员现在将在不同界面中找到通用的组件和 props。这意味着 Admin UI 扩展、Checkout UI 扩展、Customer Account UI 扩展以及 App Bridge 内部的组件都将拥有熟悉的 API、props 和值,但在需要时会依赖不同的设计系统。这消除了学习各界面独特差异的需要,让您只需按照 Shopify 的方式构建即可。
同一代码在 Admin 中为商家渲染的效果,与在 Checkout 中为买家渲染的效果并排展示。
将组件放入 App Bridge 意味着我们消除了构建应用主页前端所需的两套独立库的需求。在 <script> 标签内使用这些组件,您将始终获得最新版本。
性能与常青设计
我们通过 Web Components 方法消除了 UI 扩展中 React 的运行时代价,从而减小了包体积并提升了性能,同时保持了完整的功能。对于 App Home,组件直接从 Shopify 的 CDN 加载,确保您的应用自动继承最新的 Shopify 设计系统。
如何开始使用
Polaris 目前作为候选发布版(RC)提供。要在项目中实现这些新组件:
- 对于 UI 扩展:只需将扩展 .toml 文件中的版本更新为“2025-10RC”,并确保您使用的是正确的 CLI 命令 此处。
- 对于应用主页:添加额外的 脚本标签 以选择加入。您可以立即开始在现有代码库中集成新的 Polaris 组件。为方便起见,我们将完整的应用主页组件库发布在一个新的 Storybook 环境中,您可以在实施前在此探索和测试这些组件。
这些新的 Polaris 组件专为现代开发工作流程设计,包括那些整合大型语言模型(LLM)的工作流程。您现在可以通过 Shopify.dev MCP Server 访问最新的 API 文档。这使得您可以轻松地将 Polaris 的最新功能直接集成到使用 Cursor、GitHub Copilot 或 Claude Code 等工具的 LLM 辅助开发工作流中。现在,您可以比以往更快、更高效地构建和更新您的 Shopify 应用。
此版本为早期访问版,我们这样做是为了让您在稳定它并将其设为默认值之前有充足的时间进行试用。请告诉我们 您的反馈,包括您希望我们推出的其他组件。

