创建 Buy Button

当您在 Shopify 后台内添加 Buy Button 销售渠道后,您可以为一个产品一个产品系列创建 Buy Button。

创建 Buy Button 后,您需要复制自动生成的代码,然后将代码添加到您希望按钮显示的网页或博客文章中。例如,您可能希望将 Buy Button 添加到您的 Wordpress 博客或 Squarespace 网站中。

将 Buy Button 嵌入到您的网站后,您将无法更改它的外观。如果要更改,则必须在渠道中创建新按钮,并用新代码替换原始代码。

自定义 Buy Button

您可以自定义 Buy Button 的外观及其行为:

  • 颜色
  • 尺寸
  • 字体
  • 点击按钮时发生的操作
  • 结账页面是否在新的浏览器窗口中打开

自定义按钮时,您可以预览更改。您可以通过点击预览来测试 Buy Button 的行为。

布局样式

您可以选择 Buy Button 的布局。

Buy Button 的可用布局
基本选择此布局可添加 Buy Button,而不添加任何产品图片。如果您已在其他位置在线展示产品,但想添加一个购买按钮,那么可能需要选择此布局。
经典选择此布局可在 Buy Button 旁边显示产品图片和价格。此布局适用于快速产品预览,例如在博客文章中。
全视图选择此布局可在 Buy Button 旁边显示产品图片、价格和描述。此布局会模拟您在线商店中的产品详细信息页面。

Buy Button 操作

创建 Buy Button 时,您可以选择点击按钮时出现的操作。

注:如果您的页面上有多个 Buy Button,则需要为它们配置相同的操作。

如果将 Buy Button 用于产品系列,则该操作会应用于产品系列中的每个产品。

  • 将产品添加到购物车会将产品添加到购物车。客户可以继续购物并将其他产品添加到购物车。
  • 定向至结账会直接将客户引导至您的结账页面,他们可以在此处购买产品。客户无法向他们的订单添加额外的产品。
  • 打开产品详细信息会显示查看产品按钮。当客户点击此按钮时,他们可以查看产品的描述,选择任何有货的产品多属性,以及将产品添加到购物车。如果产品有多个产品图片,则还会显示这些图片。
    • 选择完整视图布局时,此选项不可用,因为完整视图布局已显示所有产品详细信息。

您还可以选择结账页面是在新的浏览器窗口中打开,还是在与网站相同的选项卡中打开。默认行为是在新窗口中打开结账页面。

Buy Button 外观

  • 按钮样式包括 Buy Button 的按钮部分的形状、颜色和字体。
  • 布局 根据您选择的布局样式,您可以自定义按钮对齐方式、图片尺寸、按钮文本、字体、颜色和尺寸等设置。
  • 购物车包括嵌入式购物车的文本和颜色选项。您还可以为订单备注字段启用和自定义标签。您可以使用订单备注收集客户关于如何准备和配送订单的特殊说明。您可以使用其他信息字段向客户传达信息。

    • 如果已选择将产品添加到购物车打开产品详细信息作为按钮的操作,则您只能编辑购物车的设置。
  • 详细的弹出窗口包括产品详细信息弹出窗口的设置。您可以自定义按钮的文本、是否显示数量字段、用于背景和标签的颜色以及标签的字体和字号。如果已选择打开产品详细信息作为按钮的操作,则您只能编辑这些设置。

为单个产品创建 Buy Button

您可以为单件产品创建 Buy Button。Buy Button 可以包含该产品的一个或所有多属性。创建 Buy Button 时,您可以选择布局样式并自定义按钮的颜色、文本和外观以及客户点击按钮时出现的操作。详细了解自定义 Buy Button

在为产品创建 Buy Button 之前,您必须已在 Shopify 后台中添加产品,并将其供货给 Buy Button 销售渠道。

步骤:

桌面
  1. 在 Shopify 后台中,转到设置 > 应用和销售渠道

  2. 应用和销售渠道页面中,点击Buy Button

  3. 点击打开销售渠道

  4. 点击创建 Buy Button

  5. 点击产品 Buy Button

  6. 从目录中选择产品或使用搜索来查找产品。点击选择

  7. 可选:自定义 Buy Button。

    1. 如果您的产品有多属性,请选择所有多属性或选择要包含的多属性。
    2. 选择布局样式以及客户点击按钮时出现的操作。您还可以自定义按钮的外观
    3. 默认情况下,结账行为会打开一个新窗口,但您可以选择在与网站相同的浏览器选项卡中打开结账页面。单击高级设置 > 在同一选项卡中重定向
  8. 点击下一步

  9. 点击复制代码

  10. 打开要在其中显示 Buy Button 的网页的 HTML 编辑器。请参阅向 HTML 添加 Buy Button 代码

  11. 将代码粘贴在您要在其中显示 Buy Button 的 HTML 中,然后保存您的更改。

iPhone
  1. Shopify 应用中,点击 ... 按钮。
  2. 销售渠道部分中,点击 Buy Button
  3. 点击创建 Buy Button
  4. 点击产品 Buy Button
  5. 从目录中选择产品或使用搜索来查找产品。点击选择
  6. 可选:点击自定义

    1. 如果您的产品有多个多属性,则选择所有多属性或从下拉列表中选择某个多属性。
    2. 选择布局样式以及客户点击按钮时出现的操作。您还可以自定义按钮的外观
    3. 默认情况下,结账行为会打开一个新窗口,但您可以选择在与网站相同的浏览器选项卡中打开结账页面。单击高级设置 > 在同一选项卡中重定向
  7. 点击完成

  8. 点击复制代码

  9. 打开要在其中显示 Buy Button 的网页的 HTML 编辑器。请参阅向 HTML 添加 Buy Button 代码

  10. 将代码粘贴在您要在其中显示 Buy Button 的 HTML 中,然后保存您的更改。

Android
  1. Shopify 应用中,点击 按钮。
  2. 销售渠道部分中,点击 Buy Button
  3. 点击创建 Buy Button
  4. 点击产品 Buy Button
  5. 从目录中选择产品或使用搜索来查找产品。点击选择
  6. 可选:点击自定义

    1. 如果您的产品有多个多属性,则选择所有多属性或从下拉列表中选择某个多属性。
    2. 选择布局样式以及客户点击按钮时出现的操作。您还可以自定义按钮的外观
    3. 默认情况下,结账行为会打开一个新窗口,但您可以选择在与网站相同的浏览器选项卡中打开结账页面。单击高级设置 > 在同一选项卡中重定向
  7. 点击完成

  8. 点击复制代码

  9. 打开要在其中显示 Buy Button 的网页的 HTML 编辑器。请参阅向 HTML 添加 Buy Button 代码

  10. 将代码粘贴在您要在其中显示 Buy Button 的 HTML 中,然后保存您的更改。

为产品系列创建 Buy Button

为产品系列创建 Buy Button 时,实际上是为产品系列中的每个产品创建一个按钮。

创建 Buy Button 时,您可以选择布局样式并自定义按钮的颜色、文本和外观以及客户点击按钮时出现的操作。详细了解自定义 Buy Button

在为产品系列创建 Buy Button 之前,您必须已完成以下操作:

步骤:

桌面
  1. 在 Shopify 后台中,转到设置 > 应用和销售渠道

  2. 应用和销售渠道页面中,点击Buy Button

  3. 点击打开销售渠道

  4. 点击创建 Buy Button

  5. 点击产品系列 Buy Button

  6. 选择产品系列,或者使用搜索来查找产品系列。点击选择

  7. 可选:自定义 Buy Button。

    1. 选择客户点击按钮时发生的操作。您还可以自定义按钮的外观
    2. 默认情况下,结账行为会打开一个新窗口,但您可以选择在与网站相同的浏览器选项卡中打开结账页面。单击高级设置 > 在同一选项卡中重定向
  8. 点击下一步

  9. 点击复制代码

  10. 打开要在其中显示 Buy Button 的网页的 HTML 编辑器。请参阅向 HTML 添加 Buy Button 代码

  11. 将代码粘贴在您要在其中显示 Buy Button 的 HTML 中,然后保存您的更改。

iPhone
  1. Shopify 应用中,点击 按钮。
  2. 销售渠道部分中,点击 Buy Button
  3. 点击创建 Buy Button
  4. 点击产品系列 Buy Button
  5. 选择产品系列,或者使用搜索来查找产品系列。点击选择
  6. 可选:点击自定义

    1. 选择客户点击按钮时发生的操作。您还可以自定义按钮的外观
    2. 默认情况下,结账行为会打开一个新窗口,但您可以选择在与网站相同的浏览器选项卡中打开结账页面。单击高级设置 > 在同一选项卡中重定向
  7. 点击完成

  8. 点击复制代码

  9. 打开要在其中显示 Buy Button 的网页的 HTML 编辑器。请参阅向 HTML 添加 Buy Button 代码

  10. 将代码粘贴在您要在其中显示 Buy Button 的 HTML 中,然后保存您的更改。

Android
  1. Shopify 应用中,点击 按钮。
  2. 销售渠道部分中,点击 Buy Button
  3. 点击创建 Buy Button
  4. 点击产品系列 Buy Button
  5. 选择产品系列,或者使用搜索来查找产品系列。点击选择
  6. 可选:点击自定义

    1. 选择客户点击按钮时发生的操作。您还可以自定义按钮的外观
    2. 默认情况下,结账行为会打开一个新窗口,但您可以选择在与网站相同的浏览器选项卡中打开结账页面。单击高级设置 > 在同一选项卡中重定向
  7. 点击完成

  8. 点击复制代码

  9. 打开要在其中显示 Buy Button 的网页的 HTML 编辑器。请参阅向 HTML 添加 Buy Button 代码

  10. 将代码粘贴在您要在其中显示 Buy Button 的 HTML 中,然后保存您的更改。

没有找到您需要的答案?我们将为您提供帮助。