# 为你现有的网站添加电商功能。 > 一个异步脚本标签，就能把任何网站变成商店。适用于 WordPress、Webflow、Ghost、Carrd、Framer、静态 HTML、React / Next.js / Vue。无需重建，无需插件，无需换主题。 一个异步脚本标签，加上几个 HTML 容器，你现有的网站就成了商店。适用于 WordPress、Webflow、Ghost、Carrd、Framer、纯 HTML，或任何允许粘贴脚本标签的 CMS。无需重建。无需插件。无需换主题。 [开始免费试用](https://app-v3.shoprocket.io/signup?lang=zh)[查看代码片段](#the-snippet) 14 天免费试用 无需信用卡 0% 平台费 任何套餐都可用 1 行代码即可嵌入 任意 网站 完整 购物车与结账 0% 平台费 ● 痛点 ## 你有一个网站。你想在上面销售，而不是重建它。 大多数电商平台都想让你用它们的网站换掉现在的。WordPress 让你用 WooCommerce。Wix 要你用 Wix Stores。Squarespace 要你用 Squarespace Commerce。Shopify 要你整个搬到它的技术栈上。你想要的是一个商店，而不是一个迁移项目。 01 ### 你的网站本来就运转良好。 你的品牌、内容、博客、动画、SEO。这些是你已经完成的工作。为了加一个结账功能，其中任何一样都不该改动。 02 ### 问题不在你的 CMS。 WordPress 没问题。Webflow 很漂亮。Ghost 非常适合内容。Carrd 很快。它们都不该因为原生不支持电商就逼你离开。 03 ### 你的商店应该就在你的网站里。 不是在单独的子域名上，也不是跳转到托管的购物车。商品页是你的，结账就在其中发生，顾客从不离开。 ● 运作方式 ## 三行 HTML。四种组件类型。 粘贴一次加载脚本。把 HTML 容器放在你想显示电商功能的位置。渲染时，组件会自动挂载找到的每一个容器。 安装 ### 一个脚本标签。异步。不阻塞。 脚本标签放在网站的 head 里，或紧挨在结束 body 标签之前，或放进 CMS 的页头模板。它异步加载，所以绝不会阻塞页面渲染。加载后，它会扫描页面上带有 data-shoprocket 属性的所有 HTML 元素，并在那里挂载对应的组件。如果页面上没有任何组件元素，它仍会启动悬浮购物车，让你网站其他位置的购买按钮继续可用。 - ✓ 异步加载，不影响 LCP 或 CLS - ✓ 自动挂载页面上每个 data-shoprocket 元素 - ✓ 即使页面上没有组件，悬浮购物车也会在全站启动 ● 组件类型 ## 四种形态，可以放在同一个页面。 在需要的地方选用需要的那种。首页可以有精选商品组件，专门的商店页可以有完整的商品目录，文章里可以内嵌单个商品。全部在同一个网站上，全部来自同一个店铺。 01 ### 商品目录。 带筛选、分类和搜索的完整商品网格。放在你的 /shop 页面上，顾客就能浏览你的整个店铺。 02 ### 商品。 单个商品卡片，含价格、规格和加入购物车按钮。可以内嵌在文章里，或放在落地页的推荐文案旁边。 03 ### 购物车。 购物车本身，作为页面组件。或者交给悬浮购物车在全站处理，脚本会自动启动它。 04 ### 结账。 购物车、地址、配送和订单摘要全部在你的页面内完成。最后的付款步骤会为符合 PCI 而跳转到处理商，并把顾客送回你的网站。 ● 在你所在的地方运行 ## 只要允许脚本标签，Shoprocket 就能嵌入。 以下建站工具经过专门测试并有文档。实际上，任何能粘贴 HTML 的地方都行。 01 ### WordPress。 自托管或 WordPress.com。任何主题，任何页面构建器（Elementor、Gutenberg、Divi 等）。无需 WooCommerce。无需维护插件。 02 ### Webflow。 在想放置商店的位置使用 Embed 元素。保留你的 Webflow CMS 套餐，无需升级 Ecommerce。 03 ### Ghost。 在任何文章或页面里使用 HTML 卡片。Ghost 非常适合边发内容边卖商品的创作者。 04 ### Carrd、Framer、Notion。 单页和设计优先的建站工具。适用于 Carrd Pro 的 Standard 嵌入、Framer 代码组件，以及通过 Super.so / HeyNotion 封装的 Notion。 05 ### 静态 HTML 与 JAMstack。 Cloudflare Pages、Netlify、Vercel、纯静态 HTML，以及任何 Jekyll / Hugo / Astro / 11ty 构建。粘贴代码片段即可上线。 06 ### React、Next.js、Vue、Svelte。 安装 npm 包 \`@shoprocket/widget\`，与框架紧密集成。导入组件，挂载到你想放置商店的位置。 ● 性能 ## 你的 Core Web Vitals 依然保持绿色。 随处嵌入的电商的全部意义，就在于你的网站依旧表现得像你的网站。 用数字说话 ### 异步脚本、缓存的配置、快速挂载。 加载脚本以异步方式交付，所以 LCP 不受影响。店铺配置从我们的 API 获取并缓存在边缘（TTL 为 1 小时），所以重复浏览页面不会重新查询。组件渲染到预留的容器中，所以不会产生布局偏移。嵌入前 Lighthouse 为绿色的网站，嵌入后依然是绿色。 - ✓ 异步脚本标签：对 LCP 或 CLS 零影响 - ✓ 店铺配置缓存在边缘，重复访问时由 CDN 提供 - ✓ 预留的挂载容器意味着没有累积布局偏移 ● 常见问题 ## 关于嵌入的解答。 人们在粘贴代码片段之前常问的问题。 购物车和结账实际在哪里运行？ + 购物车、地址和配送选择都在你页面上的嵌入组件内运行，在浏览和选择阶段，没有人需要离开你的网站。最后的付款步骤会为符合 PCI 而跳转到你所连接的支付处理商（Stripe、PayPal），然后让顾客回到你的网站查看订单确认。所有现代支付流程都是这样运作的；假装不是这样才是不诚实。 同一个页面上可以放多个组件吗？ + 可以。加载脚本会扫描页面上每个带有 data-shoprocket 属性的元素，并逐个挂载。一个页面可以有精选商品轮播、下方的商品目录网格，以及别处的内嵌结账。全部来自同一个店铺。 会拖慢我的网站吗？ + 没有明显影响。加载脚本是异步的，不会阻塞页面渲染。店铺配置缓存在边缘，所以回访用户不会重新查询。组件挂载到预留的容器中，所以没有累积布局偏移。如果你的网站嵌入前通过了 Core Web Vitals，嵌入后依然通过。 如果我用 React / Next.js / Vue 呢？ + 直接安装 npm 包 \`@shoprocket/widget\`。导入组件，挂载到需要商店的位置，通过 props 进行配置。能提供脚本标签嵌入所不具备的精细控制。 Wix 和 Squarespace 呢？ + Squarespace 没问题。在 Core 套餐或更高套餐上使用代码块元素，粘贴代码片段即可。Wix 会把每个第三方嵌入都沙盒化在 iframe 里，这会破坏结账，所以我们不推荐；对 Wix 用户，坦率的答案是使用 Shoprocket 托管店铺，或改用允许真正嵌入的建站工具。请查看我们专门的 Wix 页面，了解三条出路。 可以用我自己的域名吗？ + 可以。组件会在宿主页面所在的任何域名上运行。你的商品、购物车和结账全都在 your-site.com 上。没有单独的 Shoprocket 子域名，没有跳转。顾客不会察觉电商层背后有第三方。 如何自定义组件的外观？ + 组件会继承你网站的 CSS 作为布局上下文（容器宽度、排版基线）。至于电商界面本身，可以通过挂载元素上的 data 属性，从 40 多种主题以及浅色 / 深色配色方案中选择。需要更深度的自定义时，在网站样式表中设置 CSS 变量，组件会自动采用。 如果不同页面需要不同的嵌入配置呢？ + 在 Shoprocket 后台创建多个嵌入配置，每个都有自己的 ID、主题和功能集。让每个 HTML 容器指向相应的嵌入 ID。首页可以显示精简的精选商品嵌入，而专门的商店页使用完整的商品目录嵌入，全部在同一个店铺上。 Shoprocket 真的是 0% 平台费吗？ + 是的。你的支付处理商（Stripe、PayPal 等）仍会收取标准的处理费，那是转移资金的成本，但 Shoprocket 不会在此之上再加任何费用。0% 平台费适用于所有套餐，包括每一个随处嵌入的安装。 ## 你的网站。现在有了电商功能。 14 天免费试用，无需信用卡。粘贴代码片段，上线商店，保留你的网站。 [开始免费试用](https://app-v3.shoprocket.io/signup?lang=zh)[联系我们](https://v3.shoprocket.io/zh/contact.md) --- - HTML version: https://v3.shoprocket.io/zh/features/sell-on-any-website - Language: 中文 (zh) - Also in: [العربية](https://v3.shoprocket.io/ar/features/sell-on-any-website.md), [Deutsch](https://v3.shoprocket.io/de/funktionen/auf-jeder-website-verkaufen.md), [Ελληνικά](https://v3.shoprocket.io/el/features/sell-on-any-website.md), [English](https://v3.shoprocket.io/features/sell-on-any-website.md), [Español](https://v3.shoprocket.io/es/funciones/vender-en-cualquier-sitio-web.md), [Français](https://v3.shoprocket.io/fr/fonctionnalites/vendre-sur-nimporte-quel-site.md), [עברית](https://v3.shoprocket.io/he/features/sell-on-any-website.md), [हिन्दी](https://v3.shoprocket.io/hi/features/sell-on-any-website.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/fitur/jual-di-situs-web-mana-pun.md), [Italiano](https://v3.shoprocket.io/it/funzionalita/vendere-su-qualsiasi-sito-web.md), [日本語](https://v3.shoprocket.io/ja/features/sell-on-any-website.md), [Lietuvių](https://v3.shoprocket.io/lt/funkcijos/pardavimas-bet-kurioje-svetaineje.md), [Norsk](https://v3.shoprocket.io/nb/funksjoner/selg-pa-hvilken-som-helst-nettside.md), [Nederlands](https://v3.shoprocket.io/nl/functies/verkopen-op-elke-website.md), [Polski](https://v3.shoprocket.io/pl/funkcje/sprzedaz-na-kazdej-stronie.md), [Português](https://v3.shoprocket.io/pt/funcionalidades/vender-em-qualquer-site.md), [Română](https://v3.shoprocket.io/ro/functionalitati/vinde-pe-orice-site.md), [Русский](https://v3.shoprocket.io/ru/features/sell-on-any-website.md), [ไทย](https://v3.shoprocket.io/th/features/sell-on-any-website.md), [Türkçe](https://v3.shoprocket.io/tr/ozellikler/her-web-sitesinde-satis.md)