创建 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 可用的 Basic、Classic 和全视图布局的描述。
Basic选择此布局可添加不含任何产品图片的 Buy Button。如果您已在其他在线位置显示产品,但只想添加按钮以供客户购买,则可能需要执行此操作。
Classic选择此布局可在 Buy Button 旁边显示产品图片和价格。此布局对于快速产品预览非常有用,例如在博客文章中。
全视图选择此布局可在 Buy Button 旁边显示产品图片、价格和描述。此布局模拟您在线商店中的产品详细信息页面。

Buy Button 操作

创建 Buy Button 时,您可以选择单击该按钮后执行的操作。

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

  • 将产品添加到购物车会将产品添加到购物车。客户可以继续购物并将其他产品添加到购物车。
  • 直接进入结账流程会将客户直接引导至您的结账页面,客户可以在其中购买产品。客户无法向其订单中添加其他产品。
  • 打开产品详细信息 显示“ 查看产品 ”按钮。当客户单击该按钮时,他们可以查看产品描述、选择任何可用的产品多属性,并将产品添加到购物车。如果产品有多张产品图片,则这些图片也会显示。
    • 当您选择 Full view 布局时,此选项不可用,因为 Full view 布局已显示所有产品详细信息。

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

Buy Button 外观

  • 按钮样式包括 Buy Button 中按钮部分的形状、颜色和排版。
  • 布局 根据您选择的布局样式,您可以自定义按钮对齐方式、图片大小、按钮文本、字体、颜色和大小等设置。
  • 购物车 包括嵌入式购物车的文本和颜色选项。您还可以为“ 订单备注 ”字段启用和自定义标签。您可以使用订单备注来收集客户关于如何准备和配送订单的特殊说明。“ 其他信息 ”字段可让您向客户传达消息。
    • 仅当您选择将产品添加到购物车打开产品详细信息作为按钮的操作时,您才能编辑购物车的设置。
  • 详细信息弹出窗口包括产品详细信息弹出窗口的设置。您可以自定义按钮的文本,是否包括数量字段,背景和标签所使用的颜色,以及标签的字体和字号。仅当您选择打开产品详细信息作为按钮的操作时,您才能编辑这些设置。

为单个产品创建 Buy Button

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

为产品创建 Buy Button 之前,您必须已在 Shopify 后台中添加该产品,并已在 Buy Button 销售渠道中将其设为可用

步骤:

台式电脑
  1. 在 Shopify 后台中,转至销售渠道 > Buy Button

  2. 点击创建 Buy Button

  3. 点击产品 Buy Button

  4. 从您的产品目录中选择产品,或使用搜索功能查找产品。点击选择

  5. 可选:自定义 Buy Button。

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

  7. 点击复制代码

  8. 打开要显示 Buy Button 的网页的 HTML 编辑器。请参阅将 Buy Button 代码添加到 HTML

  9. 在 HTML 中要显示 Buy Button 的位置粘贴代码,然后保存您的更改。

移动设备
  1. Shopify app 中,轻触 Menu 图标。

  2. 销售渠道 部分中,轻触 Buy Button

  3. 轻触创建 Buy Button

  4. 轻触产品 Buy Button

  5. 从您的产品目录中选择产品,或使用搜索功能查找产品,然后轻触选择

  6. 可选:轻触 自定义

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

  8. 轻触复制代码

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

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

为产品系列创建 Buy Button

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

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

为产品系列创建 Buy Button 之前,您必须:

步骤:

台式电脑
  1. 在 Shopify 后台中,转至销售渠道 > Buy Button

  2. 点击创建 Buy Button

  3. 点击 产品系列 Buy Button

  4. 选择产品系列,或使用搜索功能查找产品系列。点击选择

  5. 可选:自定义 Buy Button。

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

  7. 点击复制代码

  8. 打开要显示 Buy Button 的网页的 HTML 编辑器。请参阅将 Buy Button 代码添加到 HTML

  9. 在 HTML 中要显示 Buy Button 的位置粘贴代码,然后保存您的更改。

移动设备
  1. Shopify app 中,轻触 Menu 图标。

  2. 销售渠道 部分中,轻触 Buy Button

  3. 轻触创建 Buy Button

  4. 轻触 产品系列 Buy Button

  5. 选择产品系列,或使用搜索功能查找产品系列,然后轻触选择

  6. 可选:轻触 自定义

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

  8. 轻触复制代码

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

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