Docs Overview/
Shopify 集成/

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 强大的电商后台功能
灵活地自定义属于你自己的电商网站页面