第20章 将 Shopify 商店接入 v0

将 Shopify 商店接入 v0，构建能够读取实时商品、价格和库存的前端。Shopify 集成让你能在 v0 中搭建由真实 Shopify 商店支撑的在线商城。当你描述一个电商应用时，v0 会连接你的 Shopify 商店，在 Shopify 中创建商品及其图片，并生成一个前端应用，通过 Shopify Storefront API 实时读取这些数据。

由于前端是你生成的完整应用，它并不局限于标准商品网格布局。你可以基于真实商品目录构建任何购物体验。有人已经打造过各种应用，从一款生产级的运动鞋商店，到一个像游戏一样玩耍的前端——你四处走动、走进店铺、购买真实商品。

v0 如何使用 Shopify 构建应用 连接 Shopify 后，v0 总是生成由你的 Shopify 商品目录支撑的前端应用。前端应用是主要交付物，v0 会将它与你的商店进行端到端集成：

商品保存在 Shopify 中，而非你的代码里。v0 通过 Shopify Admin API 创建商品，并将它们添加到 Vercel Storefront 销售渠道。它绝不会将商品名称、价格或描述硬编码到应用中。 商品图片由 v0 生成并上传至 Shopify。v0 为每个商品生成图片，并将其存储在 Shopify 的商品对象中，确保你的商品目录始终是唯一的真实数据源。 前端应用在运行时读取商品。生成的应用会在渲染时从 Shopify Storefront API 获取商品，因此当商品发生变更时，应用始终与你的 Shopify 商品目录保持同步。

开始构建商店 当你的提示词描述了一个在线商店时，v0 会自动安装 Shopify 集成。诸如“构建一个前端”、“构建一个在线商店”或“在线销售商品”等短语都会触发此功能。 构建一个销售手工陶瓷杯的在线商店。创建几个带有价格和图片的商品。 v0 会创建一个 Shopify 开发商店，在其中创建你的商品，并将其连接到你的项目，以便前端应用能够读取商品目录。你无需在 Shopify 中进行任何配置，即可立即开始构建。 Shopify AI 工具包 v0 通过 Shopify AI 工具包与你的商店交互，该工具包使用了两个 Shopify API：

Admin API 用于管理商店，包括创建商品、上传商品图片和管理商品集合。 Storefront API 用于在前端应用中读取商品目录并执行购物车和结账流程。

你通过提示词与工具包交互。让 v0 添加或修改商品，它会直接在 Shopify 中执行更改，并更新前端应用以保持一致。 以付费商店正式上线 默认情况下，你的应用使用的是 Shopify 开发商店。开发商店用于构建和测试，在认领商店并选择 Shopify 套餐之前，无法接收真实订单。

当你发布一个连接了未认领开发商店的应用时，v0 会在发布流程中添加一个“商业模式”步骤。若要启用真实订单和支付：

发布你的应用。当应用使用开发商店时，发布流程会显示“商业模式”步骤。 在“Shopify 开发模式”下，选择“认领商店”。这会在新标签页中打开 Shopify。 在 Shopify 中完成认领操作并选择一个套餐。

你也可以选择“继续”发布，同时保留开发商店。在认领商店之前，已发布的应用将继续使用开发商店，无法接收真实订单。 连接你的 Shopify 账户 认领商店后，v0 通过 Admin API 代表你执行的操作（如管理和订单）需要你授权自己的 Shopify 账户。当需要此授权时，v0 会在聊天界面中显示一个“连接 Shopify”卡片。 选择“连接 Shopify 账户”并完成 Shopify 授权。连接成功后，v0 将继续执行该步骤。 如果 v0 要求你连接 Shopify 账户，请使用内联的“连接 Shopify 账户”按钮。你无需打开设置、断开并重连、开始新聊天或联系支持团队。 最佳实践

描述商店及其商品。既然 v0 会在 Shopify 中为你创建商品，请告诉它你在销售什么，而不是粘贴占位数据。 让 v0 接管商品目录。要求 v0 添加或编辑商品，而不是将它们硬编码到应用中，这样前端应用和你的 Shopify 商店才能保持同步。 同时迭代前端应用和商品目录。你可以在同一个聊天中修改商品详情、添加商品集合以及调整前端布局。

示例提示词： 向商店添加三个新商品，每个都配有图片和简短描述。 重新生成陶瓷杯的图片，使其看起来更极简、更具影棚光效。 创建一个“精选”商品集合并将其展示在首页。 故障排除 v0 要求我连接 Shopify 账户 对于已认领的商店，这是预期行为。某些 Admin API 操作需要针对每个用户的授权。选择内联卡片上的“连接 Shopify 账户”并完成 Shopify 授权，然后让 v0 重试该步骤。 我的前端应用没有显示商品 前端应用在运行时从 Shopify 读取商品，因此它只显示商店中存在且已发布到 Vercel Storefront 销售渠道的商品。要求 v0 创建商品，或在 Shopify 管理后台中确认这些商品已发布到该销售渠道。 结账页面显示“需要密码” Shopify 开发商店受密码保护。v0 构建的结账链接会打开在线商店的结账页面，因此在商店仍受保护时，结账功能可以正常工作。如果你在结账时看到“需要密码”页面，请要求 v0 重新构建结账链接，使其打开在线商店的结账页面。 环境变量 当 v0 连接商店时，它会在你的项目中设置以下环境变量。你无需配置这些变量，v0 会替你管理它们。

变量 描述 SHOPIFY_STORE_DOMAIN 所连接的 Shopify 商店的主机名。 SHOPIFY_STOREFRONT_ACCESS_TOKEN 应用用于在运行时读取商品的 Storefront API 访问令牌。

Storefront 访问令牌的作用范围限于公共前端读取。v0 在处理生成过程时负责 Admin API 操作（创建商品、上传图片、管理商品集合），因此请将管理员凭证排除在客户端代码之外。 上一篇 Snowflake 下一篇 外部 API