Astro电商启动器

astro-shopify — Astro 电商模板

作者 thomasKn

基于Astro与Svelte的轻量Shopify无头电商启动模板，适合快速搭建定制店面。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图

桌面端首页1 / 2

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

桌面端截图

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

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。本截图因高度限制未包含整页。

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

值得关注的模板亮点

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

基于 Astro 构建，支持 Svelte、React、Vue 等多种组件框架

集成 Shopify Storefront API，提供商品与库存数据获取

内置购物车状态管理，支持基础加购与结账流程

使用 Tailwind UI 免费组件，视觉风格简洁现代

项目结构清晰，适合作为定制开发的起点

模板详细介绍

astro-shopify 是一个面向开发者的轻量级电商启动模板，用于构建基于 Shopify 的无头店面。它选择 Astro 作为核心框架，默认使用 Svelte 编写交互组件，但得益于 Astro 的架构，你完全可以按需替换为 React、Vue 或 Solid 等框架。模板的视觉部分基于 Tailwind UI 的免费组件，整体风格简洁，适合作为定制开发的起点。

项目结构清晰，包含典型的 Astro 页面、组件、布局和工具函数目录。核心的 Shopify 集成逻辑集中在 /utils 下的配置文件中，通过 Storefront API 获取商品和库存数据。模板内置了购物车状态管理（stores/cart.ts），并提供了基础的页面路由。对于需要快速搭建无头电商前端的团队，这个模板能省去繁琐的初始配置，让你专注于业务逻辑和界面设计。

需要注意的是，该模板并非开箱即用的完整商城。你需要准备 Shopify 商店并开通 Headless 渠道，获取访问令牌，并正确配置 API 权限。README 中特别提醒要使用 Storefront API 而非 Admin API，且测试商品需包含图片，否则结账侧边栏可能无法正常显示。部署前务必核对环境变量和 API 版本，确保与你的 Shopify 商店设置匹配。

Astro电商启动器

适合你的项目吗？

适用场景

快速搭建 Shopify 无头电商前端原型
需要轻量级、高性能的电商店面基础模板
希望使用 Astro 生态并灵活选择 UI 框架的团队
已有 Shopify 商店，需要定制化前端展示

适合人群

熟悉 Shopify 无头架构的开发者
需要快速启动电商项目的团队
偏好 Astro 或静态站点生成器的开发者

上手与定制指南

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

1
需创建 Shopify 商店并添加 Headless 渠道，获取 Storefront API 的公开和私有访问令牌。
2
配置 .env 文件，并确保 API 权限包含 unauthenticated_read_product_listings 和 unauthenticated_read_product_inventory。
3
运行 npm install 和 npm run dev 即可启动开发服务器。

查看仓库使用说明