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

# Les images de produits dans Upcart sont étirées / écrasées

> Cet article explique comment corriger les images de produits dans Upcart qui apparaissent coupées, étirées ou écrasées.

⚠️ **Avis important**

Cette personnalisation ne fonctionne qu'avec la Version 1 des modules de panier Upcart. Si vous avez récemment mis à niveau votre panier vers la Version 2, ces personnalisations peuvent ne pas fonctionner. Vous devrez utiliser les nouveaux sélecteurs fournis pour la Version 2 dans le [guide de migration.](/fr/upcart/upcart_v20_migration_guide)

Si vos personnalisations ne fonctionnent pas comme prévu, vous pouvez également rétablir votre panier en Version 1 au lieu d'utiliser la Version 2.

Nous travaillons actuellement sur de nouveaux modèles de personnalisation pour la Version 2 des modules, et ils seront bientôt disponibles.

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

Si vos images de produits semblent étirées, écrasées ou coupées dans Upcart, cela est généralement causé par un **conflit de style de thème**. Certains thèmes Shopify appliquent un style d'image global qui affecte l'affichage des images de produits dans Upcart.

Vous pouvez corriger ce problème en ajoutant une courte personnalisation CSS directement dans les paramètres de l'éditeur Upcart.

***

<div id="how-to-fix-it">
  ## Comment le corriger
</div>

Suivez ces étapes pour appliquer une personnalisation CSS qui préserve les proportions de vos images de produits.

<div id="accessing-custom-css-settings">
  ## Accéder aux paramètres Custom CSS
</div>

1. Ouvrez l'**application Upcart** depuis votre tableau de bord Shopify.
2. Naviguez vers le **Cart Editor**.
3. Ouvrez **Settings** et sélectionnez l'onglet **Custom CSS**. Settings est une rangée d'onglets — si vous ne voyez pas Custom CSS, il se trouve derrière **More settings**.

***

<div id="adding-the-css">
  ## Ajouter le CSS
</div>

1. Copiez et collez l'extrait CSS suivant dans le champ **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. Enregistrez vos modifications.
2. Actualisez votre boutique et ouvrez Upcart pour confirmer que les images s'affichent maintenant correctement.

***

<div id="why-this-happens">
  ## Pourquoi cela se produit
</div>

Certains thèmes Shopify appliquent des règles CSS globales qui redimensionnent ou recadrent les images d'une manière qui affecte leur apparence dans les applications tierces comme Upcart. Ces règles peuvent remplacer le style par défaut d'Upcart et déformer les proportions des images.

L'extrait CSS ci-dessus garantit que les images de produits **conservent leur rapport hauteur/largeur d'origine** et s'affichent correctement sur les appareils de bureau et mobiles.