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

# Productafbeeldingen in Upcart zijn uitgerekt / samengedrukt

> Dit artikel legt uit hoe je productafbeeldingen in Upcart herstelt die afgesneden, uitgerekt of samengedrukt lijken.

⚠️ **Belangrijke mededeling**

Deze aanpassing werkt alleen met Versie 1 van de Upcart-cartmodules. Als je je winkelwagen onlangs hebt geüpgraded naar Versie 2, werken deze aanpassingen mogelijk niet. Je moet dan de nieuwe selectors voor Versie 2 gebruiken uit de [migratiegids.](/nl/upcart/upcart_v20_migration_guide)

Als je aanpassingen niet werken zoals verwacht, kun je je winkelwagen ook terugzetten naar Versie 1 in plaats van Versie 2 te gebruiken.

We werken momenteel aan nieuwe aanpassingstemplates voor Versie 2 van de modules; deze zijn binnenkort beschikbaar.

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

Als je productafbeeldingen er uitgerekt, samengedrukt of afgesneden uitzien in Upcart, wordt dit meestal veroorzaakt door een **stylingconflict met het thema**. Sommige Shopify-thema's passen globale afbeeldingsstyling toe die invloed heeft op hoe productafbeeldingen in Upcart worden weergegeven.

Je kunt dit probleem oplossen door een korte CSS-aanpassing rechtstreeks toe te voegen in de editorinstellingen van Upcart.

***

<div id="how-to-fix-it">
  ## Zo los je het op
</div>

Volg deze stappen om een CSS-aanpassing toe te passen die de verhoudingen van je productafbeeldingen behoudt.

<div id="accessing-custom-css-settings">
  ## Toegang tot de Custom CSS-instellingen
</div>

1. Open de **Upcart-app** vanuit je Shopify-dashboard.
2. Ga naar de **Cart Editor**.
3. Open **Settings** en selecteer het tabblad **Custom CSS**. Settings is een rij tabbladen — als je Custom CSS niet ziet, staat deze achter **More settings**.

***

<div id="adding-the-css">
  ## De CSS toevoegen
</div>

1. Kopieer en plak het volgende CSS-fragment in het veld **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. Sla je wijzigingen op.
2. Vernieuw je storefront en open Upcart om te bevestigen dat de afbeeldingen nu correct worden weergegeven.

***

<div id="why-this-happens">
  ## Waarom dit gebeurt
</div>

Sommige Shopify-thema's passen globale CSS-regels toe die afbeeldingen op een manier verkleinen of bijsnijden die invloed heeft op hoe ze verschijnen in apps van derden zoals Upcart. Deze regels kunnen de standaardstyling van Upcart overschrijven en de verhoudingen van afbeeldingen vervormen.

Het bovenstaande CSS-fragment zorgt ervoor dat productafbeeldingen **hun oorspronkelijke beeldverhouding behouden** en correct worden weergegeven op zowel desktop- als mobiele apparaten.