Shopify 集成

Shopify 是一个全球领先的电子商务平台,专为企业和个人提供创建、管理和扩展在线商店的解决方案。它以易用性、可扩展性和强大的功能著称,可快速构建专业的在线商店,同时支持多渠道销售、支付网关集成、订单管理和营销工具。无论是初创企业还是大型品牌,Shopify 都能满足不同规模商家的需求,并通过丰富的开发者资源和全球化支持,帮助用户轻松开展和优化电商业务。


概览

本文主要介绍如何基于 Shopify Storefront API ,配合Next.js框架构建高性能网站。通过EdgeOne Pages的一键部署能力,您可以快速完成Shopify和Next.js的集成,同时获得全球CDN加速,实现网站的最佳性能和用户体验。

快速入门

EdgeOne Pages提供了完整的Shopify + Nextjs集成方案模版。您可以点击模版中的部署按钮进行快速部署。
本文的集成介绍主要包含以下三个步骤:配置 Shopify、使用Next.js生成页面、部署到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 仓库下下载主题后,进入商店控制台: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`;

// 根据文档构建需要的 graphql
const mutation = `
mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {
customerAccessTokenCreate(input: $input) {
customerAccessToken {
accessToken
expiresAt
}
customerUserErrors {
code
field
message
}
}
}
`;
// 传参
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 }),
});

快速开始

EdgeOne已经为您准备了一个基于Next.js的完整模板,您可以直接使用。
将模板仓库拉到本地,安装依赖:npm i
创建一个.env 文件,写入环境变量:
# 本地调试用
NEXT_PUBLIC_DEV=true
FRONT_END_URL_DEV=http://localhost:3000
NEXT_PUBLIC_API_URL_DEV=http://localhost:8088
# 前面准备好的 shopify变量
SHOPIFY_STORE_DOMAIN=yourshop.myshopify.com
SHOPIFY_STOREFRONT_ACCESS_TOKEN=your-storefront-access-token
# 写死即可
SHOPIFY_API_VERSION=2025-04
然后分别运行:
npm run dev 启动前端调试。
npm run edge:dev 启动函数调试。
打开http://localhost:3000/进入页面,即可体验完整的电商服务了。


部署到EdgeOne Pages

1、代码发布到 Git

将代码提交到git仓库即可完成部署。假设你已经创建了 my-ecommere-website 项目,并且将当前目录关联到了该项目,使用以下命令提交:
git add .
git commit -m "Initial commit"
git push origin main

2、项目导入 Pages

提交完成后,如果你已经是EdgeOne Pages用户且已关联GitHub账户,访问 控制台 部署对应的项目即可。

3、添加环境变量

点击部署portfolio-with-sanity后,在准备部署界面点击"Environment Variables",分别配置以下环境变量:
SHOPIFY_STORE_DOMAIN:填入您的 Shopify 商店地址
SHOPIFY_STOREFRONT_ACCESS_TOKEN:填入您的 Storefront API Access Token
SHOPIFY_API_VERSION:没有特殊要求的话填入2025-04即可

配置完成后,点击"Start Deployment"按钮,等待部署完成后将显示部署成功界面:

至此,我们已经完成了整个方案的完整部署流程。通过这个方案,你可以:
使用 Shopify 强大的电商后台功能
灵活地自定义属于你自己的电商网站页面