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

# Le immagini dei prodotti in Upcart appaiono allungate / schiacciate

> Questo articolo spiega come sistemare le immagini dei prodotti in Upcart che appaiono tagliate, allungate o schiacciate.

⚠️ **Avviso importante**

Questa personalizzazione funziona solo con la Versione 1 dei moduli del carrello di Upcart. Se hai aggiornato di recente il tuo carrello alla Versione 2, queste personalizzazioni potrebbero non funzionare. Dovrai usare i nuovi selettori forniti per la Versione 2 nella [guida alla migrazione.](/it/upcart/upcart_v20_migration_guide)

Se le tue personalizzazioni non funzionano come previsto, puoi anche riportare il tuo carrello alla Versione 1 invece di usare la Versione 2.

Attualmente stiamo lavorando a nuovi template di personalizzazione per la Versione 2 dei moduli, che saranno disponibili a breve.

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

Se le immagini dei tuoi prodotti appaiono allungate, schiacciate o tagliate in Upcart, di solito la causa è un **conflitto di stile del tema**. Alcuni temi Shopify applicano stili globali alle immagini che influenzano il modo in cui le immagini dei prodotti vengono visualizzate all'interno di Upcart.

Puoi risolvere questo problema aggiungendo una breve personalizzazione CSS direttamente nelle impostazioni dell'editor di Upcart.

***

<div id="how-to-fix-it">
  ## Come risolvere
</div>

Segui questi passaggi per applicare una personalizzazione CSS che preserva le proporzioni delle immagini dei tuoi prodotti.

<div id="accessing-custom-css-settings">
  ## Accedere alle impostazioni Custom CSS
</div>

1. Apri l'**app Upcart** dalla tua dashboard di Shopify.
2. Vai al **Cart Editor**.
3. Apri **Settings** e seleziona la scheda **Custom CSS**. Settings è una riga di schede — se non vedi Custom CSS, si trova dietro **More settings**.

***

<div id="adding-the-css">
  ## Aggiungere il CSS
</div>

1. Copia e incolla il seguente snippet CSS nel 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. Salva le modifiche.
2. Aggiorna il tuo negozio online e apri Upcart per confermare che le immagini ora vengano visualizzate correttamente.

***

<div id="why-this-happens">
  ## Perché succede
</div>

Alcuni temi Shopify applicano regole CSS globali che ridimensionano o ritagliano le immagini in modi che influenzano come appaiono nelle app di terze parti come Upcart. Queste regole possono sovrascrivere gli stili predefiniti di Upcart e distorcere le proporzioni delle immagini.

Lo snippet CSS qui sopra garantisce che le immagini dei prodotti **mantengano le loro proporzioni originali** e vengano visualizzate correttamente sia su desktop sia su dispositivi mobili.