Vercel and Shopify make agents first-class shoppers

Vercel 和 Shopify 让代理成为一流的购物者 - Vercel

代理已经在网络上购物，但通常使用最初为人类和搜索引擎设计的页面和工具。为代理打造更好的购物体验，意味着将他们视为一流的购物者，提供可以直接阅读的产品信息，以及专为代理设计的购物工具。

今天，Vercel Shop（我们为 Shopify 开发的开源 Next.js 商店模板）已正式发布。团队可以启动针对人类、搜索引擎和代理交互方式优化的商店前端。

Shopify 首席执行官 Tobi Lütke 和 Vercel 首席执行官 Guillermo Rauch 在 Vercel Ship SF 上讨论了代理电商的未来。

Vercel Shop 基于 Shopify 的 Hydrogen SDK 构建。该 SDK 为团队提供访问商店产品目录、购物车和订单管理、支付及结账功能的接口，用于构建自定义商店前端。今年早些时候，Vercel 和 Shopify 宣布计划重建 Hydrogen 以支持跨 JavaScript 框架。今天，重建后的 SDK 已正式发布。

“结账功能实现起来极其困难。这是一款需要经过 20 年反复打磨的软件。Shopify 一直非常开放，因此我们邀请人们像您想要的那样，随意重混我们的结账功能模块。基本上，您可以使用 Shopify 构建的所有基础设施，打造您想要的任何功能。” Shopify 联合创始人兼首席执行官（CEO）Tobias Lütke

复制链接到标题：为代理提供所需的信息和工具

Vercel Shop 将产品页面作为机器可读内容提供，包括价格、库存情况和选项。相同的商品 URL 可以为人类提供可视化页面，或为代理提供无需解析页面布局即可直接读取的商品信息。该模板还包含嵌入在页面和站点地图中的结构化数据，帮助搜索和问答引擎发现并理解商品。

$?

/$

Shopify 与 Vercel 共同开发了通用电商协议（Universal Commerce Protocol，简称 UCP），为代理提供了一种标准方式来搜索商店目录、阅读产品详情、检查库存、构建购物车并获取结账链接。Vercel Shop 使这些功能在商家自有域名下可被发现，因此代理可以使用 UCP 搜索商品并构建购物车，而无需浏览网站。

复制链接到标题：为所有客户定制体验

Vercel Shop 将商店的产品目录、购物车和结账功能与 Next.js 商店前端、代理可用的产品信息和购物工具，以及由 eve 驱动的购物助手整合在一起。商店前端和助手位于同一代码库中，因此团队可以自定义商店设计以及助手如何帮助购物者。

模板中的技能指南帮助编码代理完成设置、定制和模板更新。团队可以创建一种体验，让购物者浏览产品页面或要求助手查找产品并将其添加到购物车。两者共享同一个购物车，因此购物者在不同体验之间切换时不会丢失已添加的商品。

“您可以使用 Vercel Shop 构建高度定制化、设计精良且适合代理的体验。它基于 Next.js，构建于 Shopify 之上，而且速度非常快。” Vercel 创始人兼首席执行官 Guillermo Rauch

复制链接到标题：使用 Shopify 和 Vercel 构建的商店前端

今天，我们在 vercel.store 上推出了我们的商品店，带来限量版商品发布。该商店基于 Vercel Shop 构建。商店的购物助手可帮助购物者查找商品、将其加入购物车并继续结账。

Vercel Store 产品页面展示了一款黑色 VRC 车衣夹克，提供尺寸选项，并附有购买或加入购物车的按钮。

Shopify、Next.js 和 Vercel 已为包括 AG1、Bombas 和 PAIGE 在内的品牌提供商店解决方案。当 PAIGE 重新架构其电商平台时，黑色星期五和网络星期一期间其收入增长了 22%，转化率提升了 76%，且没有出现任何停机时间。

复制链接到标题 立即使用 Vercel Shop

创建商店：

pnpm
create next-app@latest my-store
--example
https://github.com/vercel/shop

立即使用 Vercel Shop。查看文档以连接您的 Shopify 商店并配置商店前端。