Buy Button

Genstore Buy Button 是一款轻量级销售工具，支持商家将购买入口嵌入任意网页，帮助客户在不离开当前页面的情况下完成购买操作。本文档将介绍 Buy Button 的核心功能、应用场景、安装与配置流程，以及常见问题处理，帮助您高效使用该工具，提升转化率。

产品亮点

Buy Button 提供以下功能，优化购物体验并提升销售：

• 无缝购买体验​：可嵌入任何页面（如博客、官网、社交媒体或合作伙伴网站）， 客户点击按钮即可直接购买。
• 统一订单管理​：通过 Genstore 后台统一跟踪并管理所有 Buy Button 订单，便于销售分析。
• 灵活的定制选项​：支持多种展示形式，适配不同页面结构和品牌风格。
• 多渠道扩展​：在品牌官网、社交平台、流量站或邮件营销中嵌入 Buy Button，快速将流量转化为销量。

TIP

不建议在 Genstore 在线商店或 Genstore 博客中使用 Buy Button，以免影响结账体验。

安装与授权

1. 访问 Genstore 应用市场。
2. 在搜索框中输入 Buy Button，点击卡片进入应用详情页。
3. 点击 ​安装​，系统将返回 Genstore 商户后台。
4. 按照提示完成安装并授权，启用 Buy Button 销售渠道。
5. [可选] 点击图钉图标将应用固定至导航栏，便于后续访问。

创建并配置 Buy Button

步骤一：进入 Buy Button 应用

• 登录商户后台，进入 应用 -> Buy Button。
• 若未固定至导航栏，可前往 ​应用 -> 已安装​，点击 Buy Button -> ​打开应用​。

步骤二：选择目标产品或产品系列

在应用界面中，根据需要点击 产品 或 产品系列 后的 创建 按钮，选择想要生成 Buy Button 的产品或系列。

注意：选择产品或产品系列前，请先为目标产品或目标系列中的产品添加 Buy Button 销售渠道。具体步骤，可参考 产品。

步骤三：设置布局样式与预览

• 在左侧 布局样式 区域选择展示样式，如：
  • 基本样式：仅显示 Buy Button。
  • 经典样式：含产品图片和价格。
  • 完整样式：包含产品详情、图片和价格。
• 页面中央将实时显示样式预览，可在预览区切换桌面端或移动端视图。

步骤四：配置按钮点击行为与交互

在 点击按钮操作 区域选择点击后执行的操作，并根据选择配置后续细节：

• 加入购物车（默认）
  • 启用后可自定义购物车样式：
    • 标题、辅助文字、按钮文案
    • 背景色、文字颜色
• 直接跳转至结账
  • 可配置跳转页面的打开方式：
    • 新窗口打开
    • 当前页面打开
• 打开产品详情
  • 启用后可配置产品详情弹窗样式：
    • 按钮文案、数量选择器
    • 产品名称、价格的字体、字号和颜色

步骤五：全局样式设计

除了以上点击按钮后的交互样式，您还可以在 设计 模块中自定义整体样式，包括：

• 按钮样式：颜色、文字颜色、边角、字体、字号等
• 全局排版：按钮和文字对齐方式、数量选择器开关
• 购物车：购物车标题、价格小计、按钮文案以及购物车为空时的提示文字
• 结账跳转：结账页面的打开方式（新窗口打开或当前页面打开）。

  注意：如希望在 Wix 页面中嵌入 Buy Button，请将结账跳转设置为新窗口打开。

TIP

以上设置不会影响原有产品页面或店铺主题，仅用于生成当前 Buy Button 样式。

复制并嵌入代码

• 完成配置后，点击 下一步 获取嵌入代码。
• 将代码复制并粘贴至目标网页的 HTML 编辑区域，如博客编辑器等页面，如 Shopify 博客文章、Wix 页面以及 WordPress 文章或页面，以下是各平台的具体操作步骤：

Shopify

1. 打开 Shopify 后台，进入 内容 > 博客文章。
2. 打开需要编辑的博客文章，或新建一篇博客文章。
3. 在内容编辑区域，点击富文本编辑器工具栏最右侧的 显示 HTML 图标。
4. 将 Buy Button 嵌入代码粘贴到 HTML 中。
5. 点击 保存。

Wix

1. 登录 Wix，前往 My Sites（我的网站），选择要编辑的网站并点击 Edit Site（编辑网站）。
2. 在 Wix 编辑器中，点击 + 按钮，选择 内嵌代码 -> 内嵌 HTML，将一个 HTML 小组件添加到页面。
3. 点击刚添加的小组件，打开 HTML 设定，选择 新增代码，并将 Buy Button 代码粘贴到输入框，然后点击 应用。
4. 调整 HTML 小组件大小，确保 Buy Button 显示完整。
5. 完成后点击 发布。

注意：由于 Wix 的平台限制，Buy Button 在 Wix 上无法使用 当前页面跳转 选项，顾客将在新窗口打开的结账页面中完成购买。

WordPress

1. 在 WordPress 控制面板中，进入要编辑的文章或页面。
2. 新建或编辑现有内容。
3. 在区块编辑器中，点击 + 按钮，搜索 自定义 HTML，并插入该区块。
4. 将 Buy Button 代码粘贴到自定义 HTML 区块的文本框中。
5. （可选）调整 Buy Button 在页面中的位置：
   • 移动区块：使用区块工具栏中的箭头按钮或拖动区块。
   • 预览效果：点击区块工具栏上的 预览。
6. 完成后点击 保存草稿、预览或发布。 若使用 WordPress 经典编辑器，则无需自定义 HTML 区块。将编辑器切换到 文本模式，并粘贴代码即可。

常见问题

Q1. Buy Button 是否会根据客户所在国家自动调整展示内容？

A：是的。Genstore 会根据客户的 IP 地址识别其所在市场，并判断所选产品是否在该市场可用。如果产品未在客户所在市场开放销售，系统将在结账流程中提示用户，订单将无法完成。因此，请确保产品在目标市场中启用。

Q2. 嵌入页面后还能修改 Buy Button 的外观样式吗？

A：不建议直接修改已嵌入的 Buy Button 样式。样式配置在代码生成阶段已确定，嵌入后无法实时同步更改。若需修改，请在后台重新配置按钮样式并替换新代码。

Q3. 可以在同一个页面嵌入多个 Buy Button 吗？

A：可以。但建议所有按钮的点击行为保持一致（例如：全部设置为 直接结账 或 ​加入购物车​），以避免用户操作混乱，并确保统一的购买体验。