> ## 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 el tamaño del botón del carrito fijo

> Personaliza el tamaño y la posición del botón del carrito fijo de Upcart usando CSS.

<div id="overview">
  # Descripción general
</div>

El botón del carrito fijo de Upcart se puede redimensionar y reposicionar con CSS personalizado. Esto te permite adaptarlo mejor a la marca de tu tienda o a tus preferencias de experiencia de usuario en dispositivos de escritorio y móviles.

Hay dos enfoques disponibles según cuánto control quieras tener.

***

<div id="option-1-scaled-resizing-simple-setup">
  ## Opción 1: Redimensionado escalado (configuración simple)
</div>

Este método usa un solo factor de escala para reducir o ampliar el botón y el ícono de forma proporcional. Es la forma más fácil de ajustar el tamaño del botón con un código mínimo.

<div id="where-to-add-this">
  ## Dónde añadir esto
</div>

Ve a **Upcart > Sticky Cart > Custom CSS** y pega el código de abajo.

```
/* 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">
  ## Cómo personalizarlo
</div>

* Cambia `transform` para redimensionar el botón (p. ej., `0.8`, `0.6`, `1.25`, etc.)

<div id="option-2-pixel-specific-resizing-advanced-control">
  ## Opción 2: Redimensionado por píxeles (control avanzado)
</div>

Este método te permite controlar las dimensiones de cada elemento individualmente usando valores en `px`. Úsalo cuando quieras ajustes precisos que no dependan de la 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">
  ## Cómo personalizarlo
</div>

* Ajusta las variables en `:root` para aumentar o reducir el tamaño de cada elemento
* Modifica los valores de `left` y `top` dentro de los selectores para centrar visualmente el ícono y la insignia

<div id="need-help">
  ## ¿Necesitas ayuda?
</div>

Si no estás seguro de qué método es el adecuado para ti o necesitas ayuda para escribir CSS personalizado, te recomendamos contactar a un Shopify Expert. El soporte de Upcart no ayuda directamente con la implementación de CSS.

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