产品简介
快速开始
- 导入 Git 仓库
- 从模板开始
- 直接上传
- 从 AI 开始
框架指南
- 前端
- 后端
- 全栈
  - Next.js
- 自定义 404 页面
项目指南
- 项目管理
- edgeone.json
- 缓存配置
- 错误码
构建指南
部署指南
- 概览
- 触发部署
- 管理部署
- 部署按钮
- 使用 Github Action
- 使用 CNB 插件
- 使用 IDE 插件
- 使用 CodeBuddy IDE
域名管理
- 概览
- 自定义域名
- 配置 HTTPS 证书
- 如何配置 DNS 的 CNAME 记录
Pages Functions
- 概览
- Edge Functions
- Node Functions
日志分析
KV 存储
边缘 AI
API Token
EdgeOne CLI
Pages MCP
集成指南
- AI
  - 对话型大模型集成
  - 图片大模型集成
- 数据库
  - Supabase 集成
  - Pages KV 集成
- 电商
  - Shopify 集成
  - WooCommerce 集成
- 支付
  - Stripe 集成
  - Paddle 集成
- CMS
  - WordPress 集成
  - Contentful 集成
  - Sanity 集成
- 身份验证
  - Supabase 集成
  - Clerk 集成
最佳实践
- 使用通用大模型快速搭建AI应用
- 使用 Deepseek-R1 模型快速搭建对话型AI站点
- 使用 WordPress + WooCommerce 和 GatsbyJS 搭建电商平台
- 使用 Supabase 和 Stripe 搭建 SaaS 站点
- 如何快速搭建公司品牌站点
- 如何快速搭建博客站点
迁移指南
- 从 Vercel 迁移至 EdgeOne Pages
- 从 Cloudflare Pages 迁移至 EdgeOne Pages
- 从 Netlify 迁移至 EdgeOne Pages
排障指南
常见问题
联系我们
产品动态

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。
﻿
初次进入需要开通 Create a legacy custom app 功能：
﻿
点击创建 app，输入名字后点击 Create app。
﻿
创建完成 App 后进入配置界面，点击 Configure Storefront API scopes，配置权限。
﻿
权限配置可参考如下：
﻿
配置完成后保存。进入 API Credentials 选项卡，安装应用后即可得到 Storefront API Access Token。
﻿
﻿
同时在设置界面的左上角可以得到您的商店地址。
﻿
拿到商店地址和Storefront API Access Token之后就可以用接口调用 Shopify 商店的接口了。
﻿
部署到 EdgeOne Pages
1、添加环境变量
进入模板页 Shopify Ecommerce Starter，点击 Deploy登录后进入到控制台部署页面，分别配置以下环境变量：
SHOPIFY_STORE_DOMAIN：填入您的 Shopify 商店地址
SHOPIFY_STOREFRONT_ACCESS_TOKEN：填入您的 Storefront API Access Token
SHOPIFY_API_VERSION：没有特殊要求的话填入 2025-04 即可
﻿
配置完成后，点击"Start Deployment"按钮，等待部署完成后将显示部署成功界面。如果项目出现部署失败，可以根据 Build Logs 和 Build Summary 信息修改项目，或者联系工作人员解决。
﻿
2、测试支付
为了测试支付流程，可参考文档激活 Shopify 支付的测试模式。
﻿
﻿
﻿