创建 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 之前，您必须已在 Shopify 后台中添加产品，并将其供货给 Buy Button 销售渠道。
步骤：
在 Shopify 后台中，点击设置 > 应用和销售渠道。
在应用和销售渠道页面中，点击Buy Button。
点击打开销售渠道。
点击创建 Buy Button。
点击产品 Buy Button。
从目录中选择产品或使用搜索来查找产品。点击选择。
-
可选：自定义 Buy Button。
点击下一步。
点击复制代码。
打开要在其中显示 Buy Button 的网页的 HTML 编辑器。请参阅向 HTML 添加 Buy Button 代码。
将代码粘贴在您要在其中显示 Buy Button 的 HTML 中，然后保存您的更改。
- 在 Shopify 应用中，点击 ... 按钮。
- 在销售渠道部分中，点击 Buy Button。
- 点击创建 Buy Button。
- 点击产品 Buy Button。
- 从目录中选择产品或使用搜索来查找产品。点击选择。
-
可选：点击自定义。
点击完成。
点击复制代码。
打开要在其中显示 Buy Button 的网页的 HTML 编辑器。请参阅向 HTML 添加 Buy Button 代码。
将代码粘贴在您要在其中显示 Buy Button 的 HTML 中，然后保存您的更改。
- 在 Shopify 应用中，点击 … 按钮。
- 在销售渠道部分中，点击 Buy Button。
- 点击创建 Buy Button。
- 点击产品 Buy Button。
- 从目录中选择产品或使用搜索来查找产品。点击选择。
-
可选：点击自定义。
点击完成。
点击复制代码。
打开要在其中显示 Buy Button 的网页的 HTML 编辑器。请参阅向 HTML 添加 Buy Button 代码。
将代码粘贴在您要在其中显示 Buy Button 的 HTML 中，然后保存您的更改。
为产品系列创建 Buy Button
为产品系列创建 Buy Button 时，实际上是为产品系列中的每个产品创建一个按钮。
创建 Buy Button 时，您可以选择布局样式并自定义按钮的颜色、文本和外观以及客户点击按钮时出现的操作。详细了解自定义 Buy Button。
在为产品系列创建 Buy Button 之前，您必须已完成以下操作：
步骤：
在 Shopify 后台中，点击设置 > 应用和销售渠道。
在应用和销售渠道页面中，点击Buy Button。
点击打开销售渠道。
点击创建 Buy Button。
点击产品系列 Buy Button。
选择产品系列，或者使用搜索来查找产品系列。点击选择。
-
可选：自定义 Buy Button。
点击下一步。
点击复制代码。
打开要在其中显示 Buy Button 的网页的 HTML 编辑器。请参阅向 HTML 添加 Buy Button 代码。
将代码粘贴在您要在其中显示 Buy Button 的 HTML 中，然后保存您的更改。
- 在 Shopify 应用中，点击 … 按钮。
- 在销售渠道部分中，点击 Buy Button。
- 点击创建 Buy Button。
- 点击产品系列 Buy Button。
- 选择产品系列，或者使用搜索来查找产品系列。点击选择。
-
可选：点击自定义。
点击完成。
点击复制代码。
打开要在其中显示 Buy Button 的网页的 HTML 编辑器。请参阅向 HTML 添加 Buy Button 代码。
将代码粘贴在您要在其中显示 Buy Button 的 HTML 中，然后保存您的更改。
- 在 Shopify 应用中，点击 … 按钮。
- 在销售渠道部分中，点击 Buy Button。
- 点击创建 Buy Button。
- 点击产品系列 Buy Button。
- 选择产品系列，或者使用搜索来查找产品系列。点击选择。
-
可选：点击自定义。
点击完成。
点击复制代码。
打开要在其中显示 Buy Button 的网页的 HTML 编辑器。请参阅向 HTML 添加 Buy Button 代码。
将代码粘贴在您要在其中显示 Buy Button 的 HTML 中，然后保存您的更改。