Skip to main content
⚠️ Важное уведомление Эта кастомизация работает только с версией 1 модулей корзины Upcart. Если вы недавно обновили корзину до версии 2, эти кастомизации могут не работать. Вам потребуется использовать новые селекторы для версии 2, приведённые в руководстве по миграции. Если ваши кастомизации работают не так, как ожидается, вы также можете вернуть корзину к версии 1 вместо использования версии 2. В настоящее время мы работаем над новыми шаблонами кастомизации для версии 2 модулей, и они будут доступны в ближайшее время.

Обзор

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

Как исправить

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

Доступ к настройкам пользовательского CSS

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

Добавление CSS

  1. Скопируйте и вставьте следующий фрагмент CSS в поле Custom CSS:
  1. Сохраните изменения.
  2. Обновите витрину магазина и откройте Upcart, чтобы убедиться, что изображения теперь отображаются корректно.

Почему это происходит

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