国际站
    控制台
    • 产品简介
    • 快速开始
      • 导入 Git 仓库
      • 从模板开始
      • 直接上传
      • 从 AI 开始
    • 框架指南
      • 前端
        • Vite
        • React
        • Vue
        • 其他框架
      • 后端
      • 全栈
        • Next.js
        • Nuxt
        • Astro
        • React Router
        • SvelteKit
      • 自定义 404 页面
    • 项目指南
      • 项目管理
      • edgeone.json
      • 缓存配置
      • 构建输出配置
      • 错误码
    • 构建指南
    • 部署指南
      • 概览
      • 触发部署
      • 管理部署
      • 部署按钮
      • 使用 Github Action
      • 使用 CNB 插件
      • 使用 IDE 插件
      • 使用 CodeBuddy IDE
    • 域名管理
      • 概览
      • 自定义域名
      • HTTPS 配置
        • 概览
        • 申请免费证书
        • 使用 SSL 托管证书
      • 配置 DNS 的 CNAME 记录
    • 可观测性
      • 概述
      • 指标分析
      • 日志分析
    • Pages Functions
      • 概览
      • Edge Functions
      • Cloud Functions
        • 概览
        • Node Functions
    • KV 存储
    • 边缘 AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • 集成指南
      • AI
        • 对话型大模型集成
        • 图片大模型集成
      • 数据库
        • Supabase 集成
        • Pages KV 集成
      • 电商
        • WooCommerce 集成
        • Shopify 集成
      • 支付
        • Stripe 集成
        • Paddle 集成指南
      • CMS
        • Sanity 集成
        • Contentful 集成
        • WordPress 集成
        • Payload集成
      • 身份验证
        • Supabase 集成
        • Clerk 集成
    • 最佳实践
      • EdgeOne Pages 插件上线 Dify Marketplace
      • 使用边缘 AI 模型快速搭建对话型 AI 站点
      • 使用 Shopify 搭建电商平台
      • 使用 Supabase 和 Stripe 搭建 SaaS 站点
      • 如何快速搭建公司品牌站点
      • 如何快速搭建博客站点
      • 使用通用大模型快速搭建AI应用
    • 迁移指南
      • 从 Vercel 迁移至 EdgeOne Pages：优化您在中国区域的网站部署
      • 从 Cloudflare Pages 迁移至 EdgeOne Pages：优化您在中国区域的网站部署
      • 从 Netlify 迁移至 EdgeOne Pages：优化您在中国区域的网站部署
    • 排障指南
    • 常见问题
    • 联系我们
    • 产品动态
    Pages 文档/
    集成指南/
    电商/
    Shopify 集成/

    Shopify 集成

    本文介绍了如何基于 Shopify Storefront API，结合 Next.js 框架构建高性能网站。借助 EdgeOne Pages 的模板，您可以快速完成 Shopify 与 Next.js 的集成，并通过全球 CDN 加速，实现卓越的网站性能与用户体验。

    快速入门

    EdgeOne Pages 提供了完整的 Shopify + Nextjs 集成方案 模版。您可以点击模版中的部署按钮进行快速部署。
    本文的集成介绍主要包含以下二个步骤：配置 Shopify、部署到 EdgeOne Pages。如果您想了解这个方案的具体实现原理，或者需要根据自身需求进行定制化开发，可以继续阅读下面的详细配置步骤。

    Shopify 配置

    Shopify 提供了 StoreFront API 实现来实现 Headless 电商，EdgeOne Pages 通过调用 StoreFront API 来请求用户信息、购物车信息等，并展示在前端。

    1. 创建商店

    进入 Shopify Dev 注册新的账号，并创建一个商店，创建完成后进入您的商店管理后台。
    

    2. 添加商品

    在 Products 下添加您的商品。
    

    3. 安装 Headless 主题

    由于使用 Storefront API 实现的自定义电商网站会有自己的商店域名，需要安装 Shopify Headless Theme 来串联 Shopify 自带的页面与您的自定义站点之间的串联。
    在 Github 仓库下下载主题后，进入在线商店，点击 Add Theme->Upload zip file
    
    选择刚下载好的主题包
    
    上传完毕后点击 Customize进入定制界面：
    
    在设置界面中填入您的站点域名，然后点击 Save 保存，点击 Publish 发布：
    
    此时就成功地激活了该主题。

    4. 准备环境变量

    点击顶部搜索框，输入 App and sales channel setting，点击最下方的App and sales channel setting。
    
    点击右上方的 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 Ecommerce Starter，点击 Deploy登录后进入到控制台部署页面，分别配置以下环境变量：
    SHOPIFY_STORE_DOMAIN：填入您的 Shopify 商店地址。
    SHOPIFY_STOREFRONT_ACCESS_TOKEN：填入您的 Storefront API Access Token。
    SHOPIFY_API_VERSION：没有特殊要求的话填入 2025-04 即可。
    
    配置完成后，点击"开始部署"按钮，等待部署完成后将显示部署成功界面。如果项目出现部署失败，可以根据 构建日志 和 构建产物 信息修改项目，或者联系工作人员解决。

    2. 测试支付

    为了测试支付流程，可参考文档激活 Shopify 支付的测试模式。