# 开箱即用的电商，十年之后

> 2015 年 12 月，这段嵌入代码还是一项全新的功能，如今它就是整个产品。本文简短回顾：2015 年的原始代码、2026 年的现代写法，以及究竟变了什么。

Ryan Badger - 2015年12月9日 - 阅读约 2 分钟

## 这篇文章原来写了什么

早在 2015 年 12 月，“开箱即用的电商”（Out of the Box eCommerce）还是一项全新的功能。卖点很简单：把一个 script 标签粘贴到你现有的网站里，商品目录就出现了。当时的嵌入代码是一大段四十个字段的 JSON，从后台复制而来。可配置性很强，但要读的内容*实在太多*。

原来的文章就这么多，那是十年前的事了。

## 变了什么

嵌入代码已经不再只是一项功能，它就是整个产品。Shoprocket 依然是“可以粘贴到任何网站的一段脚本”，但底层架构与 2015 年的代码已经判若两物。变化主要有两大块。

### 代码变短了

2015 年的代码在粘贴时就把每一项视觉偏好都序列化进了 JSON：按钮颜色、内边距、商品排序方式、图片尺寸、是否显示“免运费”标签，还有大约三十个其他开关。如今这一切都放在服务器端，在后台配置一次即可。嵌入代码本身只剩一个标识符。

**过去（2015）：**

```
<script type="application/json">
{"store_id":"1","publishable_key":"1","options":{
  "products_to_display":"categorized",
  "product_size":"medium",
  "image_width":"1126",
  "image_height":"1400",
  "button_style":"standard",
  "product_pagination_limit":"6"
  /* …thirty more fields… */
},"styles":{
  "button_background":"#233642",
  "button_color":"#ffffff"
  /* …and so on… */
}}
</script>
<script async src="https://cdn.shoprocket.io/loader.js"></script>
```

**现在（2026）：**

```
<!-- 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>
```

只有一行。功能不变，默认值更合理，渲染出来的店面直接从服务器读取配置，你再也不用手动去调那三十个开关了。

### 配置搬进了后台

过去，你想自定义的任何内容都写在嵌入代码*里面*，这意味着改嵌入代码就等于改你的网站。现在你只需编辑一次店铺，所有网站上的所有嵌入都会立刻更新。如果你在三个网站上同时销售，品牌色只要改一次。

> **提示：**如果你确实需要按网站单独覆盖（同一家店铺、多种视觉主题），小部件支持用 `data-sr-theme="handle"` 把某个嵌入固定到指定的已保存主题。每个网站用不同的代码片段，背后仍是同一家店铺。

## 如今的嵌入能做什么

- **任何网站。** WordPress、Squarespace、Webflow、Framer、Carrd、Notion、纯 HTML、静态站点。只要能粘贴一个 script 标签，你就能拥有一个店面。
- **任何形态。** 单个购买按钮、商品网格、侧滑购物车，或完整的店面。一段脚本，四种 `data-sr-type` 变体。
- **零交易费。** 采用订阅制（[查看定价](https://v3.shoprocket.io/zh/pricing.md)）；Stripe 和 PayPal 仍会就支付本身收取它们惯常的费用，但 Shoprocket 不会在此之上再抽一分。
- **任何地区语言。** 小部件会自动识别访客的语言（支持 21 种语言），并本地化价格、支付方式和各类标签。

## 唯一没变的一点

当初我们称它为“开箱即用”，是因为粘贴之后立刻就能用。不需要开发者，不需要定制主题，也不需要重建你现有的网站。十年过去，这一点依然成立，只不过现在证明它所需的字符更少了。

如果你还没试过当前版本，[开始免费试用](https://app-v3.shoprocket.io/signup)吧。设置不到五分钟。

---

- HTML version: https://v3.shoprocket.io/zh/blog/out-of-the-box-ecommerce-a-decade-later
- Language: 中文 (zh)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/out-of-the-box-ecommerce-a-decade-later.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-out-of-the-box-ein-jahrzehnt-spaeter.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/out-of-the-box-ecommerce-a-decade-later.md), [English](https://v3.shoprocket.io/blog/out-of-the-box-ecommerce-a-decade-later.md), [Español](https://v3.shoprocket.io/es/blog/ecommerce-listo-para-usar-una-decada-despues.md), [Français](https://v3.shoprocket.io/fr/blog/ecommerce-cle-en-main-dix-ans-apres.md), [עברית](https://v3.shoprocket.io/he/blog/out-of-the-box-ecommerce-a-decade-later.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/out-of-the-box-ecommerce-a-decade-later.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/ecommerce-siap-pakai-satu-dekade-kemudian.md), [Italiano](https://v3.shoprocket.io/it/blog/ecommerce-pronto-all-uso-dieci-anni-dopo.md), [日本語](https://v3.shoprocket.io/ja/blog/out-of-the-box-ecommerce-a-decade-later.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/e-komercija-is-dezes-po-desimtmecio.md), [Norsk](https://v3.shoprocket.io/nb/blogg/nettbutikk-ut-av-boksen-ti-ar-etter.md), [Nederlands](https://v3.shoprocket.io/nl/blog/out-of-the-box-ecommerce-tien-jaar-later.md), [Polski](https://v3.shoprocket.io/pl/blog/ecommerce-z-pudelka-dekade-pozniej.md), [Português](https://v3.shoprocket.io/pt/blog/ecommerce-pronto-para-usar-uma-decada-depois.md), [Română](https://v3.shoprocket.io/ro/blog/ecommerce-gata-de-utilizare-un-deceniu-mai-tarziu.md), [Русский](https://v3.shoprocket.io/ru/blog/out-of-the-box-ecommerce-a-decade-later.md), [ไทย](https://v3.shoprocket.io/th/blog/out-of-the-box-ecommerce-a-decade-later.md), [Türkçe](https://v3.shoprocket.io/tr/blog/hazir-kutudan-eticaret-on-yil-sonra.md)