> ## 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.

# 调整悬浮购物车按钮大小

> 使用 CSS 自定义 Upcart 悬浮购物车按钮的大小和位置。

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

Upcart 的悬浮购物车按钮可以通过自定义 CSS 调整大小和位置。这让你能在桌面端和移动端更好地匹配你商店的品牌风格或用户体验偏好。

根据你想要的控制程度，有两种可用方式。

***

<div id="option-1-scaled-resizing-simple-setup">
  ## 方式 1：等比缩放（简单设置）
</div>

此方法使用单个缩放系数按比例缩小或放大按钮和图标。这是用最少代码调整按钮大小的最简单方式。

<div id="where-to-add-this">
  ## 在哪里添加
</div>

前往 **Upcart > Sticky Cart > Custom CSS**，并粘贴以下代码。

```
/* Set your desired scale factor here */  
/* Recommended range: 1 (default) to 0.65 (smaller) */  
.upcart-sticky-widget {  
  transform: scale(0.55);  
}  
  
/* Scale up your quatity icon */  
/* Recommended range: 1 (default) to 1.25 (bigger) */  
.upcart-sticky-cart-quantity-icon {  
  transform: scale(calc(1.5));  
}
```

<div id="how-to-customize">
  ## 如何自定义
</div>

* 修改 `transform` 来调整按钮大小（例如 `0.8`、`0.6`、`1.25` 等）

<div id="option-2-pixel-specific-resizing-advanced-control">
  ## 方式 2：按像素精确调整（高级控制）
</div>

此方法允许你使用 `px` 值单独控制每个元素的尺寸。当你需要不依赖缩放的精确调整时，请使用此方法。

```
:root {  
  --widgetMainSize: 40px;  
  --widgetCartIconSize: 30px;  
  --widgetQuantityIconSize: 20px;  
}  
  
.upcart-sticky-widget {  
  height: var(--widgetMainSize) !important;  
  width: var(--widgetMainSize) !important;  
}  
  
[class*="styles_CartIcon"] {  
  left: -2px !important;  
  top: 4px !important;  
}  
  
.upcart-sticky-cart-quantity-icon {  
  height: var(--widgetQuantityIconSize) !important;  
  width: var(--widgetQuantityIconSize) !important;  
  top: -5px !important;  
  left: 25px !important;  
  z-index: 100 !important;  
}  
  
.upcart-sticky-widget svg {  
  display: block !important;  
  height: var(--widgetCartIconSize);  
}
```

<div id="how-to-customize-2">
  ## 如何自定义
</div>

* 调整 `:root` 中的变量来增大或减小每个元素的尺寸
* 微调选择器内的 `left` 和 `top` 值，使图标和角标在视觉上居中

<div id="need-help">
  ## 需要帮助？
</div>

如果你不确定哪种方法适合你，或需要帮助编写自定义 CSS，我们建议联系 Shopify 专家。Upcart 支持团队不会直接协助 CSS 的实现。

[查看 Shopify 专家](https://www.shopify.com/partners/directory)