本文介绍了如何基于 Makers 的 Shopify 模板，快速搭建 高性能、易维护的电商网站，并实现了登录、购物车、订单等常用的动态功能，方便您快速搭建属于自己的电商网站。
背景介绍
Shopify 是全球领先的电商平台，拥有完善的电商生态系统。通过 Shopify Storefront API，开发者可以构建完全自定义的购物体验。Next.js 是基于 React 的全栈框架，支持服务端渲染和静态生成。EdgeOne Makers Shopify 模板 充分利用了 Shopify 与 Next.js 的技术优势，为开发者提供搭建无头电商平台的完整方案，实现技术与商业的融合。
主要特性与优势：
性能卓越： 静态生成的页面部署到 EdgeOne Makers 后，可利用 CDN 实现快速加载。
开发效率：基于 Shopify 成熟的电商后端，无需重复开发支付、库存、订单等核心功能。
用户体验：完全自定义的前端界面，不受 Shopify 主题限制。
SEO 友好：预渲染内容有利于搜索引擎索引。
适用场景
1. 中小电商企业
中小电商企业资金技术有限。使用我们的模板搭建电商平台，无需雇佣专业开发团队。Shopify 低门槛操作让员工快速上手内容管理和店铺运营，在有限预算内提供出色购物体验，帮助企业在激烈竞争中脱颖而出。
2. 品牌电商企业
对于注重品牌形象和用户体验的企业，标准 Shopify 主题可能无法满足个性化需求。使用我们的无头电商解决方案，可以完全自定义界面设计和交互体验，同时保留 Shopify 强大的电商后端功能，让品牌在激烈竞争中建立独特优势。
Shopify 配置
Shopify 提供了 Storefront API 实现来实现 Headless 电商，EdgeOne Makers 通过调用 Storefront API 来请求用户信息、购物车信息等，并展示在前端。
1. 创建商店
2. 添加商品
在
Products 下添加您的商品。
3. 安装 Headless 主题
在 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 Makers
1. 添加环境变量
SHOPIFY_STORE_DOMAIN：填入您的 Shopify 商店地址。SHOPIFY_STOREFRONT_ACCESS_TOKEN：填入您的 Storefront API Access Token。SHOPIFY_API_VERSION：没有特殊要求的话填入 2025-04 即可。
配置完成后，单击立即创建，等待部署完成后将显示部署成功界面。如果项目出现部署失败，可以根据
构建日志 和 构建产物 信息修改项目，或者联系工作人员解决。2. 测试支付
