> ## 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 Expert에게 문의하시길 권장해요. Upcart 지원팀은 CSS 구현을 직접 도와드리지 않아요.

[Shopify Experts 보기](https://www.shopify.com/partners/directory)