产品简介
快速开始
- Agent 开发
- 导入 Git 仓库
- 从模板开始
- 直接上传
- 从 AI 开始
框架指南
- Agent
- 前端
  - Vite
  - React
  - Vue
  - Hugo
  - 其他框架
- 后端
- 全栈
  - Next.js
  - Nuxt
  - Astro
  - React Router
  - SvelteKit
  - TanStack Start
  - Vike
- 自定义 404 页面
项目指南
- 项目管理
- edgeone.json
- 缓存配置
- 构建输出配置
- 域名管理
  - 概览
  - 自定义域名
  - 配置 HTTPS 证书
    - 概览
    - 申请免费证书
    - 使用 SSL 托管证书
  - 配置 DNS 的 CNAME 记录
- 错误码
构建指南
部署指南
- 概览
- 触发部署
- 管理部署
- 部署按钮
- 使用 Github Action
- 使用 Gitlab CI/CD
- 使用 CNB 插件
- 使用 IDE 插件
- 使用 CodeBuddy IDE
Makers for Platforms
- 平台与多租户
- Vibe Coding 解决方案
- 模板示例
  - Vibe Coding 通用模板
  - Vibe Coding 平台模板
可观测性
- 概览
- 指标分析
- 日志分析
Functions
- 概览
- Edge Functions
- Cloud Functions
  - 概览
  - Node.js
  - Python
  - Go
Agents
- 概览
- 快速开始
- 会话管理
- 可观测
- 沙箱工具
  - 概览
  - Agent 框架使用
  - 沙箱原子 API
  - 网络搜索工具
- Agent 应用鉴权
Models
- 概览
- 模型与厂商
  - 概览
  - 使用朱雀模型
  - 使用 Jev 模型
  - 使用厂商密钥
    - OpenAI
    - Anthropic
    - Google AI Studio
    - DeepSeek
    - MiniMax
    - 混元
    - 智谱
    - 月之暗面
- 常见问题
存储
- 概览
- KV
- Blob
中间件
AI 原生开发
- Skills
- MCP
- Plugin
Copilot
- 概览
- 快速开始
API Token
EdgeOne CLI
Makers SDK
- 概览
- 示例
  - 通过 SDK 部署
  - 通过 CLI 部署
  - 项目管理
- 项目
  - 项目操作
  - 环境变量
- 部署
消息通知
集成指南
- AI
  - Makers Models 集成
  - 图片大模型集成
- 数据库
  - Supabase 集成
  - Pages KV 集成
- 电商
  - Shopify 集成
  - WooCommerce 集成
- 支付
  - Stripe 集成
  - Paddle 集成
- CMS
  - WordPress 集成
  - Contentful 集成
  - Sanity 集成
  - Payload 集成
- 身份验证
  - Supabase 集成
  - Clerk 集成
- IM
  - 概览
  - 企业微信
  - 飞书
  - 钉钉
  - Telegram
  - Slack
  - Discord
最佳实践
- 为网站添加 AI 对话助手
- AI 对话式部署：使用 Skill 一句话部署项目
- 使用 Makers Agents 快速搭建 Agent 应用
- 使用 Shopify 搭建电商平台
- 使用 Supabase 和 Stripe 搭建 SaaS 站点
- 如何快速搭建公司品牌站点
- 如何快速搭建博客站点
- 在 WorkBuddy 中通过免登录部署快速上线
迁移指南
- 从 Vercel 迁移至 EdgeOne Makers
- 从 Cloudflare Pages 迁移至 EdgeOne Makers
- 从 Netlify 迁移至 EdgeOne Makers
排障指南
常见问题
限制与配额
价格与套餐
联系我们
产品动态

使用 Shopify 搭建电商平台

本文介绍了如何基于 Makers 的模板，快速搭建 高性能、易维护的电商网站，并实现了登录、购物车、订单等常用的动态功能，方便您快速搭建属于自己的电商网站。
背景介绍
Shopify 是全球领先的电商平台，拥有完善的电商生态系统。通过 Shopify Storefront API，开发者可以构建完全自定义的购物体验。Next.js 是基于 React 的全栈框架，支持服务端渲染和静态生成。EdgeOne Makers Shopify 模板充分利用了 Shopify 与 Next.js 的技术优势，为开发者提供搭建无头电商平台的完整方案，实现技术与商业的完美融合。
主要特性与优势：
性能卓越: 静态生成的页面部署到 EdgeOne Makers 后，可利用 CDN 实现快速加载
开发效率: 基于 Shopify 成熟的电商后端，无需重复开发支付、库存、订单等核心功能
用户体验: 完全自定义的前端界面，不受 Shopify 主题限制
SEO友好: 预渲染内容有利于搜索引擎索引
增量静态再生（ISR）：商品页面在构建时静态生成并由 CDN 加速分发，当 Shopify 商品数据变更时通过 Webhook 自动刷新缓存
适用场景
1、中小电商企业
中小电商企业资金技术有限。使用我们的模板搭建电商平台，无需雇佣专业开发团队。Shopify 低门槛操作让员工快速上手内容管理和店铺运营，在有限预算内提供出色购物体验，帮助企业在激烈竞争中脱颖而出。
2、品牌电商企业
对于注重品牌形象和用户体验的企业，标准 Shopify 主题可能无法满足个性化需求。使用我们的无头电商解决方案，可以完全自定义界面设计和交互体验，同时保留 Shopify 强大的电商后端功能，让品牌在激烈竞争中建立独特优势。
Shopify 配置
Shopify 提供了 StoreFront API 实现来实现 Headless 电商，EdgeOne Makers 通过调用 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 商店的接口了。
配置商品更新通知（Webhook）
本模板支持当 Shopify 商品发生变更时自动刷新网站内容。配置步骤如下：
点击顶部搜索框，输入 webhooks，点击第一个选项 Webhooks
﻿
点击 Create webhook，为以下事件各创建一个：
Event 选择 Product update
Format 选择 JSON
URL 填写部署后的站点地址 + /api/revalidate，例如 https://your-domain.edgeone.app/api/revalidate
﻿
同样为 Product creation 和 Product deletion 各创建一个 Webhook，URL 相同。
保存后，页面底部会显示 签名密钥（Your webhooks will be signed with...）
﻿
复制该密钥，在 EdgeOne Pages 控制台中将其设置为环境变量 SHOPIFY_WEBHOOK_SECRET
部署到 
1、添加环境变量
进入模板页 Shopify Ecommerce Starter，点击 Deploy登录后进入到控制台部署页面，分别配置以下环境变量：
SHOPIFY_STORE_DOMAIN：填入您的 Shopify 商店地址
SHOPIFY_STOREFRONT_ACCESS_TOKEN：填入您的 Storefront API Access Token
SHOPIFY_API_VERSION：没有特殊要求的话填入 2025-04 即可
SHOPIFY_WEBHOOK_SECRET：Webhook 签名密钥（可选，配置后支持商品变更时自动刷新）
﻿
配置完成后，点击"Start Deployment"按钮，等待部署完成后将显示部署成功界面。如果项目出现部署失败，可以根据 Build Logs 和 Build Summary 信息修改项目，或者联系工作人员解决。
2、测试支付
为了测试支付流程，可参考文档激活 Shopify 支付的测试模式。
﻿
﻿
﻿

背景介绍
适用场景
- 1、中小电商企业
- 2、品牌电商企业
Shopify 配置
部署到
- 1、添加环境变量
- 2、测试支付