> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 悬浮购物车按钮

> 添加一个在整个店面始终可见的悬浮购物车图标，并自定义其外观。

<div id="overview">
  # 概览
</div>

Upcart 的 Sticky Cart Button（悬浮购物车按钮）是一个在客户滚动页面时始终可见的悬浮购物车图标，让客户随时都能更轻松地访问购物车。它在移动端尤其有用，因为在移动端很难触及屏幕右上角。

该按钮会显示当前购物车中的商品数量，点击后会打开 cart drawer。

<div id="where-to-find-it">
  ## 在哪里找到此功能
</div>

**Sticky cart** 是 Upcart 左侧导航中的一个独立页面——它不是购物车编辑器中的选项卡。

你可以在此处激活该按钮并调整其样式，使其与你的店面相匹配。

<div id="cart-icon">
  ## 购物车图标
</div>

从三种图标样式中选择：袋子、盒子或购物车。此图标将显示在悬浮按钮内。

<div id="background-color">
  ## 背景颜色
</div>

此项设置图标后面的圆形背景。你可以使用十六进制代码或颜色选择器来选择颜色。

<div id="icon-color">
  ## 图标颜色
</div>

此项更改图标符号本身的颜色。为了获得最佳可见性，请使用与背景颜色对比度高的颜色。

<div id="quantity-background-color">
  ## 数量气泡背景颜色
</div>

自定义购物车数量气泡（显示购物车内商品数量的圆圈）的背景颜色。

<div id="quantity-text-color">
  ## 数量文本颜色
</div>

调整数量气泡内数字的颜色。这有助于确保可读性，尤其是在深色或浅色背景下。

<div id="sticky-cart-position">
  ## 悬浮购物车位置
</div>

选择按钮在屏幕上显示的位置。可用位置包括：

* 右下
* 右中
* 右上
* 左下
* 左中
* 左上

这让你可以灵活避免与商店中的其他元素重叠。

<div id="device-settings">
  ## 设备设置
</div>

控制悬浮购物车的显示位置。选项包括：

* 在所有设备上显示
* 仅在桌面端显示
* 仅在移动端显示

这让你可以根据商店的布局和客户偏好来调整其可见性。