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

# Ajuster la taille du bouton de panier fixe

> Personnalisez la taille et la position du bouton de panier fixe d'Upcart à l'aide de CSS.

<div id="overview">
  # Aperçu
</div>

Le bouton de panier fixe d'Upcart peut être redimensionné et repositionné avec du CSS personnalisé. Cela vous permet de mieux l'adapter à l'image de marque de votre boutique ou à vos préférences d'expérience utilisateur sur ordinateur et sur mobile.

Deux approches sont disponibles selon le niveau de contrôle souhaité.

***

<div id="option-1-scaled-resizing-simple-setup">
  ## Option 1 : redimensionnement par mise à l'échelle (configuration simple)
</div>

Cette méthode utilise un seul facteur d'échelle pour réduire ou agrandir le bouton et l'icône proportionnellement. C'est le moyen le plus simple d'ajuster la taille du bouton avec un minimum de code.

<div id="where-to-add-this">
  ## Où ajouter ce code
</div>

Accédez à **Upcart > Sticky Cart > Custom CSS** et collez le code ci-dessous.

```
/* 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">
  ## Comment personnaliser
</div>

* Modifiez `transform` pour redimensionner le bouton (p. ex. `0.8`, `0.6`, `1.25`, etc.)

<div id="option-2-pixel-specific-resizing-advanced-control">
  ## Option 2 : redimensionnement au pixel près (contrôle avancé)
</div>

Cette méthode vous permet de contrôler individuellement les dimensions de chaque élément à l'aide de valeurs en `px`. Utilisez-la lorsque vous souhaitez des ajustements précis qui ne reposent pas sur la mise à l'échelle.

```
: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">
  ## Comment personnaliser
</div>

* Ajustez les variables dans `:root` pour augmenter ou diminuer la taille de chaque élément
* Modifiez les valeurs `left` et `top` dans les sélecteurs pour centrer visuellement l'icône et le badge

<div id="need-help">
  ## Besoin d'aide ?
</div>

Si vous ne savez pas quelle méthode vous convient ou si vous avez besoin d'aide pour écrire du CSS personnalisé, nous vous recommandons de contacter un Shopify Expert. L'assistance d'Upcart n'aide pas directement à la mise en œuvre de CSS.

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