Astro电商

astro-njx-maison — Astro 电商模板

作者 njbSaab

Maison 是一款基于 Astro 的免费经典电商主题,以印刷档案风格呈现三个虚构商号与顾客橱柜,支持实时货币切换,可选接入 Shopify Storefront API。

看看你的网站会是什么样

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

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

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

采集于 2026-10-05查看来源

值得关注的模板亮点

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

01

印刷编辑风格:Playfair Display 标题、Karla 正文、Cousine 小型大写标签,暖纸底色与细线分隔

02

三个独立商号:日内瓦制表、萨维尔街定制、巴黎古籍,各含宣言、大型菜单、搜索建议与 36 件目录

03

分面筛选栏:按估值区间、商号、材质、年代和可售状态筛选,带实时计数与印刷风格标签

04

孤品交易流程:私人金库、含总估值的选购袋,以及“Request the keeper”请求机制

05

顾客橱柜:统计条、四步工艺进度订单、活动日志、住所与特权

06

实时货币切换:美元、欧元、英镑,全站价格即时重算

模板详细介绍

Maison 是一款 Astro 电商主题,定位为“印刷档案”而非传统网店。视觉上采用衬线字体、暖纸底色、细线分隔和单一酒红强调色,整体呈现印刷品般的编辑设计感。主题内置三个虚构商号:日内瓦制表商(始于 1888)、萨维尔街定制工坊(始于 1904)和巴黎古籍柜(始于 1792),每个商号拥有独立的宣言、大型菜单、搜索建议和 36 件商品目录。商品浏览提供分面筛选栏,可按估值区间、商号、材质、年代和可售状态筛选,并显示实时计数。交易流程采用“独一无二”模式:每件商品均为孤品,提供私人金库、带有总估值的选购袋,以及“Request the keeper”请求流程,而非标准结账。顾客橱柜包含统计条、带有四步工艺进度(准备→手工制作→检验→发货)的订单、活动日志、住所和特权。全站价格支持美元、欧元、英镑实时切换。搜索为全屏衬线样式,可通过 ⌘K 或 / 唤起,覆盖三个商号。SEO 方面提供静态商品记录、Product 与 AggregateRating JSON-LD、Open Graph 和站点地图友好结构。主题默认使用内置模拟目录,无需密钥或账号即可运行;商业层基于提供者模式,通过两个环境变量可切换至 Shopify Storefront API。技术栈为 Astro、Tailwind CSS 和 nanostores,输出静态站点,可部署于 Cloudflare Pages、Netlify、Vercel 或 GitHub Pages。代码采用 MIT 许可,可免费用于个人和商业项目。

Astro电商

适合你的项目吗?

适用场景

  • 搭建具有印刷档案气质的奢侈品或古董展示型电商站点
  • 需要多商号或多品牌共用一套主题并各自拥有独立导航与目录的项目
  • 希望以请求制或预约制替代标准结账流程的孤品销售场景
  • 需要分面筛选、实时货币切换和顾客账户面板的静态电商前端
  • 使用 Astro 静态输出并计划部署到 Cloudflare Pages、Netlify、Vercel 或 GitHub Pages 的项目

适合人群

  • 奢侈品、古董、定制工坊等强调编辑设计与档案叙事的品牌
  • 需要多商号独立目录与导航的集合型电商站点
  • 接受请求制交易流程而非标准结账的孤品销售者
  • 使用 Astro 并希望以模拟数据快速启动、后续可选接入 Shopify 的开发者

上手与定制指南

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

  1. 1

    克隆仓库后执行 npm install 与 npm run dev,主题默认使用内置模拟目录,无需密钥或账号

  2. 2

    接入 Shopify 需设置 COMMERCE_PROVIDER=shopify、SHOPIFY_STORE_DOMAIN 和 SHOPIFY_STOREFRONT_TOKEN 三个环境变量并重新构建

  3. 3

    品牌定制主要修改 scripts/gen-catalog.py(商号、分类与 36 件目录)和 src/styles/global.css(纸张、墨色与强调色令牌)

  4. 4

    代码采用 MIT 许可,分发时需保留版权声明与完整许可文本;演示图片、字体、图标等第三方素材需单独核对许可

  5. 5

    域名、托管、数据库、支付等外部服务可能产生额外费用,不在代码许可范围内

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供;担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
  • 接入 Shopify 实时商品需配置环境变量并重新构建;默认仅使用内置模拟目录,不含真实商品数据。
  • 使用 Shopify 商业层需自备 Shopify 店铺域名与 Storefront API 访问令牌,属于外部服务依赖。
  • 回链 njxui.dev 仅为建议,并非强制要求,不影响自由使用。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

The commerce layer is provider-based. Two env vars switch it from mock data to the Shopify Storefront API:

README 原文

COMMERCE_PROVIDER=shopify SHOPIFY_STORE_DOMAIN=your-store.myshopify.com SHOPIFY_STOREFRONT_TOKEN=your-storefront-access-token

README 原文

A link back to [njxui.dev](https://njxui.dev) is appreciated but not required.

README 原文
https://github.com/njbSaab/astro-njx-maison/blob/main/LICENSEhttps://github.com/njbSaab/astro-njx-maison/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-05。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
Astro Themes
资料与维护参考分
资料较完整 · 80 / 100
技术栈
Astro
网站类型
电商
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-09-26
截图检查日期
2026-10-05

已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-06

查看当时使用的来源资料

SHA-256: 73eba6a2f856fd706fe999f533e6ba68a653f08f70f042e83fe26f1e89b5d857

2026-10-05T21:59:16.205Z

来源文件 / 仓库
# Maison — a printed archive, not a webshop

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/njbSaab/astro-njx-maison) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/njbSaab/astro-njx-maison)

**Free classic Astro e-commerce theme.** Serif typography on warm paper, hairline rules,
three archive houses and a patron cabinet — no neon, no glow, no checkout theatre.

**[Live demo →](https://astro-njx-maison.pages.dev)** ·
[More themes at njxui.dev](https://njxui.dev/themes)

![Maison — home page](docs/preview.jpg)

## What's inside

- **Printed editorial design** — Playfair Display headlines, Karla text, Cousine
  small-caps labels, one bordeaux accent, hairline rules everywhere.
- **Three archive houses** in one theme — a Geneva watchmaking maison (est. 1888),
  a Savile Row bespoke atelier (est. 1904) and a Paris antiquarian cabinet
  (est. 1792) — each with its own manifesto, mega menu, search suggestions and
  36-piece catalogue.
- **Faceted archive rail** — valuation range, house, material, era, availability;
  live counts and printed chips.
- **One-of-one commerce** — every piece is unique: a private vault, an acquisition
  bag with a total valuation and a "Request the keeper" flow instead of a checkout.
- **Patron cabinet** — stats strip, orders with a four-step craft progress
  (Preparation → Hand-crafting → Inspection → Dispatched), activity log,
  residences, privileges.
- **Live currency switch** — USD / EUR / GBP; every price on the site reprices
  instantly.
- **Full-screen serif search** on `⌘K` and `/` across all three houses.
- **SEO-ready** — static piece records with Product + AggregateRating JSON-LD,
  Open Graph, sitemap-friendly.

## Quick start

```bash
git clone https://github.com/njbSaab/astro-njx-maison.git
cd astro-njx-maison
npm install
npm run dev
```

The theme runs out of the box on the bundled mock catalogue — no keys, no accounts.

## Connect Shopify (optional)

The commerce layer is provider-based. Two env vars switch it from mock data to
the Shopify Storefront API:

```bash
COMMERCE_PROVIDER=shopify
SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
SHOPIFY_STOREFRONT_TOKEN=your-storefront-access-token
```

Rebuild, and the archive renders your live products.

## Stack

[Astro 5](https://astro.build) · [Tailwind CSS v4](https://tailwindcss.com) ·
[nanostores](https://github.com/nanostores/nanostores) — static output, deploys
anywhere (Cloudflare Pages, Netlify, Vercel, GitHub Pages).

## Rebrand in two files

1. `scripts/gen-catalog.py` — houses, categories and the 36-piece catalogue.
2. `src/styles/global.css` — the paper, ink and accent tokens.

## More themes

Maison is the free theme of the classic line at **[njxui.dev](https://njxui.dev/themes)** —
alongside [Heritage](https://njxui.dev/themes/heritage) (classic luxury with a
full checkout, light + dark) and [Lumière](https://njxui.dev/themes/lumiere)
(three boutiques on one warm-paper engine), plus a modern line and free
Shopify-ready storefronts.

## License

[MIT](LICENSE) — free for personal and commercial projects. A link back to
[njxui.dev](https://njxui.dev) is appreciated but not required.
反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。