You need to enable JavaScript to run this app.
导航
商品卡片
最近更新时间:2025.01.10 10:57:06首次发布时间:2023.09.22 10:43:27

通过商品卡片菜单,您可以在直播期间展示商品图片、名称和价格等信息,并结合热卖提醒、库存提醒和下单消息等,吸引观众点击进入商品详情页,提升观众的购买意愿。移动端观众可拥有边看边买的无缝购物体验。

效果演示

Image

  • 观看页支持根据商品名称或序号搜索商品。商品名称支持模糊搜索且英文字母不区分大小写。
  • 如果您在直播间内发送过卡券,则可在观看页的商品列表中,单击卡券查看卡券列表。详见卡券

前提条件

  • 您已开通旗舰版或定制版套餐。详见计费说明
  • 确保您拥有火山引擎主账号或具备以下权限的子账号。有关如何添加子账号,详见子账号管理
    • 菜单管理 > 可编辑权限:用于配置商品卡片菜单、展示查看商品消息和下单购买消息。
    • 直播控制 > 可编辑权限:用于对商品卡片标记商品讲解。

步骤一:配置商品卡片菜单

  1. 登录企业直播控制台

  2. 在直播列表中,单击进入直播间。

  3. 在左侧导航栏,选择菜单管理 > 商品卡片

  4. (可选)设置移动端观看页的购物车图标样式。推荐使用尺寸比例为 1:1 的图片,以免图片拉伸变形。
    Image

    说明

    如需在移动端横屏直播间展示购物车图标,请确保已启用聊天互动菜单。有关如何启用聊天互动菜单,详见聊天互动

  5. 配置商品卡片菜单的基础信息。

    1. 设置菜单在直播控制页面和观看页显示的名称。
      Image
    2. 单击全局配置。在弹出的全局配置页面,按需完成以下配置并单击确定
      Image
      • 开启直达链接功能。在不同平台点击商品卡片的观众,可以跳转至不同链接。该功能仅移动端支持。

        1. 打开直达链接开关。
        2. 输入环境名称和对应的环境 UA(User Agent)。例如环境为微信,对应环境 UA 为 MicroMessenger。

          说明

          只要平台的环境 UA 包含了配置的 UA 地址,即可成功匹配。例如输入 Mozilla 作为环境UA 字段的值,只要观众在环境 UA 包含 Mozilla 字段的平台点击商品卡片,即可在该平台内实现直达链接的跳转。

        3. 在配置商品卡片信息时填写指定的直达链接。

        观众在环境 UA 匹配成功的移动端平台点击商品卡片时,即可跳转至该商品卡片的直达链接。如果观众在其他平台点击商品卡片,则会跳转至该商品卡片的跳转链接。

      • 开启微信小程序跳转功能。点击商品卡片的观众,可以直接跳转到微信小程序。该功能仅移动端支持。

        1. 打开微信小程序跳转开关。
        2. 输入指定微信小程序的原始 ID。有关如何获取微信小程序的原始 ID,详见商品卡片常见问题
        3. 在配置商品卡片信息时填写指定的微信小程序链接。

        观众在移动端微信环境点击商品卡片时,即可跳转至指定的微信小程序。如果观众在其他平台点击商品卡片,则会跳转至该商品卡片的跳转链接。

      • 选择商品卡片在观看页的入口。显示菜单栏开关默认打开。

        • 打开开关:观看页支持展示商品卡片菜单和浮窗商品卡片。移动端观看页可同步展示购物车图标。

          说明

          • 移动端竖屏直播间仅支持展示购物车图标和浮窗商品卡片。
          • 如需在移动端横屏直播间展示购物车图标,请确保已启用聊天互动菜单。有关如何启用聊天互动菜单,详见聊天互动

          Image

        • 关闭开关:观看页仅支持展示浮窗商品卡片。

      • 选择浮窗商品卡片在 PC 端观看页的展示位置。默认展示在播放器的右上方。
        Image

      • 选择商品详情页的展示方式。该配置仅对直达链接和跳转链接生效。

        • 新页面展示内容:观众点击商品卡片后,页面自动跳转至新的浏览器标签页展示商品详情页。观众无法同时观看直播与商品详情页。
        • 直播页浮层展示内容:观众在移动端点击商品卡片后,在当前观看页以浮层形式展示商品详情页。观众可以在观看直播的同时查看商品详情页,实现边看边买。
    3. 商品卡片页面,单击保存
  6. 配置商品卡片的信息。
    Image
    您可以一次配置一个或多个商品卡片的信息。

    • 一次配置一个商品卡片的信息。
      1. 单击编辑更多
      2. 编辑商品卡片页面,完成以下配置。
        Image
        • 商品图:展示在商品卡片左侧。
          Image
        • 活动标签:展示在商品名称左侧。您可以选择企业直播提供的活动标签,或选择自定义并上传不超过 2 MB 的 PNG 图片作为活动标签。该功能目前仅移动端支持。
          Image
        • 商品名称:商品的名称。
          Image
        • 商品介绍:商品的简短文字介绍。
          Image
        • 售卖价:商品的当前价格。
          Image
        • 参考价:商品原价。
          Image
        • 卖点标签:展示在商品介绍下方。最多支持 3 个卖点,卖点间以分号(;)相隔。每个卖点最多支持 20 个字符,但建议不要超过 6 个字符。该功能目前仅移动端支持。
          Image
        • 跳转图:展示在商品卡片右下方。不配置,则展示默认的跳转图。
          Image
          上图为企业直播提供的默认跳转图。您也可以在商品卡片菜单下,单击上传默认跳转图,上传您自定义的默认跳转图。上传的默认跳转图作用于当前商品卡片菜单中所有已添加和待添加的商品卡片。
          Image
        • 直达链接:该字段仅在您于全局配置页面开启直达链接功能后显示。当观众在环境 UA 匹配成功的移动端平台上点击商品卡片时,即可跳转至该链接。有关如何开启直达链接功能,详见步骤 5。
        • 微信小程序链接:该字段仅在您于全局配置页面开启微信小程序跳转功能后显示。当观众在移动端微信环境点击商品卡片时,即可跳转至该微信小程序。有关如何开启微信小程序跳转功能,详见步骤 5。有关如何获取微信小程序链接,详见商品卡片常见问题
        • 跳转链接:商品详情页的链接。如果观众无法跳转至直达链接或微信小程序,则会跳转至该链接。

          说明

          当满足以下任一条件时,观众点击商品卡片后,跳转链接会自动拼接 ProductLinkExternalUserId=ID,传入观众的第三方平台唯一标识。您可通过该 ID,同步第三方平台与商城的登录状态。

          • 将观看限制或评论限制设置为自定义,且观众已完成自定义登录。拼接的 ProductLinkExternalUserId 取值为自定义登录时传入的 UserId。详见自定义登录
          • 以自定义模式(mode = 2)集成 Web 观播 SDK,且观众已完成自定义登录。拼接的 ProductLinkExternalUserId 取值为调用 GetSDKTokenAPI 接口时传入的 UserIdStr
        • 热卖/库存提醒:在商品讲解期间,动效展示商品的热卖和库存情况,促进下单。该功能目前仅移动端支持。详细配置与效果,详见(可选)步骤三:设置热卖或库存提醒
        • 上架:是否上架该商品,即是否在观看页展示该商品。
        • 下单消息:是否在聊天区域展示查看商品消息和下单购买消息。该功能目前仅移动端支持。详细配置与效果,详见(可选)步骤四:展示查看商品消息和下单购买消息
      3. (可选)单击商品页签右侧的 + 添加商品,参考上一步,完成商品卡片的信息配置。您可以使用键盘的左右方向键快速切换商品卡片,也可以单击删除卡片,删除当前商品卡片。
        Image
      4. 编辑商品卡片页面右下方,单击全部保存
      5. 商品卡片页面,单击保存
    • 一次配置多个商品卡片的信息。仅支持批量配置文本信息,图片需在控制台上传。
      1. 单击模板下载。确保使用最新版本的模板,以免上传数据错乱。
      2. 根据提示编辑模板内容。
      3. 单击批量上传,上传已编辑的模板。
  7. (可选)您可以对已添加的商品卡片进行以下操作。
    Image

    • 根据商品名称搜索商品卡片。支持模糊搜索且英文字母不区分大小写。
    • 拖拽调整商品卡片的展示顺序,或者在商品卡片左侧配置指定序号,将该商品卡片和指定序号的商品卡片互换顺序。
    • 打开或关闭上架开关,在观看页展示或隐藏指定商品卡片。
    • 单击上架右侧的筛选图标,根据商品卡片的上架或未上架状态,筛选商品卡片。
    • 单击下载卡片内容,将当前菜单内已保存的商品卡片信息下载至本地。
    • 单击置顶,将指定商品卡片置顶显示。
    • 单击删除,删除指定商品卡片。
    • 单击添加商品,添加商品卡片。
  8. 打开启用开关,在直播控制页面展示商品卡片菜单。如果您已在全局配置页面打开显示菜单栏开关,则观看页会同步展示商品卡片菜单。
    Image

    说明

    直播间内最多可启用 5 个菜单。

  9. 单击保存
    将菜单从非启用状态变更为启用状态后,单击保存会弹出编辑菜单对话框。按需对已启用的菜单进行以下操作并单击确定
    Image

    • 拖拽调整菜单在直播控制页面和观看页的展示顺序。
    • 修改菜单在直播控制页面和观看页显示的名称。
    • 删除指定菜单,即将菜单从启用状态变为非启用状态,但不会删除菜单的配置。

    您也可以单击页面右上方的菜单排序,弹出编辑菜单对话框并完成相关操作。

  10. (可选)单击添加菜单,并参考上文,完成商品卡片菜单的配置。
    Image

(可选)步骤二:标记商品讲解

主持人在讲解某件商品时,可以对该商品卡片标记商品讲解。

说明

仅配置了商品图的商品卡片支持标记商品讲解。

  1. 在左侧导航栏,单击直播控制
  2. 在页面右侧的商品卡片菜单下,单击商品卡片右侧的商品讲解
    Image
    • 如果您开启了直播时移功能,该商品卡片在控制台和观看页的商品卡片菜单中高优展示并以浮窗形式展示在观看页,同时在您讲解其他商品时,观众可点击看讲解跳转回之前讲解商品的时间点,观看商品对应的直播画面。方便观众快速获取商品的讲解内容,从而吸引观众浏览、购买商品。有关如何开启直播时移功能,详见直播时移

      注意

      请在直播开始前开启直播时移功能并在直播期间单击商品讲解

    • 如果您未开启直播时移功能,该商品卡片在控制台和观看页的商品卡片菜单中高优展示并以浮窗形式展示在观看页。
  3. (可选)在商品卡片菜单下,您还可以完成以下操作。
    Image
    • 根据商品名称或序号搜索商品卡片。商品名称支持模糊搜索且英文字母不区分大小写。
    • 单击上架下架,在观看页展示或隐藏该商品卡片。
    • 单击置于顶层图标,将该商品卡片置顶显示。
    • 拖拽调整商品卡片在控制台和观看页的显示顺序。
    • 单击取消讲解,取消该商品卡片的高优展示和浮窗展示。如开启直播时移功能,则观众在直播过程中无法回看已讲解的商品。

(可选)步骤三:设置商品的热卖或库存提醒

在商品讲解期间,通过设置商品的热卖或库存提醒,可以在浮窗商品卡片和商品卡片菜单中,动效展示该商品的热卖和库存情况,促进下单。该功能目前仅移动端支持。

注意

确保您已标记商品讲解。具体操作,详见(可选)步骤二:标记商品讲解

Image

  1. 在左侧导航栏,选择菜单管理 > 商品卡片
  2. 找到标记商品讲解的商品,单击编辑更多
    Image
  3. 编辑商品卡片页面,设置热卖或库存提醒,并单击右下方的全部保存
    • 设置热卖提醒:选择热卖提醒并输入热卖提醒数量。
      Image
    • 设置库存提醒:选择库存提醒并设置库存提醒数量。
      Image
  4. 商品卡片页面,单击保存

您也可以通过调用 UpdateProductReminderInfo 接口,更新商品的热卖或库存提醒。

(可选)步骤四:展示查看商品消息和下单购买消息

完成以下步骤,在聊天区域展示查看商品消息和下单购买消息。观众点击消息中的立即购买,即可跳转至指定商品的详情页,从而提高商品成单率。该功能目前仅移动端支持。

注意

  • 确保商品卡片已配置跳转链接、直达链接或微信小程序链接,即观众点击商品卡片后可跳转至商品详情页。
  • 确保商品卡片已上架。

配置方法,详见步骤一:配置商品卡片菜单

Image

  1. 开启直播间的下单消息。
    1. 在左侧导航栏,选择菜单管理 > 聊天互动
    2. 如果未启用聊天互动菜单,打开页面上方的启用开关。
    3. 基础配置页签下,按需勾选查看商品消息下单购买消息复选框,并单击保存
      Image
      如果同时触发了查看商品消息和下单购买消息,则优先展示下单购买消息。
      • 查看商品消息:每当有观众点击商品卡片,跳转至商品详情页时,观看页会展示查看商品信息。
      • 下单购买消息:每当有观众下单购买商品,您需调用 SendProductOrderMessage 接口,发送下单购买消息。
  2. 开启指定商品卡片的下单消息。
    1. 在左侧导航栏,选择菜单管理 > 商品卡片
    2. 单击编辑更多
      Image
    3. 编辑商品卡片页面,打开下单消息开关,并单击右下方的全部保存
      Image
    4. 商品卡片页面,单击保存

常见问题

商品卡片常见问题