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

# كيفية تخصيص عرض السلة على الجوال

> يوضح هذا المقال كيفية تخصيص عرض السلة على الجوال باستخدام css.

<div id="introduction">
  # **مقدمة**
</div>

مرحبًا بك في هذا الدرس التعليمي حول تخصيص عرض السلة على الجوال بما يناسب تفضيلاتك! يمكن أن يؤدي تعديل عرض السلة على الجوال إلى تحسين تجربة التسوق لعملائك بشكل كبير من خلال ضمان سهولة عرض سلتك والتفاعل معها على الشاشات الأصغر. يتيح لك هذا التخصيص التحكم في التخطيط، والتأكد من ملاءمته بسلاسة لتصميم متجرك العام والحفاظ على مظهر نظيف ومنظم.

هذه الخطوات مصممة لأصحاب المتاجر أو المطورين ذوي المعرفة الأساسية بـ CSS. من خلال ضبط عرض السلة على الجوال، يمكنك تحسين قابلية الاستخدام وجعل عملية الدفع (checkout) أكثر سلاسة لعملائك، مما قد يزيد التحويلات ورضا العملاء.

لنبدأ ونجعل سلتك على الجوال تبدو وتعمل تمامًا كما تريد!

<div id="accessing-custom-css-settings">
  ## **الوصول إلى إعدادات CSS المخصص**
</div>

لبدء تخصيص CSS لسلة Upcart الخاصة بك، اتبع هذه الخطوات:

1. افتح **تطبيق Upcart** داخل لوحة التحكم.
2. انتقل إلى **Cart Editor**.
3. افتح **Settings** واختر علامة التبويب **Custom CSS** (خلف **More settings** إذا تجاوز صف علامات التبويب حدود العرض).

<div id="applying-custom-css">
  ## **تطبيق CSS المخصص**
</div>

بمجرد وصولك إلى قسم Custom CSS، يمكنك تغيير عرض السلة على الجوال باتباع هذه الخطوات أدناه. غيّر الرقم من 90% إلى أي رقم تريده؛ كلما زاد الرقم، زادت المساحة التي تشغلها السلة عبر الشاشة. (ملاحظة: ينطبق هذا على كل من V1.0 وV2.0 من Upcart)

1. حدد موقع منطقة إدخال CSS.
2. انسخ والصق الكود التالي في منطقة إدخال CSS:

```
.upcart-cart {   
  --widthOfMobileCart: 90%;   
}   
  
/* MOBILE WIDTH STYLING*/   
@media only screen and (max-width: 600px) {              
  [class*="styles_CartPreview__right__"] {   
    right: calc(var(--widthOfMobileCart) * -1);   
  }   
  
  [class*="styles_CartPreview__right__"]  
  [class*="styles_active__"] {   
    right: var(--widthOfMobileCart);   
  }   
  
  [class*="styles_CartPreview__"] {  
    width: var(--widthOfMobileCart);   
  }  
  
  .upcart-backdrop,  
  [class*="styles_CartPreview__empty__"],   
  [class*="styles_CartPreview__card__"],   
  [class*="styles_CartPreview__upsells__"],      
  [class*="styles_CartPreview__bottomModules__"],  
  .upcart-cart-body {   
    width: 100% !important;   
  }  
}
```

<div id="conclusion">
  # **الخاتمة**
</div>

باتباع هذا الدرس التعليمي، نجحت في تخصيص عرض السلة على الجوال، مما يجعلها أكثر سهولة في الاستخدام وأكثر توافقًا مع تصميم متجرك. يمكن لهذه التغييرات الصغيرة أن يكون لها تأثير كبير على تجربة التسوق لعملائك، مما يسهّل عليهم التصفح والشراء على الأجهزة المحمولة.

<div id="still-need-help">
  ## هل ما زلت بحاجة إلى مساعدة؟
</div>

إذا كنت بحاجة إلى أي مساعدة في التخصيصات، نوصي باستشارة Shopify Expert حول إضافة HTML وCSS وحتى JavaScript إلى درج السلة الخاص بك.

[اطّلع على Shopify Experts](https://www.shopify.com/partners/directory)