Shopify 集成
Shopify 是一个全球领先的电子商务平台,专为企业和个人提供创建、管理和扩展在线商店的解决方案。它以易用性、可扩展性和强大的功能著称,可快速构建专业的在线商店,同时支持多渠道销售、支付网关集成、订单管理和营销工具。无论是初创企业还是大型品牌,Shopify 都能满足不同规模商家的需求,并通过丰富的开发者资源和全球化支持,帮助用户轻松开展和优化电商业务。
概览
本文主要介绍如何基于 Shopify Storefront API ,配合Next.js框架构建高性能网站。通过EdgeOne Pages的一键部署能力,您可以快速完成Shopify和Next.js的集成,同时获得全球CDN加速,实现网站的最佳性能和用户体验。
快速入门
本文的集成介绍主要包含以下三个步骤:配置 Shopify、使用Next.js生成页面、部署到EdgeOne Pages。如果您想了解这个方案的具体实现原理,或者需要根据自身需求进行定制化开发,可以继续阅读下面的详细配置步骤。
Shopify 配置
Shopify 提供了StoreFront API实现来实现 Headless 电商,EdgeOne Pages 边缘函数通过调用StoreFront API来请求用户信息、购物车信息等,并展示在前端。
1. 创建商店


2. 添加商品
在
Products
下添加您的商品。
3. 安装 Headless 主题
在 Github 仓库下下载主题后,进入商店控制台:https://${your-shopify-store-subdomain}.myshopify.com/admin/themes。
点击
Add Theme
->Upload zip file

选择刚下载好的主题包

上传完毕后点击
Customize
进入定制界面:
在设置界面中填入您的站点域名,然后点击
Save
保存,点击 Publish
发布:
此时就成功地激活了该主题。
4. 准备环境变量
点击菜单栏的
Sales channels
,弹出搜索框,点击最下方的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 商店的接口了。调用示例
// 读取环境变量const storefrontAccessToken = env.SHOPIFY_STOREFRONT_ACCESS_TOKEN;const shopifyDomain = env.SHOPIFY_STORE_DOMAIN;const apiVersion = env.SHOPIFY_API_VERSION || '2024-04';// 构建请求地址const graphqlEndpoint = `https://${shopifyDomain}/api/${apiVersion}/graphql.json`;// 根据文档构建需要的 graphqlconst mutation = `mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {customerAccessTokenCreate(input: $input) {customerAccessToken {accessTokenexpiresAt}customerUserErrors {codefieldmessage}}}`;// 传参const variables = {input: {email: '1@gmail.com',password: '111111',},};// 请求数据const response = await fetch(graphqlEndpoint, {method: "POST",headers: {"Content-Type": "application/json","X-Shopify-Storefront-Access-Token": storefrontAccessToken,},body: JSON.stringify({ query: mutation, variables }),});
快速开始
将模板仓库拉到本地,安装依赖:
npm i
创建一个
.env
文件,写入环境变量:# 本地调试用NEXT_PUBLIC_DEV=trueFRONT_END_URL_DEV=http://localhost:3000NEXT_PUBLIC_API_URL_DEV=http://localhost:8088# 前面准备好的 shopify变量SHOPIFY_STORE_DOMAIN=yourshop.myshopify.comSHOPIFY_STOREFRONT_ACCESS_TOKEN=your-storefront-access-token# 写死即可SHOPIFY_API_VERSION=2025-04
然后分别运行:
npm run dev
启动前端调试。npm run edge:dev
启动函数调试。
部署到EdgeOne Pages
1、代码发布到 Git
将代码提交到git仓库即可完成部署。假设你已经创建了
my-ecommere-website
项目,并且将当前目录关联到了该项目,使用以下命令提交:git add .git commit -m "Initial commit"git push origin main
2、项目导入 Pages
3、添加环境变量
点击部署portfolio-with-sanity后,在准备部署界面点击"Environment Variables",分别配置以下环境变量:
SHOPIFY_STORE_DOMAIN
:填入您的 Shopify 商店地址SHOPIFY_STOREFRONT_ACCESS_TOKEN
:填入您的 Storefront API Access TokenSHOPIFY_API_VERSION
:没有特殊要求的话填入2025-04即可
配置完成后,点击"Start Deployment"按钮,等待部署完成后将显示部署成功界面:
至此,我们已经完成了整个方案的完整部署流程。通过这个方案,你可以:
使用 Shopify 强大的电商后台功能
灵活地自定义属于你自己的电商网站页面