> ## 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 في [دليل الترحيل.](/ar/upcart/upcart_v20_migration_guide)

إذا لم تعمل تخصيصاتك كما هو متوقع، يمكنك أيضًا إرجاع سلتك إلى الإصدار 1 بدلاً من استخدام الإصدار 2.

نعمل حاليًا على قوالب تخصيص جديدة للإصدار 2 من الوحدات، وستتوفر قريبًا.

<div id="overview">
  ## نظرة عامة
</div>

إذا كانت صور منتجاتك تبدو ممددة أو مضغوطة أو مقطوعة في Upcart، فعادةً ما يكون السبب **تعارضًا في تنسيق السمة (theme)**. تطبّق بعض سمات 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**. الإعدادات عبارة عن صف من علامات التبويب — إذا لم ترَ 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 أعلاه أن **تحافظ صور المنتجات على نسبة العرض إلى الارتفاع الأصلية** وتُعرض بشكل صحيح على كل من أجهزة سطح المكتب والأجهزة المحمولة.