本文介绍了如何基于 Shopify Storefront API，结合 Next.js 框架构建高性能网站。借助 EdgeOne Pages 的模板，您可以快速完成 Shopify 与 Next.js 的集成，并通过全球 CDN 加速，实现卓越的网站性能与用户体验。
快速入门
本文的集成介绍主要包含以下两个步骤：配置 Shopify、部署到 EdgeOne Pages。如果您想了解这个方案的具体实现原理，或者需要根据自身需求进行定制化开发，可以继续阅读下面的详细配置步骤。
Shopify 配置
Shopify 提供了 Storefront API 实现来实现 Headless 电商，EdgeOne Pages 通过调用 Storefront API 来请求用户信息、购物车信息等，并展示在前端。
1. 创建商店
2. 添加商品
在
Products页面下添加您的商品。
3. 安装 Headless 主题
在 GitHub 仓库下下载主题后，进入在线商店，单击 Add Theme > Upload zip file。
选择刚下载好的主题包。
上传完毕后单击 Customize 进入定制界面：
在设置界面中填入您的站点域名，然后单击 Save 进行保存，单击 Publish 发布：
此时就成功地激活了该主题。
4. 准备环境变量
点击顶部搜索框，搜索后在最下方单击 App and sales channel settings。
在右上方单击 Develop apps。
初次进入需要开通应用开发功能：
点击创建 app，输入名字后单击 Create app。
创建完成 App 后进入配置界面，单击 Configure Storefront API scopes 配置权限。
权限配置可参考如下：
配置完成后保存。进入 API Credentials 选项卡，安装应用后即可得到
Storefront API Access Token。
同时在设置界面的左上角可以得到您的
商店地址。
拿到商店地址和
Storefront API Access Token之后就可以用接口调用 Shopify 商店的接口了。集成详情
API 路由 (后端接口)
1. 购物车 API
POST /api/cart/create - 创建购物车。
GET /api/cart/get - 获取购物车信息。
POST /api/cart/add - 添加商品到购物车。
POST /api/cart/remove - 从购物车移除商品。
POST /api/cart/update - 更新购物车商品数量。
2. 用户认证 API
POST /api/customers/login - 用户登录。
POST /api/customers/register - 用户注册。
POST /api/customers/logout - 用户登出。
GET /api/customers/account - 获取用户账户信息。
3. 商品和订单 API
GET /api/collections - 获取商品分类。
GET /api/collections/[handle] - 获取特定分类的商品。
GET /api/orders - 获取用户订单。
POST /api/checkout/create - 创建结账会话。
主要功能模块
1. Shopify 集成层
封装 Shopify Storefront API 调用，提供统一的 GraphQL 客户端和业务服务层，处理所有与 Shopify 后端的数据交互。
核心客户端（src/lib/shopify/client.ts）：
2. 用户认证系统
基于 Shopify 客户系统实现用户注册、登录、登出功能，管理用户会话状态和访问令牌的本地存储。
认证上下文（src/context/auth-context.tsx）：
3. 购物车管理
实现完整的购物车功能，包括添加商品、修改数量、删除商品、购物车状态同步，支持本地存储和 Shopify 后端同步。
购物车上下文（src/context/cart-context.tsx）：
部署到 EdgeOne Pages
1. 添加环境变量
SHOPIFY_STORE_DOMAIN：填入您的 Shopify 商店地址。SHOPIFY_STOREFRONT_ACCESS_TOKEN：填入您的 Storefront API Access Token。SHOPIFY_API_VERSION：没有特殊要求的话填入 2025-04 即可。
配置完成后，单击开始部署，等待部署完成后将显示部署成功界面。如果项目出现部署失败，可以根据
构建日志 和 构建产物 信息修改项目，或者联系工作人员解决。2. 测试支付
