Next.jsReact电商启动器

commerceplate — Next.js 电商模板

作者 zeon-studio

Next.js + Shopify Storefront API 的免费电商启动模板，含 10+ 页面与完整购物流程。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

基于 Next.js 16 + Tailwind CSS 4 + TypeScript，使用 Shopify Storefront API（GraphQL）

内置完整电商流程：商品展示、购物车、结账（Shopify 处理）、用户认证

支持搜索、排序、多视图、标签/分类/厂商/价格/变体筛选

图片缩放悬停、相似商品推荐、无限滚动加载

自动明暗模式，首页横幅轮播可配置

预配置 Netlify 部署，支持 Markdown/MDX 内容

模板详细介绍

Commerceplate 是一个基于 Next.js 16、Tailwind CSS 4 和 TypeScript 的 Shopify 电商启动模板，由 Zeon Studio 开发并免费开源。它通过 Shopify Storefront API（GraphQL）拉取商品数据，内置了商品列表、详情、购物车、结账、用户认证等完整电商闭环，并预置了 10 多个页面，包括首页、产品、关于、联系、登录注册等。模板强调开箱即用，适合希望快速搭建 Shopify 无头电商前端的开发者。

模板的功能覆盖相当全面：支持商品搜索、排序、多视图切换，标签、分类、厂商、价格区间、商品变体筛选，还有相似商品推荐、图片缩放悬停效果、无限滚动加载。购物车支持编辑，结账和支付流程直接由 Shopify 处理。界面支持自动明暗模式，首页横幅轮播和商品区块可通过 Shopify 集合配置。内容部分支持 Markdown/MDX 编写，方便维护政策页面或博客。

需要留意的是，模板依赖 Shopify 店铺的 Headless Sales Channel 认证，配置时需要创建 Headless 应用并获取访问令牌，同时导入示例商品数据。README 中提到的演示站点和 PageSpeed 97% 分数是官方提供的参考，实际部署后的性能取决于你的 Shopify 数据、图片优化和服务器环境。此外，模板虽标注为生产就绪，但上线前仍需自行测试支付流程、账号体系及数据安全。

Next.js电商启动器

适合你的项目吗？

适用场景

快速搭建 Shopify 无头电商前端
学习 Next.js 与 Shopify Storefront API 集成
作为电商项目的基础模板进行二次开发

适合人群

熟悉 Next.js 和 Tailwind CSS 的开发者
使用 Shopify 作为后端的中小型电商项目
需要快速原型或 MVP 的团队

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
需要 Node v20.10+、npm v10.2+，并创建 Shopify 店铺与 Headless Sales Channel 获取访问令牌。
2
配置 .env 文件中的 SHOPIFY_STORE_DOMAIN 和 SHOPIFY_STOREFRONT_PRIVATE_ACCESS_TOKEN，并导入示例产品 CSV。

查看仓库使用说明