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

# Настройка размера кнопки закрепленной корзины

> Настройте размер и положение кнопки закрепленной корзины Upcart с помощью CSS.

<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)