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

# Las imágenes de producto en Upcart se ven estiradas / aplastadas

> Este artículo explica cómo arreglar las imágenes de producto en Upcart que aparecen recortadas, estiradas o aplastadas.

⚠️ **Aviso importante**

Esta personalización solo funciona con la Versión 1 de los módulos de carrito de Upcart. Si actualizaste recientemente tu carrito a la Versión 2, es posible que estas personalizaciones no funcionen. Tendrás que usar los nuevos selectores proporcionados para la Versión 2 en la [guía de migración.](/es/upcart/upcart_v20_migration_guide)

Si tus personalizaciones no funcionan como esperas, también puedes revertir tu carrito a la Versión 1 en lugar de usar la Versión 2.

Actualmente estamos trabajando en nuevas plantillas de personalización para la Versión 2 de los módulos, y estarán disponibles pronto.

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

Si tus imágenes de producto se ven estiradas, aplastadas o recortadas en Upcart, esto generalmente se debe a un **conflicto de estilos del tema**. Algunos temas de Shopify aplican estilos globales de imagen que afectan cómo se muestran las imágenes de producto dentro de Upcart.

Puedes arreglar este problema agregando una breve personalización de CSS directamente en los ajustes del editor de Upcart.

***

<div id="how-to-fix-it">
  ## Cómo arreglarlo
</div>

Sigue estos pasos para aplicar una personalización de CSS que preserve las proporciones de tus imágenes de producto.

<div id="accessing-custom-css-settings">
  ## Acceder a los ajustes de Custom CSS
</div>

1. Abre la **app de Upcart** desde tu panel de Shopify.
2. Navega al **editor de carrito**.
3. Abre **Settings** y selecciona la pestaña **Custom CSS**. Settings es una fila de pestañas — si no ves Custom CSS, está detrás de **More settings**.

***

<div id="adding-the-css">
  ## Agregar el CSS
</div>

1. Copia y pega el siguiente fragmento de CSS en el campo **Custom CSS**:

```
#CartPopup img {  
  object-fit: contain !important;  
}  
  
.upcart-upsell-item-image-wrapper a {  
  height: 100% !important;  
  display: flex !important;  
}  
  
.upcart-upsell-item-image-wrapper {  
  background-color: transparent !important;  
}  
  
@media (max-width: 600px) {  
  [class*="styles_ProductRow__imageWrapper__"] {  
    height: auto !important;  
  }  
}
```

1. Guarda tus cambios.
2. Refresca tu tienda y abre Upcart para confirmar que las imágenes ahora se muestran correctamente.

***

<div id="why-this-happens">
  ## Por qué sucede esto
</div>

Algunos temas de Shopify aplican reglas de CSS globales que redimensionan o recortan las imágenes de maneras que afectan cómo aparecen en apps de terceros como Upcart. Estas reglas pueden anular los estilos predeterminados de Upcart y distorsionar las proporciones de las imágenes.

El fragmento de CSS de arriba asegura que las imágenes de producto **mantengan su relación de aspecto original** y se muestren correctamente tanto en dispositivos de escritorio como móviles.