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

# Regolare la dimensione del pulsante sticky del carrello

> Personalizza la dimensione e la posizione del pulsante sticky del carrello di Upcart usando il CSS.

<div id="overview">
  # Panoramica
</div>

Il pulsante sticky del carrello di Upcart può essere ridimensionato e riposizionato con CSS personalizzato. Questo ti permette di adattarlo meglio al branding del tuo negozio o alle preferenze di esperienza utente su desktop e dispositivi mobili.

Sono disponibili due approcci, a seconda di quanto controllo desideri.

***

<div id="option-1-scaled-resizing-simple-setup">
  ## Opzione 1: ridimensionamento in scala (configurazione semplice)
</div>

Questo metodo usa un singolo fattore di scala per rimpicciolire o ingrandire proporzionalmente il pulsante e l'icona. È il modo più semplice per regolare la dimensione del pulsante con il minimo codice.

<div id="where-to-add-this">
  ## Dove aggiungerlo
</div>

Vai su **Upcart > Sticky Cart > Custom CSS** e incolla il codice qui sotto.

```
/* 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">
  ## Come personalizzare
</div>

* Modifica `transform` per ridimensionare il pulsante (ad es. `0.8`, `0.6`, `1.25`, ecc.)

<div id="option-2-pixel-specific-resizing-advanced-control">
  ## Opzione 2: ridimensionamento in pixel (controllo avanzato)
</div>

Questo metodo ti permette di controllare individualmente le dimensioni di ogni elemento usando valori in `px`. Usalo quando vuoi regolazioni precise che non dipendono dalla scala.

```
: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">
  ## Come personalizzare
</div>

* Regola le variabili in `:root` per aumentare o diminuire la dimensione di ogni elemento
* Modifica i valori `left` e `top` all'interno dei selettori per centrare visivamente l'icona e il badge

<div id="need-help">
  ## Hai bisogno di aiuto?
</div>

Se non sei sicuro di quale metodo faccia al caso tuo o hai bisogno di aiuto per scrivere CSS personalizzato, ti consigliamo di rivolgerti a uno Shopify Expert. Il supporto di Upcart non offre assistenza diretta per l'implementazione del CSS.

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