Buy Button

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

产品亮点

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

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

安装与授权

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

创建并配置 Buy Button

步骤一：进入 Buy Button 应用

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

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

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

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

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

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

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

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

步骤五：全局样式设计

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

• 按钮样式：颜色、文字颜色、边角、字体、字号等
• 全局排版：按钮和文字对齐方式、数量选择器开关

TIP

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

嵌入代码

• 完成配置后，点击 下一步 获取嵌入代码。
• 将代码复制并粘贴至目标网页的 HTML 编辑区域，如博客编辑器等页面。
• 保存页面并预览效果，确认按钮功能正常。

常见问题

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

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

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

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

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

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