diff --git a/docs/user-guide/shop/index.mdx b/docs/user-guide/shop/index.mdx
new file mode 100644
index 00000000..bd54119f
--- /dev/null
+++ b/docs/user-guide/shop/index.mdx
@@ -0,0 +1,28 @@
+---
+title: 商城
+description: 商城相关的使用文档。
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+:::note
+限 [Halo 商业版](../../getting-started/prepare.md#发行版本) 可用。
+:::
+
+商城模块是 Halo 商业版的一项功能，支持用户基于 Halo 站点创建店铺，上架多种类型的货品，配置商品支付和发货方式。为实体商品、虚拟商品、链接商品等销售场景提供完备的电商解决方案。
+
+
+
+ 
+
+
+ 
+
+
+
+```mdx-code-block
+import DocCardList from '@theme/DocCardList';
+
+
+```
diff --git a/docs/user-guide/shop/orders.mdx b/docs/user-guide/shop/orders.mdx
new file mode 100644
index 00000000..4999f2fb
--- /dev/null
+++ b/docs/user-guide/shop/orders.mdx
@@ -0,0 +1,27 @@
+---
+title: 订单管理
+description: 商城订单管理相关使用文档。
+---
+
+
+
+## 查看订单详情
+
+我们可以点击订单标题进入订单详情页面，或者点击订单标题右侧的图标按钮预览订单详情。
+
+
+
+
+
+## 发货
+
+收到用户订单之后，可以在订单详情页面的 **发货信息** 区域点击 **发货** 按钮，打开发货界面：
+
+
+
+在这个界面我们需要勾选需要发货的产品以及物流信息，然后点击 **确认发货** 按钮，即可完成发货。
+
+:::info 提示
+1. 目前仅支持填写物流单号等信息，目前没有对接物流查询平台，所以需要用户手动根据物流单号查询物流信息。
+2. 目前仅支持实体物流发货，虚拟产品暂不支持，后续会提供虚拟物品池、付费后下载文件、Webhook、自动发货等功能
+:::
\ No newline at end of file
diff --git a/docs/user-guide/shop/payments.mdx b/docs/user-guide/shop/payments.mdx
new file mode 100644
index 00000000..45165b10
--- /dev/null
+++ b/docs/user-guide/shop/payments.mdx
@@ -0,0 +1,181 @@
+---
+title: 支付方式
+description: 商城支付方式相关使用文档。
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+在正式运营商城之前，我们需要配置至少一个可用的支付方式，目前商城支持的支付方式包括：
+
+- 支付宝
+- 微信支付
+- 银行转账（手动）
+- 收款码支付（手动）
+
+首先登录到 Halo 控制台，进入 **商店 -> 设置 -> 支付方式** 页面，点击右上角的新建按钮。
+
+
+
+ 
+
+
+ 
+
+
+
+:::note
+在配置支付方式之前，建议先创建一个测试产品，方便在配置完成后进行测试。
+:::
+
+## 支付宝
+
+### 创建支付宝应用
+
+支付宝支付使用官方接口，买家交易的资金将直接进入商家的支付宝账户，无第三方平台介入。
+
+在创建支付宝支付方式之前，需要先在支付宝商家平台和支付宝开放平台完成注册。
+
+- [支付宝商家平台](https://b.alipay.com/)
+- [支付宝开放平台](https://open.alipay.com/)
+
+注册完成后，进入支付宝 [开放平台 -> 控制台](https://open.alipay.com/develop/manage)，点击 **创建网页/移动应用** 按钮：
+
+
+
+其中 **应用类型** 选择网页应用，其他参数按照实际情况填写即可。
+
+### 获取支付宝配置信息
+
+创建应用后，进入应用详情页面：
+
+
+
+- 1️⃣：应用 ID
+- 2️⃣：设置接口加签方式
+ - 加签方式选择 **密钥**
+ - 其他流程按照支付宝的指引进行操作
+ - 最后下载 **支付宝公钥证书** 到本地，后续配置时需要
+- 3️⃣：接口内容加密方式，点击 **生成加密方式** 并复制密文
+
+### 在 Halo 中配置
+
+打开新建支付方式的界面，支付提供商选择 **支付宝支付**，并填写以下信息：
+
+- 是否启用：勾选
+- 名称：给用户展示的支付方式名称
+- 场景：选择 **PC 网页支付**
+- 网关地址：`https://openapi.alipay.com`
+- 支付宝账号 ID：进入支付宝开放平台的账户中心，复制 **账号 ID**
+- 应用 ID：上一步中获取的应用 ID
+- 商户私钥：上一步在工具中生成的密钥文件
+- 支付宝公钥：上一步中下载的 `alipayCertPublicKey_RSA2.crt` 文件内容
+- 加密密钥：上一步中生成的加密密钥
+
+配置完成之后，还需要在 [销售渠道](./sales-channels.mdx) 中绑定该支付方式。
+
+支付预览：
+
+
+
+### 沙箱环境
+
+访问 [沙箱应用 - 开放平台](https://open.alipay.com/develop/sandbox/app)，按照页面上的信息在 Halo 中配置即可。
+
+## 微信支付
+
+### 申请微信支付商户号
+
+微信支付使用官方接口，买家交易的资金将直接进入商家的微信支付商户账户，无第三方平台介入。
+
+在配置微信支付之前，需要先在微信支付商户平台申请商户号。
+
+- [微信支付商户平台](https://pay.weixin.qq.com/)
+- [微信支付开发文档](https://pay.weixin.qq.com/doc/v3/merchant/4012791874)
+
+注册并完成商户认证后，进入 [微信支付商户平台](https://pay.weixin.qq.com/)，开通 **Native 支付**。
+
+### 获取微信支付配置信息
+
+登录微信支付商户平台后，需要获取以下配置信息：
+
+#### 获取商户号
+
+进入商户平台的 **账户中心 -> 商户信息**，查看您的微信支付商户号（Mch ID）。
+
+#### 设置 API 密钥
+
+1. 进入 **账户中心 -> API 安全 -> API v3 密钥**
+2. 点击 **设置密钥** 按钮，按照提示设置 API v3 密钥（32 位字符串）
+3. 请妥善保管该密钥，后续在 Halo 中配置时需要使用
+
+#### 申请 API 证书
+
+1. 进入 **账户中心 -> API 安全 -> 验证商户身份 -> 商户 API 证书**
+2. 点击 **申请 API 证书** 或 **管理证书**
+3. 按照页面指引完成操作后，下载证书文件（包含 `apiclient_cert.pem` 和 `apiclient_key.pem`）
+4. 在证书管理页面可以查看到证书序列号，记录下来以便配置
+
+#### 获取微信 AppID
+
+1. 进入 **产品中心 -> AppID 账号管理**
+2. 关联您的微信公众号、小程序或企业微信
+3. 记录下对应的 AppID
+
+### 在 Halo 中配置
+
+打开新建支付方式的界面，支付提供商选择 **微信支付**，并填写以下信息：
+
+- 是否启用：勾选
+- 名称：给用户展示的支付方式名称
+- 场景：选择 **PC 网页支付**
+- 应用 ID：上一步获取的微信 AppID
+- 商户号：上一步获取的商户号（Mch ID）
+- 商户私钥：上一步下载的 `apiclient_key.pem` 文件内容
+- 商户证书序列号：上一步获取的证书序列号
+- API v3 密钥：上一步设置的 API v3 密钥
+
+配置完成之后，还需要在 [销售渠道](./sales-channels.mdx) 中绑定该支付方式。
+
+支付预览：
+
+
+
+## 银行转账
+
+银行转账支付方式不经过 Halo 的支付系统，仅仅是在支付的时候显示商家的银行收款信息，让买家转账到商家的银行账户，后续再通过人工审核的方式确认订单。
+
+打开新建支付方式的界面，支付提供商选择 **银行转账**，并填写以下信息：
+
+- 是否启用：勾选
+- 名称：给用户展示的支付方式名称
+- 场景：选择 **PC 网页支付**
+- 收款银行：银行名称
+- 银行支行地址：开户行地址
+- 收款账户名：收款账户名称
+- 收款账号：收款银行账号
+- 付款说明：为用户说明转账时需要注意的事项
+
+配置完成之后，还需要在 [销售渠道](./sales-channels.mdx) 中绑定该支付方式。
+
+支付预览：
+
+
+
+## 收款码支付
+
+收款码支付方式不经过 Halo 的支付系统，仅仅是在支付的时候显示商家的收款码，让买家扫码支付，后续再通过人工审核的方式确认订单。
+
+打开新建支付方式的界面，支付提供商选择 **收款码支付**，并填写以下信息：
+
+- 是否启用：勾选
+- 名称：给用户展示的支付方式名称
+- 场景：选择 **PC 网页支付**
+- 收款码二维码图片链接
+- 付款说明：为用户说明扫码时需要注意的事项
+
+配置完成之后，还需要在 [销售渠道](./sales-channels.mdx) 中绑定该支付方式。
+
+支付预览：
+
+
\ No newline at end of file
diff --git a/docs/user-guide/shop/prepare.mdx b/docs/user-guide/shop/prepare.mdx
new file mode 100644
index 00000000..75ffad34
--- /dev/null
+++ b/docs/user-guide/shop/prepare.mdx
@@ -0,0 +1,32 @@
+---
+title: 写在前面
+description: 在开始使用商城功能之前，你需要了解的事项
+---
+
+## 前提条件
+
+在开始使用商城功能之前，需要先确定以下条件是否已满足：
+
+- 正常安装 [Halo 商业版](../../getting-started/install/docker-compose.md)
+- 激活 [Halo 商业版许可证](../../user-guide/activate.md)
+- 根据当地法律法规，满足开设网络商店的资质与要求
+- 开通支付平台账户，目前支持：
+ - [支付宝官方接口](https://open.alipay.com/)
+ - [微信支付官方接口](https://pay.weixin.qq.com/)
+
+## 前台路由
+
+目前商城包含以下前台路由：
+
+- `/shop`：商城首页，目前会重定向到商品列表页面
+- `/shop/products`：商品列表页面
+- `/shop/products/:id`：商品详情页面
+- `/shop/cart`：购物车页面
+- `/shop/checkout/:id`：结算页面
+- `/shop/order/:code/payments`：支付页面
+
+:::note
+这些页面无需主题提供对应的模板文件即可访问，使用的是系统内置的模板文件。如果当前激活的主题提供了对应的模板文件，则会优先使用主题提供的模板文件。
+:::
+
+你可以根据需求，将这些页面路径添加到[网站菜单](../menus.md)中。
\ No newline at end of file
diff --git a/docs/user-guide/shop/products.mdx b/docs/user-guide/shop/products.mdx
new file mode 100644
index 00000000..df00e3a7
--- /dev/null
+++ b/docs/user-guide/shop/products.mdx
@@ -0,0 +1,95 @@
+---
+title: 产品管理
+description: 商城产品管理相关使用文档。
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+
+## 创建产品
+
+首先登录到 Halo 控制台，进入 **商店 -> 产品** 页面，点击右上角的新建按钮。
+
+
+
+### 基本信息
+
+- 名称：产品名称
+- 简短描述：产品的简短描述
+- 描述：产品的详细描述，使用富文本编辑器
+- 图片：产品图片，可以直接上传或者从附件库中选择，第一张图片会作为封面图
+
+### 产品数据
+
+这里主要配置产品的类型、属性、规格、价格等数据。
+
+产品类型目前支持三种：
+
+1. 实体：需要配送的产品类型
+2. 虚拟：不需要实体配送，使用线上发货的产品类型
+3. 链接：直接跳转到第三方链接的产品类型
+
+#### 属性配置
+
+属性的作用是为产品添加一些额外的信息，比如颜色、尺寸、型号等，同时也可以用于生成产品规格。
+
+
+
+- 名称：属性名称，比如颜色、尺寸
+- 属性值：支持多个属性值，比如颜色可以有红色、蓝色、绿色等，尺寸可以有小、中、大等，同时也可以为不同的属性值设置图片，用于展示给用户
+- 用于生成产品规格：勾选后，支持在配置产品规格时根据多个属性生成不同的产品规格
+
+#### 规格配置
+
+规格即产品的具体规格，比如颜色为红色、尺寸为小，型号为1234567890，可以根据属性值生成不同的规格，并单独设置价格、库存等信息，最终用户购买时，可以选择属性值来确定购买的产品规格。
+
+:::note
+这里的规格也可以称之为 **变体** 或者 **SKU**。
+:::
+
+
+
+当我们设置好 [属性](#属性配置) 之后，可以点击 **生成规格** 按钮来批量生成所有可能产生的规格。
+
+
+
+然后可以点击具体的规格项，展开规格配置表单：
+
+
+
+- 图片：为规格设置图片，用于在购物车，订单等页面展示，如果不设置，会使用属性值中配置的图片或者产品封面
+- 状态：支持 **草稿**、**已发布**、**已归档** 三种状态
+- SKU 编号：规格的唯一标识
+- 条形码：产品规格的条形码，也可用于表示 GTIN、UPC、EAN 或 ISBN 等
+- 价格：规格的真实价格
+- 划线价：规格的划线价，用于表示原价
+- 管理库存
+ - 否：不管理库存，用户可以无限购买
+ - 是：管理库存，用户购买时，库存会减少
+- 库存：规格的库存数量，当库存为0时，用户无法购买
+- 重量：规格的重量
+- 长度：规格的长度
+- 宽度：规格的宽度
+- 高度：规格的高度
+
+:::note
+重量、长度、宽度、高度用于后续发货相关的业务，如果产品类型为虚拟，则不需要配置。
+:::
+
+除了为单个规格设置上述配置之外，也可以点击上方的批量设置按钮，用于为所有规格设置相同的配置。
+
+
+
+### 分类配置
+
+分类配置用于将产品分类，比如手机、电脑、服装、数码等，支持多级分类。
+
+
+
+### 发布
+
+配置完产品信息之后，就可以将产品状态改为 **发布**，并保存产品，最终就可以在商城前台中展示。
+
+
\ No newline at end of file
diff --git a/docs/user-guide/shop/sales-channels.mdx b/docs/user-guide/shop/sales-channels.mdx
new file mode 100644
index 00000000..f6ad8248
--- /dev/null
+++ b/docs/user-guide/shop/sales-channels.mdx
@@ -0,0 +1,33 @@
+---
+title: 销售渠道
+description: 商城销售渠道相关使用文档。
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+为了区分不同平台（PC 端、小程序等）的支付方式以及后续追踪订单来源，系统提供了销售渠道功能。
+
+:::info
+由于目前商城仅支持 PC 端，暂未支持小程序等平台，所以仅需要创建一个 PC 端销售渠道并绑定所需的支付方式。
+:::
+
+## 创建销售渠道
+
+首先登录到 Halo 控制台，进入 **商店 -> 设置 -> 销售渠道** 页面，点击右上角的新建按钮。
+
+
+
+ 
+
+
+ 
+
+
+
+- 是否启用：勾选
+- 名称：可任意填写
+- 编码：目前商城仅支持 PC 端，所以编码选择 **PC 端商城（MALL_PC）**
+- 支付方式：选择已创建的支付方式，创建方式可参考：[支付方式](./payments.mdx)
+
+到这里，已经完成了支付方式和销售渠道的配置，现在可以正常使用商城功能了。
\ No newline at end of file
diff --git a/docs/user-guide/shop/theme-dev.mdx b/docs/user-guide/shop/theme-dev.mdx
new file mode 100644
index 00000000..e37e1164
--- /dev/null
+++ b/docs/user-guide/shop/theme-dev.mdx
@@ -0,0 +1,11 @@
+---
+title: 商城主题开发
+---
+
+默认情况下，我们已经在 Halo 本身内置了一套默认的商城模板，如果当前主题没有提供对应的模板文件，则会使用内置的模板文件。
+
+如果你需要定制商城页面或者开发一套全新的商城主题，可以参考以下 GitHub 仓库：
+
+- [lxware-dev/shop-templates](https://github.com/lxware-dev/shop-templates)：Halo 商城基础模板与主题适配文档
+- [lxware-dev/theme-shop-starter](https://github.com/lxware-dev/theme-shop-starter)：Halo 商城的基础示例主题
+- [lxware-dev/theme-shop-advanced-starter](https://github.com/lxware-dev/theme-shop-advanced-starter)：Halo 商城的二次开发示例主题
\ No newline at end of file
diff --git a/i18n/zh-Hans/code.json b/i18n/zh-Hans/code.json
index edd10f4d..b45e2d8b 100644
--- a/i18n/zh-Hans/code.json
+++ b/i18n/zh-Hans/code.json
@@ -144,10 +144,6 @@
"message": "标签：",
"description": "The label alongside a tag list"
},
- "theme.AnnouncementBar.closeButtonAriaLabel": {
- "message": "关闭",
- "description": "The ARIA label for close button of announcement bar"
- },
"theme.admonition.caution": {
"message": "警告",
"description": "The default label used for the Caution admonition (:::caution)"
@@ -172,6 +168,10 @@
"message": "注意",
"description": "The default label used for the Warning admonition (:::warning)"
},
+ "theme.AnnouncementBar.closeButtonAriaLabel": {
+ "message": "关闭",
+ "description": "The ARIA label for close button of announcement bar"
+ },
"theme.blog.sidebar.navAriaLabel": {
"message": "最近博文导航",
"description": "The ARIA label for recent posts in the blog sidebar"
@@ -192,6 +192,10 @@
"message": "主导航",
"description": "The ARIA label for the main navigation"
},
+ "theme.navbar.mobileLanguageDropdown.label": {
+ "message": "选择语言",
+ "description": "The label for the mobile language switcher dropdown"
+ },
"theme.NotFound.p1": {
"message": "我们找不到您要找的页面。",
"description": "The first paragraph of the 404 page"
@@ -204,14 +208,6 @@
"message": "本页总览",
"description": "The label used by the button on the collapsible TOC component"
},
- "theme.navbar.mobileLanguageDropdown.label": {
- "message": "选择语言",
- "description": "The label for the mobile language switcher dropdown"
- },
- "theme.blog.post.readingTime.plurals": {
- "message": "阅读需 {readingTime} 分钟",
- "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
- },
"theme.blog.post.readMore": {
"message": "阅读更多",
"description": "The label used in blog post item excerpts to link to full blog posts"
@@ -220,6 +216,10 @@
"message": "阅读 {title} 的全文",
"description": "The ARIA label for the link to full blog posts from excerpts"
},
+ "theme.blog.post.readingTime.plurals": {
+ "message": "阅读需 {readingTime} 分钟",
+ "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+ },
"theme.CodeBlock.wordWrapToggle": {
"message": "切换自动换行",
"description": "The title attribute for toggle word wrapping button of code block lines"
@@ -252,18 +252,14 @@
"message": "主页面",
"description": "The ARIA label for the home page in the breadcrumbs"
},
- "theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
- "message": "切换导航栏",
- "description": "The ARIA label for hamburger menu button of mobile navigation"
- },
- "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": {
- "message": "← 回到主菜单",
- "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
- },
"theme.docs.sidebar.closeSidebarButtonAriaLabel": {
"message": "关闭导航栏",
"description": "The ARIA label for close button of mobile sidebar"
},
+ "theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
+ "message": "切换导航栏",
+ "description": "The ARIA label for hamburger menu button of mobile navigation"
+ },
"theme.navbar.mobileDropdown.collapseButton.expandAriaLabel": {
"message": "Expand the dropdown",
"description": "The ARIA label of the button to expand the mobile dropdown navbar item"
@@ -272,6 +268,10 @@
"message": "Collapse the dropdown",
"description": "The ARIA label of the button to collapse the mobile dropdown navbar item"
},
+ "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": {
+ "message": "← 回到主菜单",
+ "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
+ },
"theme.docs.sidebar.expandButtonTitle": {
"message": "展开侧边栏",
"description": "The ARIA label and title attribute for expand button of doc sidebar"
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/current.json b/i18n/zh-Hans/docusaurus-plugin-content-docs/current.json
index 342e86dd..2507cc73 100644
--- a/i18n/zh-Hans/docusaurus-plugin-content-docs/current.json
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/current.json
@@ -23,6 +23,10 @@
"message": "用户指南",
"description": "The label for category '用户指南' in sidebar 'tutorial'"
},
+ "sidebar.tutorial.category.商城": {
+ "message": "商城",
+ "description": "The label for category '商城' in sidebar 'tutorial'"
+ },
"sidebar.tutorial.category.参与贡献": {
"message": "参与贡献",
"description": "The label for category '参与贡献' in sidebar 'tutorial'"
diff --git a/i18n/zh-Hans/docusaurus-plugin-content-docs/version-2.22.json b/i18n/zh-Hans/docusaurus-plugin-content-docs/version-2.22.json
index 8bf19770..7319b2a9 100644
--- a/i18n/zh-Hans/docusaurus-plugin-content-docs/version-2.22.json
+++ b/i18n/zh-Hans/docusaurus-plugin-content-docs/version-2.22.json
@@ -23,6 +23,10 @@
"message": "用户指南",
"description": "The label for category '用户指南' in sidebar 'tutorial'"
},
+ "sidebar.tutorial.category.商城": {
+ "message": "商城",
+ "description": "The label for category '商城' in sidebar 'tutorial'"
+ },
"sidebar.tutorial.category.参与贡献": {
"message": "参与贡献",
"description": "The label for category '参与贡献' in sidebar 'tutorial'"
diff --git a/sidebars.js b/sidebars.js
index 7a8d1cfd..91da5e2d 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -105,6 +105,22 @@ module.exports = {
"user-guide/users",
"user-guide/settings",
"user-guide/backup",
+ {
+ type: "category",
+ label: "商城",
+ link: {
+ type: "doc",
+ id: "user-guide/shop/index",
+ },
+ items: [
+ "user-guide/shop/prepare",
+ "user-guide/shop/payments",
+ "user-guide/shop/sales-channels",
+ "user-guide/shop/products",
+ "user-guide/shop/orders",
+ "user-guide/shop/theme-dev",
+ ],
+ },
"user-guide/faq",
],
},
diff --git a/static/img/user-guide/shop/preview-console-order-detail.png b/static/img/user-guide/shop/preview-console-order-detail.png
new file mode 100644
index 00000000..8c97a971
Binary files /dev/null and b/static/img/user-guide/shop/preview-console-order-detail.png differ
diff --git a/static/img/user-guide/shop/preview-console-order-modal.png b/static/img/user-guide/shop/preview-console-order-modal.png
new file mode 100644
index 00000000..600cc1d2
Binary files /dev/null and b/static/img/user-guide/shop/preview-console-order-modal.png differ
diff --git a/static/img/user-guide/shop/preview-console-order-request-fulfillment.png b/static/img/user-guide/shop/preview-console-order-request-fulfillment.png
new file mode 100644
index 00000000..0a148228
Binary files /dev/null and b/static/img/user-guide/shop/preview-console-order-request-fulfillment.png differ
diff --git a/static/img/user-guide/shop/preview-console-orders.png b/static/img/user-guide/shop/preview-console-orders.png
new file mode 100644
index 00000000..caa05da8
Binary files /dev/null and b/static/img/user-guide/shop/preview-console-orders.png differ
diff --git a/static/img/user-guide/shop/preview-console-products.png b/static/img/user-guide/shop/preview-console-products.png
new file mode 100644
index 00000000..e0b20dec
Binary files /dev/null and b/static/img/user-guide/shop/preview-console-products.png differ
diff --git a/static/img/user-guide/shop/preview-payments-alipay.png b/static/img/user-guide/shop/preview-payments-alipay.png
new file mode 100644
index 00000000..2e5cd291
Binary files /dev/null and b/static/img/user-guide/shop/preview-payments-alipay.png differ
diff --git a/static/img/user-guide/shop/preview-payments-bank-transfer.png b/static/img/user-guide/shop/preview-payments-bank-transfer.png
new file mode 100644
index 00000000..d9fda434
Binary files /dev/null and b/static/img/user-guide/shop/preview-payments-bank-transfer.png differ
diff --git a/static/img/user-guide/shop/preview-payments-qrcode.png b/static/img/user-guide/shop/preview-payments-qrcode.png
new file mode 100644
index 00000000..59ce8226
Binary files /dev/null and b/static/img/user-guide/shop/preview-payments-qrcode.png differ
diff --git a/static/img/user-guide/shop/preview-payments-wechat.png b/static/img/user-guide/shop/preview-payments-wechat.png
new file mode 100644
index 00000000..7f9d0cc2
Binary files /dev/null and b/static/img/user-guide/shop/preview-payments-wechat.png differ
diff --git a/static/img/user-guide/shop/preview-product.png b/static/img/user-guide/shop/preview-product.png
new file mode 100644
index 00000000..1945ec3c
Binary files /dev/null and b/static/img/user-guide/shop/preview-product.png differ
diff --git a/static/img/user-guide/shop/products-category-create.png b/static/img/user-guide/shop/products-category-create.png
new file mode 100644
index 00000000..3055a20d
Binary files /dev/null and b/static/img/user-guide/shop/products-category-create.png differ
diff --git a/static/img/user-guide/shop/products-category-selector.png b/static/img/user-guide/shop/products-category-selector.png
new file mode 100644
index 00000000..d303e9bb
Binary files /dev/null and b/static/img/user-guide/shop/products-category-selector.png differ
diff --git a/static/img/user-guide/shop/products-create.png b/static/img/user-guide/shop/products-create.png
new file mode 100644
index 00000000..249b12ec
Binary files /dev/null and b/static/img/user-guide/shop/products-create.png differ
diff --git a/static/img/user-guide/shop/products-spec-form.png b/static/img/user-guide/shop/products-spec-form.png
new file mode 100644
index 00000000..e61e158f
Binary files /dev/null and b/static/img/user-guide/shop/products-spec-form.png differ
diff --git a/static/img/user-guide/shop/products-variants-0.png b/static/img/user-guide/shop/products-variants-0.png
new file mode 100644
index 00000000..0dd54af5
Binary files /dev/null and b/static/img/user-guide/shop/products-variants-0.png differ
diff --git a/static/img/user-guide/shop/products-variants-batch.png b/static/img/user-guide/shop/products-variants-batch.png
new file mode 100644
index 00000000..142a2140
Binary files /dev/null and b/static/img/user-guide/shop/products-variants-batch.png differ
diff --git a/static/img/user-guide/shop/products-variants-form.png b/static/img/user-guide/shop/products-variants-form.png
new file mode 100644
index 00000000..dbac8a08
Binary files /dev/null and b/static/img/user-guide/shop/products-variants-form.png differ
diff --git a/static/img/user-guide/shop/products-variants.png b/static/img/user-guide/shop/products-variants.png
new file mode 100644
index 00000000..e1e032aa
Binary files /dev/null and b/static/img/user-guide/shop/products-variants.png differ
diff --git a/static/img/user-guide/shop/settings-payments-alipay-app-detail.png b/static/img/user-guide/shop/settings-payments-alipay-app-detail.png
new file mode 100644
index 00000000..6b4b8922
Binary files /dev/null and b/static/img/user-guide/shop/settings-payments-alipay-app-detail.png differ
diff --git a/static/img/user-guide/shop/settings-payments-alipay-create-app.png b/static/img/user-guide/shop/settings-payments-alipay-create-app.png
new file mode 100644
index 00000000..908e4751
Binary files /dev/null and b/static/img/user-guide/shop/settings-payments-alipay-create-app.png differ
diff --git a/static/img/user-guide/shop/settings-payments-create.png b/static/img/user-guide/shop/settings-payments-create.png
new file mode 100644
index 00000000..055b179b
Binary files /dev/null and b/static/img/user-guide/shop/settings-payments-create.png differ
diff --git a/static/img/user-guide/shop/settings-payments.png b/static/img/user-guide/shop/settings-payments.png
new file mode 100644
index 00000000..bd6c8105
Binary files /dev/null and b/static/img/user-guide/shop/settings-payments.png differ
diff --git a/static/img/user-guide/shop/settings-sales-channels-create.png b/static/img/user-guide/shop/settings-sales-channels-create.png
new file mode 100644
index 00000000..4087f033
Binary files /dev/null and b/static/img/user-guide/shop/settings-sales-channels-create.png differ
diff --git a/static/img/user-guide/shop/settings-sales-channels.png b/static/img/user-guide/shop/settings-sales-channels.png
new file mode 100644
index 00000000..beba68e5
Binary files /dev/null and b/static/img/user-guide/shop/settings-sales-channels.png differ
diff --git a/versioned_docs/version-2.22/user-guide/shop/index.mdx b/versioned_docs/version-2.22/user-guide/shop/index.mdx
new file mode 100644
index 00000000..bd54119f
--- /dev/null
+++ b/versioned_docs/version-2.22/user-guide/shop/index.mdx
@@ -0,0 +1,28 @@
+---
+title: 商城
+description: 商城相关的使用文档。
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+:::note
+限 [Halo 商业版](../../getting-started/prepare.md#发行版本) 可用。
+:::
+
+商城模块是 Halo 商业版的一项功能，支持用户基于 Halo 站点创建店铺，上架多种类型的货品，配置商品支付和发货方式。为实体商品、虚拟商品、链接商品等销售场景提供完备的电商解决方案。
+
+
+
+ 
+
+
+ 
+
+
+
+```mdx-code-block
+import DocCardList from '@theme/DocCardList';
+
+
+```
diff --git a/versioned_docs/version-2.22/user-guide/shop/orders.mdx b/versioned_docs/version-2.22/user-guide/shop/orders.mdx
new file mode 100644
index 00000000..4999f2fb
--- /dev/null
+++ b/versioned_docs/version-2.22/user-guide/shop/orders.mdx
@@ -0,0 +1,27 @@
+---
+title: 订单管理
+description: 商城订单管理相关使用文档。
+---
+
+
+
+## 查看订单详情
+
+我们可以点击订单标题进入订单详情页面，或者点击订单标题右侧的图标按钮预览订单详情。
+
+
+
+
+
+## 发货
+
+收到用户订单之后，可以在订单详情页面的 **发货信息** 区域点击 **发货** 按钮，打开发货界面：
+
+
+
+在这个界面我们需要勾选需要发货的产品以及物流信息，然后点击 **确认发货** 按钮，即可完成发货。
+
+:::info 提示
+1. 目前仅支持填写物流单号等信息，目前没有对接物流查询平台，所以需要用户手动根据物流单号查询物流信息。
+2. 目前仅支持实体物流发货，虚拟产品暂不支持，后续会提供虚拟物品池、付费后下载文件、Webhook、自动发货等功能
+:::
\ No newline at end of file
diff --git a/versioned_docs/version-2.22/user-guide/shop/payments.mdx b/versioned_docs/version-2.22/user-guide/shop/payments.mdx
new file mode 100644
index 00000000..45165b10
--- /dev/null
+++ b/versioned_docs/version-2.22/user-guide/shop/payments.mdx
@@ -0,0 +1,181 @@
+---
+title: 支付方式
+description: 商城支付方式相关使用文档。
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+在正式运营商城之前，我们需要配置至少一个可用的支付方式，目前商城支持的支付方式包括：
+
+- 支付宝
+- 微信支付
+- 银行转账（手动）
+- 收款码支付（手动）
+
+首先登录到 Halo 控制台，进入 **商店 -> 设置 -> 支付方式** 页面，点击右上角的新建按钮。
+
+
+
+ 
+
+
+ 
+
+
+
+:::note
+在配置支付方式之前，建议先创建一个测试产品，方便在配置完成后进行测试。
+:::
+
+## 支付宝
+
+### 创建支付宝应用
+
+支付宝支付使用官方接口，买家交易的资金将直接进入商家的支付宝账户，无第三方平台介入。
+
+在创建支付宝支付方式之前，需要先在支付宝商家平台和支付宝开放平台完成注册。
+
+- [支付宝商家平台](https://b.alipay.com/)
+- [支付宝开放平台](https://open.alipay.com/)
+
+注册完成后，进入支付宝 [开放平台 -> 控制台](https://open.alipay.com/develop/manage)，点击 **创建网页/移动应用** 按钮：
+
+
+
+其中 **应用类型** 选择网页应用，其他参数按照实际情况填写即可。
+
+### 获取支付宝配置信息
+
+创建应用后，进入应用详情页面：
+
+
+
+- 1️⃣：应用 ID
+- 2️⃣：设置接口加签方式
+ - 加签方式选择 **密钥**
+ - 其他流程按照支付宝的指引进行操作
+ - 最后下载 **支付宝公钥证书** 到本地，后续配置时需要
+- 3️⃣：接口内容加密方式，点击 **生成加密方式** 并复制密文
+
+### 在 Halo 中配置
+
+打开新建支付方式的界面，支付提供商选择 **支付宝支付**，并填写以下信息：
+
+- 是否启用：勾选
+- 名称：给用户展示的支付方式名称
+- 场景：选择 **PC 网页支付**
+- 网关地址：`https://openapi.alipay.com`
+- 支付宝账号 ID：进入支付宝开放平台的账户中心，复制 **账号 ID**
+- 应用 ID：上一步中获取的应用 ID
+- 商户私钥：上一步在工具中生成的密钥文件
+- 支付宝公钥：上一步中下载的 `alipayCertPublicKey_RSA2.crt` 文件内容
+- 加密密钥：上一步中生成的加密密钥
+
+配置完成之后，还需要在 [销售渠道](./sales-channels.mdx) 中绑定该支付方式。
+
+支付预览：
+
+
+
+### 沙箱环境
+
+访问 [沙箱应用 - 开放平台](https://open.alipay.com/develop/sandbox/app)，按照页面上的信息在 Halo 中配置即可。
+
+## 微信支付
+
+### 申请微信支付商户号
+
+微信支付使用官方接口，买家交易的资金将直接进入商家的微信支付商户账户，无第三方平台介入。
+
+在配置微信支付之前，需要先在微信支付商户平台申请商户号。
+
+- [微信支付商户平台](https://pay.weixin.qq.com/)
+- [微信支付开发文档](https://pay.weixin.qq.com/doc/v3/merchant/4012791874)
+
+注册并完成商户认证后，进入 [微信支付商户平台](https://pay.weixin.qq.com/)，开通 **Native 支付**。
+
+### 获取微信支付配置信息
+
+登录微信支付商户平台后，需要获取以下配置信息：
+
+#### 获取商户号
+
+进入商户平台的 **账户中心 -> 商户信息**，查看您的微信支付商户号（Mch ID）。
+
+#### 设置 API 密钥
+
+1. 进入 **账户中心 -> API 安全 -> API v3 密钥**
+2. 点击 **设置密钥** 按钮，按照提示设置 API v3 密钥（32 位字符串）
+3. 请妥善保管该密钥，后续在 Halo 中配置时需要使用
+
+#### 申请 API 证书
+
+1. 进入 **账户中心 -> API 安全 -> 验证商户身份 -> 商户 API 证书**
+2. 点击 **申请 API 证书** 或 **管理证书**
+3. 按照页面指引完成操作后，下载证书文件（包含 `apiclient_cert.pem` 和 `apiclient_key.pem`）
+4. 在证书管理页面可以查看到证书序列号，记录下来以便配置
+
+#### 获取微信 AppID
+
+1. 进入 **产品中心 -> AppID 账号管理**
+2. 关联您的微信公众号、小程序或企业微信
+3. 记录下对应的 AppID
+
+### 在 Halo 中配置
+
+打开新建支付方式的界面，支付提供商选择 **微信支付**，并填写以下信息：
+
+- 是否启用：勾选
+- 名称：给用户展示的支付方式名称
+- 场景：选择 **PC 网页支付**
+- 应用 ID：上一步获取的微信 AppID
+- 商户号：上一步获取的商户号（Mch ID）
+- 商户私钥：上一步下载的 `apiclient_key.pem` 文件内容
+- 商户证书序列号：上一步获取的证书序列号
+- API v3 密钥：上一步设置的 API v3 密钥
+
+配置完成之后，还需要在 [销售渠道](./sales-channels.mdx) 中绑定该支付方式。
+
+支付预览：
+
+
+
+## 银行转账
+
+银行转账支付方式不经过 Halo 的支付系统，仅仅是在支付的时候显示商家的银行收款信息，让买家转账到商家的银行账户，后续再通过人工审核的方式确认订单。
+
+打开新建支付方式的界面，支付提供商选择 **银行转账**，并填写以下信息：
+
+- 是否启用：勾选
+- 名称：给用户展示的支付方式名称
+- 场景：选择 **PC 网页支付**
+- 收款银行：银行名称
+- 银行支行地址：开户行地址
+- 收款账户名：收款账户名称
+- 收款账号：收款银行账号
+- 付款说明：为用户说明转账时需要注意的事项
+
+配置完成之后，还需要在 [销售渠道](./sales-channels.mdx) 中绑定该支付方式。
+
+支付预览：
+
+
+
+## 收款码支付
+
+收款码支付方式不经过 Halo 的支付系统，仅仅是在支付的时候显示商家的收款码，让买家扫码支付，后续再通过人工审核的方式确认订单。
+
+打开新建支付方式的界面，支付提供商选择 **收款码支付**，并填写以下信息：
+
+- 是否启用：勾选
+- 名称：给用户展示的支付方式名称
+- 场景：选择 **PC 网页支付**
+- 收款码二维码图片链接
+- 付款说明：为用户说明扫码时需要注意的事项
+
+配置完成之后，还需要在 [销售渠道](./sales-channels.mdx) 中绑定该支付方式。
+
+支付预览：
+
+
\ No newline at end of file
diff --git a/versioned_docs/version-2.22/user-guide/shop/prepare.mdx b/versioned_docs/version-2.22/user-guide/shop/prepare.mdx
new file mode 100644
index 00000000..75ffad34
--- /dev/null
+++ b/versioned_docs/version-2.22/user-guide/shop/prepare.mdx
@@ -0,0 +1,32 @@
+---
+title: 写在前面
+description: 在开始使用商城功能之前，你需要了解的事项
+---
+
+## 前提条件
+
+在开始使用商城功能之前，需要先确定以下条件是否已满足：
+
+- 正常安装 [Halo 商业版](../../getting-started/install/docker-compose.md)
+- 激活 [Halo 商业版许可证](../../user-guide/activate.md)
+- 根据当地法律法规，满足开设网络商店的资质与要求
+- 开通支付平台账户，目前支持：
+ - [支付宝官方接口](https://open.alipay.com/)
+ - [微信支付官方接口](https://pay.weixin.qq.com/)
+
+## 前台路由
+
+目前商城包含以下前台路由：
+
+- `/shop`：商城首页，目前会重定向到商品列表页面
+- `/shop/products`：商品列表页面
+- `/shop/products/:id`：商品详情页面
+- `/shop/cart`：购物车页面
+- `/shop/checkout/:id`：结算页面
+- `/shop/order/:code/payments`：支付页面
+
+:::note
+这些页面无需主题提供对应的模板文件即可访问，使用的是系统内置的模板文件。如果当前激活的主题提供了对应的模板文件，则会优先使用主题提供的模板文件。
+:::
+
+你可以根据需求，将这些页面路径添加到[网站菜单](../menus.md)中。
\ No newline at end of file
diff --git a/versioned_docs/version-2.22/user-guide/shop/products.mdx b/versioned_docs/version-2.22/user-guide/shop/products.mdx
new file mode 100644
index 00000000..df00e3a7
--- /dev/null
+++ b/versioned_docs/version-2.22/user-guide/shop/products.mdx
@@ -0,0 +1,95 @@
+---
+title: 产品管理
+description: 商城产品管理相关使用文档。
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+
+## 创建产品
+
+首先登录到 Halo 控制台，进入 **商店 -> 产品** 页面，点击右上角的新建按钮。
+
+
+
+### 基本信息
+
+- 名称：产品名称
+- 简短描述：产品的简短描述
+- 描述：产品的详细描述，使用富文本编辑器
+- 图片：产品图片，可以直接上传或者从附件库中选择，第一张图片会作为封面图
+
+### 产品数据
+
+这里主要配置产品的类型、属性、规格、价格等数据。
+
+产品类型目前支持三种：
+
+1. 实体：需要配送的产品类型
+2. 虚拟：不需要实体配送，使用线上发货的产品类型
+3. 链接：直接跳转到第三方链接的产品类型
+
+#### 属性配置
+
+属性的作用是为产品添加一些额外的信息，比如颜色、尺寸、型号等，同时也可以用于生成产品规格。
+
+
+
+- 名称：属性名称，比如颜色、尺寸
+- 属性值：支持多个属性值，比如颜色可以有红色、蓝色、绿色等，尺寸可以有小、中、大等，同时也可以为不同的属性值设置图片，用于展示给用户
+- 用于生成产品规格：勾选后，支持在配置产品规格时根据多个属性生成不同的产品规格
+
+#### 规格配置
+
+规格即产品的具体规格，比如颜色为红色、尺寸为小，型号为1234567890，可以根据属性值生成不同的规格，并单独设置价格、库存等信息，最终用户购买时，可以选择属性值来确定购买的产品规格。
+
+:::note
+这里的规格也可以称之为 **变体** 或者 **SKU**。
+:::
+
+
+
+当我们设置好 [属性](#属性配置) 之后，可以点击 **生成规格** 按钮来批量生成所有可能产生的规格。
+
+
+
+然后可以点击具体的规格项，展开规格配置表单：
+
+
+
+- 图片：为规格设置图片，用于在购物车，订单等页面展示，如果不设置，会使用属性值中配置的图片或者产品封面
+- 状态：支持 **草稿**、**已发布**、**已归档** 三种状态
+- SKU 编号：规格的唯一标识
+- 条形码：产品规格的条形码，也可用于表示 GTIN、UPC、EAN 或 ISBN 等
+- 价格：规格的真实价格
+- 划线价：规格的划线价，用于表示原价
+- 管理库存
+ - 否：不管理库存，用户可以无限购买
+ - 是：管理库存，用户购买时，库存会减少
+- 库存：规格的库存数量，当库存为0时，用户无法购买
+- 重量：规格的重量
+- 长度：规格的长度
+- 宽度：规格的宽度
+- 高度：规格的高度
+
+:::note
+重量、长度、宽度、高度用于后续发货相关的业务，如果产品类型为虚拟，则不需要配置。
+:::
+
+除了为单个规格设置上述配置之外，也可以点击上方的批量设置按钮，用于为所有规格设置相同的配置。
+
+
+
+### 分类配置
+
+分类配置用于将产品分类，比如手机、电脑、服装、数码等，支持多级分类。
+
+
+
+### 发布
+
+配置完产品信息之后，就可以将产品状态改为 **发布**，并保存产品，最终就可以在商城前台中展示。
+
+
\ No newline at end of file
diff --git a/versioned_docs/version-2.22/user-guide/shop/sales-channels.mdx b/versioned_docs/version-2.22/user-guide/shop/sales-channels.mdx
new file mode 100644
index 00000000..f6ad8248
--- /dev/null
+++ b/versioned_docs/version-2.22/user-guide/shop/sales-channels.mdx
@@ -0,0 +1,33 @@
+---
+title: 销售渠道
+description: 商城销售渠道相关使用文档。
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+为了区分不同平台（PC 端、小程序等）的支付方式以及后续追踪订单来源，系统提供了销售渠道功能。
+
+:::info
+由于目前商城仅支持 PC 端，暂未支持小程序等平台，所以仅需要创建一个 PC 端销售渠道并绑定所需的支付方式。
+:::
+
+## 创建销售渠道
+
+首先登录到 Halo 控制台，进入 **商店 -> 设置 -> 销售渠道** 页面，点击右上角的新建按钮。
+
+
+
+ 
+
+
+ 
+
+
+
+- 是否启用：勾选
+- 名称：可任意填写
+- 编码：目前商城仅支持 PC 端，所以编码选择 **PC 端商城（MALL_PC）**
+- 支付方式：选择已创建的支付方式，创建方式可参考：[支付方式](./payments.mdx)
+
+到这里，已经完成了支付方式和销售渠道的配置，现在可以正常使用商城功能了。
\ No newline at end of file
diff --git a/versioned_docs/version-2.22/user-guide/shop/theme-dev.mdx b/versioned_docs/version-2.22/user-guide/shop/theme-dev.mdx
new file mode 100644
index 00000000..e37e1164
--- /dev/null
+++ b/versioned_docs/version-2.22/user-guide/shop/theme-dev.mdx
@@ -0,0 +1,11 @@
+---
+title: 商城主题开发
+---
+
+默认情况下，我们已经在 Halo 本身内置了一套默认的商城模板，如果当前主题没有提供对应的模板文件，则会使用内置的模板文件。
+
+如果你需要定制商城页面或者开发一套全新的商城主题，可以参考以下 GitHub 仓库：
+
+- [lxware-dev/shop-templates](https://github.com/lxware-dev/shop-templates)：Halo 商城基础模板与主题适配文档
+- [lxware-dev/theme-shop-starter](https://github.com/lxware-dev/theme-shop-starter)：Halo 商城的基础示例主题
+- [lxware-dev/theme-shop-advanced-starter](https://github.com/lxware-dev/theme-shop-advanced-starter)：Halo 商城的二次开发示例主题
\ No newline at end of file
diff --git a/versioned_sidebars/version-2.22-sidebars.json b/versioned_sidebars/version-2.22-sidebars.json
index 9fc640b4..6a68453c 100644
--- a/versioned_sidebars/version-2.22-sidebars.json
+++ b/versioned_sidebars/version-2.22-sidebars.json
@@ -87,6 +87,22 @@
"user-guide/users",
"user-guide/settings",
"user-guide/backup",
+ {
+ "type": "category",
+ "label": "商城",
+ "link": {
+ "type": "doc",
+ "id": "user-guide/shop/index"
+ },
+ "items": [
+ "user-guide/shop/prepare",
+ "user-guide/shop/payments",
+ "user-guide/shop/sales-channels",
+ "user-guide/shop/products",
+ "user-guide/shop/orders",
+ "user-guide/shop/theme-dev"
+ ]
+ },
"user-guide/faq"
]
},