使用动态嵌入，您可以使用嵌入的Shopify小部件将产品从您的Sh欧宝体育在线首页opify帐户添加到您的Webflow站点。这可以让你创建一个自定义的电子商务商店，而不依赖于预先构建的Shopify模板。

在本文中，我们将向您展示两个示例:一个在Collection List中演示此功能，另一个在Collection Page(即产品详细信息页面)中使用此功能。欧宝体育在线首页

1. 创建一个Shopify帐户
2. 在Webflow中为你的产品创建一个集合欧宝体育在线首页
3. 从Shopify添欧宝体育在线首页加您的产品
4. 将嵌入组件添加到集合列表或集合页
5. 从Shopify获取嵌入代码
6. 替换唯一id

创建一个Shopify帐户

为了在你的网站上设置这个，你需要一个Shopify账户还有几件商品要卖。一旦你完成了这些，你就可以准备第二步了。

在Webflow中为你的产品创建一个集合欧宝体育在线首页

接下来，您需要创建一个Webflow Collection来保存您的产品。欧宝体育在线首页

在这个例子中，我创建了一个名为Products的集合，包含以下字段:欧宝体育在线首页

• 价格(数字字段)
• 简要描述(富文本字段)
• 长描述(富文本域)
• 缩略图(图像)
• *欧宝体育在线首页产品ID(纯文本字段)
• *欧宝体育在线首页产品组件(纯文本字段)

*唯一标识符

产品ID欧宝体育在线首页和产品组件作为Shopify产品的“唯一标识符”，确保Webflow为每个收集项拉入正确的产品。我们将在后面的步骤中介绍如何查找产品ID和产品句柄。欧宝体育在线首页

从Shopify添欧宝体育在线首页加您的产品

对于这一步，只需将您的产品添加到刚刚在第2步中创建的Colle欧宝体育在线首页ction中，使用下面的说明为每个项目找到Product Handle和Product Component。

获取产品ID和产欧宝体育在线首页品句柄

名称、产品ID和产品欧宝体育在线首页句柄作为每个产品的唯一标识符。您将从Shopify中为每个项目生成的嵌入代码中提取它们。

下面是如何在Shopify中生成嵌入代码:

1. 点击购买按钮在主仪表板的左侧导航中
2. 点击创建一个购买按钮在右上方
3. 选择产品欧宝体育在线首页
4. 点击生成嵌入代码(在本例中，我们将使用只有购买按钮选项)

您将在嵌入代码中找到名称、产品ID和产品句柄欧宝体育在线首页(下面的截图)。只需从代码中复制这些值，并将它们粘贴到步骤2中创建的相应字段中。

• 欧宝体育在线首页产品组件:抓取“product-component-”后面的数字和字母字符串欧宝体育在线首页在这里可以找到组件
• 欧宝体育在线首页产品ID:获取"id "后括号内的数字字符串:[在这里你可以找到身份证]在嵌入的第34行

将嵌入组件添加到集合列表或集合页

动态嵌入只适用于动态内容，所以你需要一个集合页或集合列表来保存你的嵌入。

对于这个例子，我们将使用一个Collection List，但是将您的嵌入添加到Collection Page是非常相似的。

因此，首先，我们将把一个嵌入组件放到我们为产品设计的集合列表中，将它放在我们想要购买按钮的位置。欧宝体育在线首页

从Shopify获取嵌入代码

现在是时候从Shopify获取嵌入代码了，按照我们在第3步中找到唯一标识符的相同步骤。

您可以使用两种类型的嵌入。一个选项从Shopify中输入产品欧宝体育在线首页图像、名称和价格，而另一个选项只是创建“购买”按钮。

你使用哪一种取决于你想要你的商店有多可定制。对于最终的可定制性，我们将使用按钮选项。

一旦我们将代码复制到剪贴板，我们将把它粘贴到我们刚刚在步骤4中添加的嵌入中。

替换唯一id

如果我们现在测试我们的页面，每个按钮都是完全一样。这不是我们想要的。

为了将每个Buy按钮链接到一个不同的产品，我们需要用Collection字段欧宝体育在线首页替换Dynamic Embed中的product Component和product ID。

为此，只需分别突出显示Product Component(它会欧宝体育在线首页出现两次!)和Product ID值，然后单击+添加字段用我们自己的价值观来代替内容。

完成了!

动态嵌入已经设置好了。

如需在未来添加更多产品，欧宝体育在线首页只需:

1. 在产品集合中创建一个新项目欧宝体育在线首页
2. 获取唯一标识符
3. 将它们粘贴到相应的字段中