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

# As imagens de produto no Upcart estão esticadas / achatadas

> Este artigo explica como corrigir imagens de produto no Upcart que aparecem cortadas, esticadas ou achatadas.

⚠️ **Aviso importante**

Esta personalização funciona apenas com a Versão 1 dos módulos de carrinho do Upcart. Se você atualizou recentemente seu carrinho para a Versão 2, essas personalizações podem não funcionar. Você precisará usar os novos seletores fornecidos para a Versão 2 no [guia de migração.](/pt/upcart/upcart_v20_migration_guide)

Se suas personalizações não estiverem funcionando como esperado, você também pode reverter seu carrinho para a Versão 1 em vez de usar a Versão 2.

No momento, estamos trabalhando em novos modelos de personalização para a Versão 2 dos módulos, e eles estarão disponíveis em breve.

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

Se as imagens dos seus produtos parecem esticadas, achatadas ou cortadas no Upcart, isso geralmente é causado por um **conflito de estilo do tema**. Alguns temas do Shopify aplicam estilos globais de imagem que afetam como as imagens de produto são exibidas dentro do Upcart.

Você pode corrigir esse problema adicionando uma pequena personalização de CSS diretamente nas configurações do editor do Upcart.

***

<div id="how-to-fix-it">
  ## Como corrigir
</div>

Siga estes passos para aplicar uma personalização de CSS que preserva as proporções das imagens dos seus produtos.

<div id="accessing-custom-css-settings">
  ## Acessando as configurações de CSS personalizado
</div>

1. Abra o **app Upcart** no seu painel do Shopify.
2. Navegue até o **Cart Editor**.
3. Abra **Settings** e selecione a aba **Custom CSS**. Settings é uma linha de abas — se você não vir Custom CSS, ela está atrás de **More settings**.

***

<div id="adding-the-css">
  ## Adicionando o CSS
</div>

1. Copie e cole o seguinte trecho de CSS no 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. Salve suas alterações.
2. Atualize sua loja e abra o Upcart para confirmar que as imagens agora são exibidas corretamente.

***

<div id="why-this-happens">
  ## Por que isso acontece
</div>

Alguns temas do Shopify aplicam regras de CSS globais que redimensionam ou cortam imagens de formas que afetam como elas aparecem em apps de terceiros como o Upcart. Essas regras podem sobrepor o estilo padrão do Upcart e distorcer as proporções das imagens.

O trecho de CSS acima garante que as imagens de produto **mantenham sua proporção original** e sejam exibidas corretamente tanto em desktop quanto em dispositivos móveis.