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

# Zdjęcia produktów w Upcart są rozciągnięte / ściśnięte

> Ten artykuł wyjaśnia, jak naprawić zdjęcia produktów w Upcart, które wyglądają na przycięte, rozciągnięte lub ściśnięte.

⚠️ **Ważna informacja**

Ta personalizacja działa tylko z wersją 1 modułów koszyka Upcart. Jeśli niedawno zaktualizowano Twój koszyk do wersji 2, te personalizacje mogą nie działać. Musisz użyć nowych selektorów przewidzianych dla wersji 2, opisanych w [przewodniku migracji.](/pl/upcart/upcart_v20_migration_guide)

Jeśli Twoje personalizacje nie działają zgodnie z oczekiwaniami, możesz też przywrócić koszyk do wersji 1 zamiast korzystać z wersji 2.

Obecnie pracujemy nad nowymi szablonami personalizacji dla wersji 2 modułów — będą one dostępne wkrótce.

<div id="overview">
  ## Omówienie
</div>

Jeśli zdjęcia produktów wyglądają w Upcart na rozciągnięte, ściśnięte lub przycięte, zwykle powodem jest **konflikt stylów motywu**. Niektóre motywy Shopify stosują globalne style obrazów, które wpływają na sposób wyświetlania zdjęć produktów w Upcart.

Możesz naprawić ten problem, dodając krótką personalizację CSS bezpośrednio w ustawieniach edytora Upcart.

***

<div id="how-to-fix-it">
  ## Jak to naprawić
</div>

Wykonaj poniższe kroki, aby zastosować personalizację CSS zachowującą proporcje zdjęć produktów.

<div id="accessing-custom-css-settings">
  ## Dostęp do ustawień niestandardowego CSS
</div>

1. Otwórz **aplikację Upcart** z poziomu panelu Shopify.
2. Przejdź do **Cart Editor**.
3. Otwórz **Settings** i wybierz zakładkę **Custom CSS**. Settings to wiersz zakładek — jeśli nie widzisz Custom CSS, znajduje się za **More settings**.

***

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

1. Skopiuj i wklej poniższy fragment CSS w polu **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. Zapisz zmiany.
2. Odśwież swój sklep i otwórz Upcart, aby potwierdzić, że zdjęcia wyświetlają się teraz poprawnie.

***

<div id="why-this-happens">
  ## Dlaczego tak się dzieje
</div>

Niektóre motywy Shopify stosują globalne reguły CSS, które zmieniają rozmiar lub przycinają obrazy w sposób wpływający na ich wygląd w aplikacjach zewnętrznych, takich jak Upcart. Te reguły mogą nadpisywać domyślne style Upcart i zniekształcać proporcje obrazów.

Powyższy fragment CSS zapewnia, że zdjęcia produktów **zachowują oryginalne proporcje** i wyświetlają się poprawnie zarówno na komputerach, jak i na urządzeniach mobilnych.