Buy Button
Genstore Buy Button 是一款轻量级销售工具，支持商家将购买入口嵌入任意网页，帮助客户在不离开当前页面的情况下完成购买操作。本文档将介绍 Buy Button 的核心功能、应用场景、安装与配置流程，以及常见问题处理，帮助您高效使用该工具，提升转化率。
核心优势
Buy Button 提供以下功能，优化购物体验并提升销售：
- 无缝购买体验：可嵌入任何页面（如博客、官网、社交媒体或合作伙伴网站）， 客户点击按钮即可直接购买。
- 统一订单管理：通过 Genstore 后台统一跟踪并管理所有 Buy Button 订单，便于销售分析。
- 灵活的定制选项：支持多种展示形式，适配不同页面结构和品牌风格。
适用场景
Buy Button 适用于各种场景，助力商家低成本创新销售方式：
- 内容营销转化：将按钮嵌入博客、论坛、KOL 页面中，引导读者完成购买，例如，美妆商家可在一篇护肤博文中嵌入按钮，引导读者直接购买相关产品。
- 多渠道扩展：在品牌官网、社交平台、流量站或邮件营销中嵌入 Buy Button，快速将流量转化为销量。
- 协同销售：在相关店铺或互补产品页面嵌入按钮，如在咖啡豆页面加入购买咖啡器具的按钮，提升转化率。
- 预售与新品推广：在产品介绍页面嵌入按钮，支持预购或新品销售。
安装与授权
- 访问 Genstore 应用市场。
- 在搜索框中输入
Genstore Buy Button，点击卡片进入应用详情页。 - 点击 安装，系统将返回 Genstore 商户后台。
- 按照提示完成安装并授权，启用 Buy Button 销售渠道。
- [可选] 点击图钉图标将应用固定至导航栏，便于后续访问。
创建购买按钮
- 登录商户后台，进入 应用 -> Buy Button。
- 若未固定至导航栏，可前往 应用 -> 已安装，点击 Buy Button -> 打开应用。
- 根据需要，点击 产品 或 产品系列 后的 创建 按钮。
- 选择目标产品或系列，进入样式设置页面。
样式与行为配置
在创建 Buy Button 的过程中，您可以通过可视化界面灵活配置按钮样式与交互行为，以适配不同页面风格和用户使用习惯。
布局样式（预览样式）
您可在左侧选择 Buy Button 的展示样式，页面中央将实时预览对应效果。常见样式包括：
- 基本样式：仅展示按钮，适用于页面已包含产品图文信息的场景。
- 经典样式：展示产品图片和价格，方便客户快速了解商品。
- 完整样式：展示产品详情、图片和价格，适用于需要完整商品信息的推广页面。
此外，可在预览区域切换不同设备视图（如桌面端、移动端）。
按钮行为设置
在 点击按钮操作 处，您可选择用户点击按钮后的交互方式：
- 加入购物车（默认）
- 直接跳转至结账
- 跳转至产品详情页
选择后，预览区将同步展示实际效果。
样式设计（视觉与交互）
在左侧 设计 模块，可进入更细致的样式配置区域，具体包括：
按钮样式
设置按钮的颜色、文字颜色、边角样式、字体、字号等。
全局排版
- 设置产品卡片中按钮与文字的对齐方式（左对齐、居中等）
- 配置按钮文案（例如“立即购买”、“添加到购物车”）
- 是否启用数量选择器
- 字体与颜色：可分别设置产品名称与价格的字体、字号与颜色
跳转设置
在 结账页跳转设置 中选择点击按钮后页面的打开方式：
- 新窗口打开
- 当前页面打开
TIP
以上设置不会影响原有产品页面或店铺主题，仅用于生成当前 Buy Button 样式。
嵌入代码
- 完成配置后，点击 下一步 获取嵌入代码。
- 将代码复制并粘贴至目标网页的 HTML 编辑区域，如博客编辑器等页面。
- 保存页面并预览效果，确认按钮功能正常。
常见问题
Q1：Buy Button 是否会根据客户所在国家自动调整展示内容？
是的。Genstore 会根据客户的 IP 地址识别其所在市场，并判断所选产品是否在该市场可用。如果产品未在客户所在市场开放销售，系统将在结账流程中提示用户，订单将无法完成。因此，请确保产品在目标市场中启用。
Q2：嵌入页面后还能修改 Buy Button 的外观样式吗？
不建议直接修改已嵌入的 Buy Button 样式。样式配置在代码生成阶段已确定，嵌入后无法实时同步更改。若需修改，请在后台重新配置按钮样式并替换新代码。
Q3：可以在同一个页面嵌入多个 Buy Button 吗？
可以。但建议所有按钮的点击行为保持一致（例如：全部设置为 直接结账 或 加入购物车），以避免用户操作混乱，并确保统一的购买体验。