Shopify如何开发个人中心和Checkout页面

开发方案以及区别

个人中心

认证方式：Access Token vs. Session Token

  • App 后端 (accessToken)：后端服务，通过 accessToken 来认证并调用 Shopify 的 Admin API，进行创建订单、更新产品等操作。这是一个“应用-to-Shopify”的认证。

  • UI Extension (sessionToken)：UI Extension 运行在 Shopify 的安全环境中，不直接使用 accessToken。它使用 sessionToken 来与你自己的 App 后端进行安全通信。

sessionToken 的作用是让 Shopify 为你的扩展“担保”，确保发给你后端的请求是合法且来自当前登录的用户。整个过程如下：

  1. 扩展获取 Token：在 UI Extension 前端代码中，通过 useSessionToken Hook或 shopify.sessionToken.get() 方法获取一个 JWT。

  2. 后端验证 Token：你的后端服务接收到这个 Token 后，使用 App 的 shared secret 验证其签名。验证通过后，即可信任请求并处理业务逻辑。

注意：要让 UI Extension 能调用外部网络（即你的后端），需要在 Shopify 后台的 App 设置中，为扩展开启 “Allow network access” 权限

开发个人中心页面的两种方式

Shopify 提供了两种将你的 UI 集成到客户账户页面的方式：

内联扩展 (Inline Extensions)

这种扩展会嵌入到现有的客户账户页面（如“个人资料”页）的特定位置。

  • 适用场景：在现有页面上添加一个功能模块，例如显示用户的积分、会员等级等。

  • 关键步骤：

    • 使用 Shopify CLI 生成扩展：shopify app generate extension --template customer_account_ui。

    • 在配置中指定渲染位置，例如 customer-account.profile.block.render，即可将你的块渲染在个人资料页面上。

    • 详细教程可参考官方文档：Build an inline profile UI extension

全页扩展 (Full-page Extensions)

这种扩展会创建一个全新的、独立的页面，并添加到客户账户的导航菜单中。

  • 适用场景：创建一个功能完整的全新页面，例如“我的愿望清单”、“订单历史”等。

  • 关键步骤：

    • 同样使用 shopify app generate extension 命令生成扩展。

    • 在配置中指定为 customer-account.page.render 目标，这样你的页面就会成为一个独立的入口。

    • 详细教程可参考官方文档：Build new pages in customer accounts。

两种方式都是使用 React + Preact 技术栈进行开发

UI Extension 的前端部分必须使用 JavaScript/TypeScript (React/Preact)

Checkout

🆚 主要差异对比

开发 Checkout UI 扩展的关键点

  1. 生成扩展：使用 Shopify CLI 时，类型要指定为 checkout_ui_extension
shopify app generate extension --type checkout_ui_extension

  1. 选择放置目标 (Target)：你需要在配置文件中指定扩展出现在结账的哪个位置。

    • Block 目标：如 purchase.checkout.block.render，商家可通过编辑器自由摆放。

    • Static 目标：如 purchase.checkout.header.render-after，出现在固定位置。

    • 多页面支持：一个扩展可以同时 targeting 结账页、感谢页和订单状态页。

  2. 获取 Session Token：在扩展代码中，通过 useApi Hook 获取 sessionToken，然后调用你的后端 API。

// 示例
import { reactExtension, useApi } from '@shopify/ui-extensions-react/checkout';

export default reactExtension('purchase.checkout.block.render', () => <Extension />);

function Extension() {
  const { sessionToken } = useApi();

  const callBackend = async () => {
    const token = await sessionToken.get();
    // 将 token 作为 Bearer Token 放在请求头中
    fetch('YOUR_BACKEND_URL', {
      headers: { 'Authorization': `Bearer ${token}` }
    });
  };
  // ...
}

Checkout UI 扩展运行在 Shopify 的 iframe 沙箱中，无法直接操作结账页面的 DOM，必须通过 Shopify 提供的 API 进行交互。

Checkout UI 扩展是 Shopify Plus 计划的核心功能，用于自定义信息、配送、支付等核心步骤。非 Plus 商家可用的自定义能力非常有限

2025-07 是最后一个支持 React 组件的 API 版本。未来的开发将基于 Preact 和 Shopify 的 Polaris Web 组件