# 如何为任何网站添加电商功能（无需更换平台）

> 为已有网站添加商业功能的三种集成方式。各自适合什么情况，网站上会发生什么变化，以及什么时候才真正值得更换平台。

Ryan Badger - 2023年6月2日 - 阅读约 4 分钟

## 人们说“集成电商”，到底指什么

你有一个网站。可能是营销网站、作品集、博客，也可能是用 Webflow 或 Squarespace 搭的。它运转良好，在视觉上也符合你的想法。但现在，你需要通过它卖东西。

错误的做法，是把它扔掉，在 Shopify 上重建。正确的做法取决于三件事：

1. **你卖什么。** 一件商品还是一整个目录？实体还是数字？订阅还是一次性？
2. **你的网站运行在什么上面。** 只要能粘贴一段脚本标签，选择就很多。
3. **你想掌控多少结账体验。**

这篇文章会针对这几个维度，讲清楚 2026 年“集成”实际是什么样子。只要选对，就不需要更换平台。

## 三种真正的集成方式

### 方式 1：跳转到托管结账页

最简单。你的网站上有购买按钮。点击按钮，顾客就离开你的网站，进入结账页（Stripe 付款链接、Gumroad、Payhip、Lemonsqueezy）。付款在它们的域名上完成，之后顾客回到你的感谢页面。

**优点：**零 JS 集成，真的适用于任何网站，维护成本低。 **缺点：**体验断裂（离开你的网站）会损害转化。品牌形象不一致。弃单挽回流程和数据分析变得更困难。

适合：单个商品的创作者、低销量、对嵌入任何东西在技术上有抵触的人。

### 方式 2：在页面内嵌入组件

嵌入的组件运行在你的网站内部。顾客始终不会离开。购物车、商品详情、结账全部在你的页面里渲染。

这是 Shoprocket、Snipcart、Ecwid 等类似平台提供的方式。

典型的集成：

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

一行代码，粘贴一次，搞定。组件会自动与你的后台同步：商品、价格、图片、税费规则、配送选项、支付方式。顾客从“浏览”到“感谢您的订单”，全程留在你的域名上。

**优点：**体验一致，品牌可控，转化流失更少。 **缺点：**你的网站现在多了一个 JS 依赖。大多数都很轻量（约 20-50KB），但不是零。

适合：任何想要一个真正的商店、又不想更换平台的网站。

### 方式 3：无头（API）集成

你自己构建界面，并调用电商 API（Stripe API、Shopify Storefront API、BigCommerce、Commercetools）来处理电商的底层机制。完全定制，完全属于你。

**优点：**完全掌控，没有视觉上的妥协，可扩展到自定义流程。 **缺点：**是真正的工程工作。你要自己构建结账、购物车状态、税费计算、库存同步、Webhook。需要的是几个月的时间，而不是几分钟。

适合：有专职开发人员全职负责电商的团队，或者预制组件放不下的产品。

## 决策树

先从“你是否希望顾客离开你的网站”开始：

- **是**：方式 1（托管结账链接）。Stripe 付款链接或 Gumroad，10 分钟就能设置好。
- **否**：进入下一个问题。

你想自己写定制代码吗？

- **想，我们有开发人手**：方式 3（无头）。
- **不想，我们要现成的**：方式 2（嵌入组件）。大多数网站最终落在这里。

对于方式 2，下一个决定是选哪个平台。这在我们另一篇文章里讲了：[可嵌入购物车平台对比](https://v3.shoprocket.io/zh/blog/embeddable-shopping-cart-platforms-compared-snipcart-ecwid-gumroad-payhip-shoprocket.md)。

## 在常见平台上，方式 2 的真实集成是什么样

### WordPress

把嵌入代码放进自定义 HTML 区块（区块编辑器）或文本小工具（经典侧边栏）。不需要安装插件。

### Squarespace

在任何页面上添加一个代码区块。粘贴。组件会遵循你的 Squarespace 主题的宽度和间距。

### Webflow

嵌入元素 → 粘贴。Webflow 的静态导出在发布时仍会包含这个嵌入。

### Framer

嵌入元素 → 粘贴。Framer 的开发者工具让你很容易把代码放到某个特定板块。

### Carrd

自定义代码组件（付费套餐功能）。单页网站加一个商店标签页，很简单。

### Notion

把一个公开的 Notion 页面当作你的网站，通过 Super 或 Potion 这类服务嵌入，再粘贴代码。就变成了一个真正的商店。

### 静态 HTML / Jekyll / Hugo / 11ty

把代码粘贴到渲染你商店页面的那个模板里。仅此而已。

## 集成之后，你的网站会有什么变化

比你想象的要少。

- 你现有的页面保持原样。不需要修改主题。
- 脚本异步加载，所以页面速度几乎不受影响（Lighthouse 分数保持稳定）。
- 商品、价格和库存都存放在你的电商后台里，而不是你的 CMS 里。
- 顾客数据（订单、邮箱、地址）流向电商平台。你的 CMS 不需要处理其中任何一项。

你不需要做的事：

- 重建你的网站
- 安装 CMS 插件
- 迁移内容
- 雇用开发人员
- 购买新域名

> **提示：**先在一个测试页面上试用这个组件。它不应该与任何东西冲突，但在推送到正式的商店页面之前，针对你的具体主题验证一下是值得的。

## 什么时候才真正该更换平台

有时候，答案确实是“迁移到完整的电商平台”。迹象包括：

- 你的月销售额达到 $100k 以上，而且你的网站的核心任务已经变成销售，而不是品牌展示。
- 你有 POS 集成需求（实体零售 + 线上）。
- 你的商品目录超过 1,000 个 SKU，并且不断更新。

到了这个规模，Shopify Plus 或类似产品就开始物有所值。对于低于这一门槛的大多数独立网站，嵌入更便宜、更快，而且保留你已有的网站。

## 太长不看

- **托管结账链接**：最快，但在付款环节会打断体验。适合单个商品。
- **嵌入组件**：让顾客留在你的网站上，无需更换平台。很好的默认选择。
- **无头 API**：自己动手构建，需要几个月的工作。只有规模大了才值得。

[在你现有的网站上试试 Shoprocket 的嵌入](https://app-v3.shoprocket.io/signup)。免费试用，无需绑卡。价格：[$29 起](https://v3.shoprocket.io/zh/pricing.md)，所有套餐零交易手续费。

---

- HTML version: https://v3.shoprocket.io/zh/blog/how-to-add-ecommerce-to-any-website-without-replatforming
- Language: 中文 (zh)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-zu-jeder-website-hinzufuegen-ohne-plattformwechsel.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [English](https://v3.shoprocket.io/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Español](https://v3.shoprocket.io/es/blog/anadir-ecommerce-a-cualquier-web-sin-cambiar-de-plataforma.md), [Français](https://v3.shoprocket.io/fr/blog/ajouter-ecommerce-a-un-site-sans-changer-de-plateforme.md), [עברית](https://v3.shoprocket.io/he/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/cara-menambahkan-ecommerce-ke-situs-web-mana-pun-tanpa-ganti-platform.md), [Italiano](https://v3.shoprocket.io/it/blog/aggiungere-ecommerce-a-qualsiasi-sito-senza-cambiare-piattaforma.md), [日本語](https://v3.shoprocket.io/ja/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/kaip-prideti-el-prekyba-prie-bet-kurios-svetaines-nekeiciant-platformos.md), [Norsk](https://v3.shoprocket.io/nb/blogg/legg-nettbutikk-til-et-hvilket-som-helst-nettsted-uten-a-bytte-plattform.md), [Nederlands](https://v3.shoprocket.io/nl/blog/webshop-toevoegen-aan-elke-website-zonder-te-verhuizen.md), [Polski](https://v3.shoprocket.io/pl/blog/jak-dodac-e-commerce-do-dowolnej-strony-bez-zmiany-platformy.md), [Português](https://v3.shoprocket.io/pt/blog/como-adicionar-ecommerce-a-qualquer-site-sem-trocar-de-plataforma.md), [Română](https://v3.shoprocket.io/ro/blog/cum-adaugi-ecommerce-pe-orice-site-fara-sa-schimbi-platforma.md), [Русский](https://v3.shoprocket.io/ru/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [ไทย](https://v3.shoprocket.io/th/blog/how-to-add-ecommerce-to-any-website-without-replatforming.md), [Türkçe](https://v3.shoprocket.io/tr/blog/platform-degistirmeden-web-sitesine-eticaret-ekleme.md)