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

# Produktbilder in Upcart sind verzerrt / gestaucht

> Dieser Artikel erklärt, wie du Produktbilder in Upcart reparierst, die abgeschnitten, verzerrt oder gestaucht erscheinen.

⚠️ **Wichtiger Hinweis**

Diese Anpassung funktioniert nur mit Version 1 der Upcart-Warenkorbmodule. Wenn du deinen Warenkorb kürzlich auf Version 2 aktualisiert hast, funktionieren diese Anpassungen möglicherweise nicht. Du musst die neuen Selektoren für Version 2 aus dem [Migrationsleitfaden](/de/upcart/upcart_v20_migration_guide) verwenden.

Wenn deine Anpassungen nicht wie erwartet funktionieren, kannst du deinen Warenkorb auch auf Version 1 zurücksetzen, anstatt Version 2 zu verwenden.

Wir arbeiten derzeit an neuen Anpassungsvorlagen für Version 2 der Module — sie werden bald verfügbar sein.

<div id="overview">
  ## Überblick
</div>

Wenn deine Produktbilder in Upcart verzerrt, gestaucht oder abgeschnitten aussehen, liegt das in der Regel an einem **Theme-Styling-Konflikt**. Manche Shopify-Themes wenden globales Bild-Styling an, das beeinflusst, wie Produktbilder in Upcart angezeigt werden.

Du kannst dieses Problem beheben, indem du eine kurze CSS-Anpassung direkt in den Editor-Einstellungen von Upcart hinzufügst.

***

<div id="how-to-fix-it">
  ## So behebst du es
</div>

Folge diesen Schritten, um eine CSS-Anpassung anzuwenden, die die Proportionen deiner Produktbilder bewahrt.

<div id="accessing-custom-css-settings">
  ## Auf die Custom-CSS-Einstellungen zugreifen
</div>

1. Öffne die **Upcart-App** über dein Shopify-Dashboard.
2. Navigiere zum **Cart Editor**.
3. Öffne **Settings** und wähle den Tab **Custom CSS**. Settings ist eine Reihe von Tabs — wenn du Custom CSS nicht siehst, befindet es sich hinter **More settings**.

***

<div id="adding-the-css">
  ## Das CSS hinzufügen
</div>

1. Kopiere das folgende CSS-Snippet und füge es in das Feld **Custom CSS** ein:

```
#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. Speichere deine Änderungen.
2. Aktualisiere deinen Storefront und öffne Upcart, um zu bestätigen, dass die Bilder jetzt korrekt angezeigt werden.

***

<div id="why-this-happens">
  ## Warum das passiert
</div>

Manche Shopify-Themes wenden globale CSS-Regeln an, die Bilder so skalieren oder zuschneiden, dass ihre Darstellung in Drittanbieter-Apps wie Upcart beeinträchtigt wird. Diese Regeln können das Standard-Styling von Upcart überschreiben und die Bildproportionen verzerren.

Das obige CSS-Snippet stellt sicher, dass Produktbilder **ihr ursprüngliches Seitenverhältnis beibehalten** und sowohl auf Desktop- als auch auf Mobilgeräten korrekt angezeigt werden.