Shopify 集成
本文介绍了如何基于 Shopify Storefront API，结合 Next.js 框架构建高性能网站。借助 EdgeOne Makers 的模板，您可以快速完成 Shopify 与 Next.js 的集成，并通过全球 CDN 加速，实现卓越的网站性能与用户体验。
快速入门
本文的集成介绍主要包含以下二个步骤：配置 Shopify、部署到 EdgeOne Makers。如果您想了解这个方案的具体实现原理，或者需要根据自身需求进行定制化开发，可以继续阅读下面的详细配置步骤。
Shopify 配置
1、创建商店
2、添加商品
在
Products 下添加您的商品。
3、安装 Headless 主题
在 Github 仓库下下载主题后，进入在线商店，点击
Add Theme->Upload zip file
选择刚下载好的主题包
上传完毕后点击
Customize进入定制界面：
在设置界面中填入您的站点域名，然后点击
Save 保存，点击 Publish 发布：
此时就成功地激活了该主题。
4、准备环境变量
点击顶部搜索框，输入
App and sales channel setting，点击最下方的App and sales channel setting。
点击右上方的
Develop apps。
初次进入需要开通
Create a legacy custom app 功能：
点击创建 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 Makers
1、添加环境变量
SHOPIFY_STORE_DOMAIN：填入您的 Shopify 商店地址SHOPIFY_STOREFRONT_ACCESS_TOKEN：填入您的 Storefront API Access TokenSHOPIFY_API_VERSION：没有特殊要求的话填入 2025-04 即可
配置完成后，点击"Start Deployment"按钮，等待部署完成后将显示部署成功界面。如果项目出现部署失败，可以根据
Build Logs 和 Build Summary 信息修改项目，或者联系工作人员解决。2、测试支付
