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

# Изображения товаров в Upcart растянуты / сжаты

> В этой статье объясняется, как исправить изображения товаров в Upcart, которые выглядят обрезанными, растянутыми или сжатыми.

⚠️ **Важное уведомление**

Эта кастомизация работает только с версией 1 модулей корзины Upcart. Если вы недавно обновили корзину до версии 2, эти кастомизации могут не работать. Вам потребуется использовать новые селекторы для версии 2, приведённые в [руководстве по миграции.](/ru/upcart/upcart_v20_migration_guide)

Если ваши кастомизации работают не так, как ожидается, вы также можете вернуть корзину к версии 1 вместо использования версии 2.

В настоящее время мы работаем над новыми шаблонами кастомизации для версии 2 модулей, и они будут доступны в ближайшее время.

<div id="overview">
  ## Обзор
</div>

Если изображения товаров выглядят растянутыми, сжатыми или обрезанными в Upcart, обычно это вызвано **конфликтом стилей темы**. Некоторые темы Shopify применяют глобальные стили изображений, которые влияют на отображение изображений товаров внутри Upcart.

Вы можете исправить эту проблему, добавив короткую CSS-кастомизацию прямо в настройках редактора Upcart.

***

<div id="how-to-fix-it">
  ## Как исправить
</div>

Выполните эти шаги, чтобы применить CSS-кастомизацию, сохраняющую пропорции изображений товаров.

<div id="accessing-custom-css-settings">
  ## Доступ к настройкам пользовательского CSS
</div>

1. Откройте **приложение Upcart** из панели управления Shopify.
2. Перейдите в **Cart Editor**.
3. Откройте **Settings** и выберите вкладку **Custom CSS**. Settings — это ряд вкладок; если вы не видите Custom CSS, она находится за **More settings**.

***

<div id="adding-the-css">
  ## Добавление CSS
</div>

1. Скопируйте и вставьте следующий фрагмент CSS в поле **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. Сохраните изменения.
2. Обновите витрину магазина и откройте Upcart, чтобы убедиться, что изображения теперь отображаются корректно.

***

<div id="why-this-happens">
  ## Почему это происходит
</div>

Некоторые темы Shopify применяют глобальные правила CSS, которые изменяют размер или обрезают изображения так, что это влияет на их отображение в сторонних приложениях, таких как Upcart. Эти правила могут переопределять стандартные стили Upcart и искажать пропорции изображений.

Приведённый выше фрагмент CSS гарантирует, что изображения товаров **сохраняют исходное соотношение сторон** и корректно отображаются как на компьютере, так и на мобильных устройствах.