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

# Ajustar o tamanho do botão de carrinho fixo

> Personalize o tamanho e a posição do botão de carrinho fixo do Upcart usando CSS.

<div id="overview">
  # Visão geral
</div>

O botão de carrinho fixo do Upcart pode ser redimensionado e reposicionado com CSS personalizado. Isso permite alinhar melhor o botão à identidade visual da sua loja ou às suas preferências de experiência do usuário em desktop e dispositivos móveis.

Existem duas abordagens disponíveis, dependendo de quanto controle você quer ter.

***

<div id="option-1-scaled-resizing-simple-setup">
  ## Opção 1: redimensionamento por escala (configuração simples)
</div>

Este método usa um único fator de escala para reduzir ou ampliar o botão e o ícone proporcionalmente. É a maneira mais fácil de ajustar o tamanho do botão com o mínimo de código.

<div id="where-to-add-this">
  ## Onde adicionar isto
</div>

Vá em **Upcart > Sticky Cart > Custom CSS** e cole o código abaixo.

```
/* 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">
  ## Como personalizar
</div>

* Altere `transform` para redimensionar o botão (por exemplo, `0.8`, `0.6`, `1.25` etc.)

<div id="option-2-pixel-specific-resizing-advanced-control">
  ## Opção 2: redimensionamento em pixels (controle avançado)
</div>

Este método permite controlar as dimensões de cada elemento individualmente usando valores em `px`. Use-o quando quiser ajustes precisos que não dependam de escala.

```
: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">
  ## Como personalizar
</div>

* Ajuste as variáveis em `:root` para aumentar ou diminuir o tamanho de cada elemento
* Ajuste os valores de `left` e `top` dentro dos seletores para centralizar visualmente o ícone e o badge

<div id="need-help">
  ## Precisa de ajuda?
</div>

Se você não tem certeza de qual método é o ideal para você ou precisa de ajuda para escrever CSS personalizado, recomendamos entrar em contato com um Shopify Expert. O suporte do Upcart não ajuda diretamente com implementação de CSS.

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