> ## 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 استخدام الخطوط المحددة في إعدادات قالب Shopify الخاص بك. لعرض خياراتك الحالية للخطوط، افتح [محرر قوالب Shopify](https://help.shopify.com/en/manual/online-store/themes/customizing-themes#access-the-theme-editor) وانتقل إلى قسم Typography.
## **🚧 معاينة السلة 🚧**
لن تظهر الخطوط الموروثة من قالبك في نافذة معاينة Upcart، ولكنها ستُعرض بشكل صحيح في واجهة متجرك المباشرة.
## إظهار الأسعار المشطوبة
فعّل هذا الإعداد لعرض سعر مشطوب (المعروف أيضًا باسم [سعر المقارنة](https://help.shopify.com/en/manual/discounts/sales#set-a-compare-at-price-for-a-product)) بجانب كل عنصر في السلة. يعكس ذلك التسعير المخفّض، على غرار صفحات منتجاتك.
## تفعيل سطر المجموع الفرعي
يضيف سطر مجموع فرعي إلى السلة. يؤدي تفعيله أيضًا إلى إظهار حقل **Subtotal text color** ضمن **Colors**، بحيث يمكن تنسيق المجموع الفرعي بشكل منفصل عن باقي نصوص السلة. مع إيقاف هذا الإعداد، يكون حقل اللون هذا مخفيًا.
## عرض السلة
يتحكم في مدى اتساع الدرج، ويتم ضبطه بشكل منفصل لكل شاشة عرض:
* **سطح المكتب** - **Default** أو **Wide**
* **الجوال** - **Full** (من حافة إلى حافة) أو **Nearly full** (فجوة صغيرة عند الحافة)
***
# الألوان
## لون الخلفية
يحدد لون الخلفية الرئيسي للسلة، باستثناء التذييل وبطاقات العروض الإضافية (upsell).
## لون تمييز السلة
يتحكم في لون خلفية تذييل السلة وبطاقات عناصر العروض الإضافية.
## لون نص السلة
يحدد لون جميع نصوص السلة، باستثناء نص الأزرار ونص التوفير، اللذين يتم التحكم فيهما بشكل منفصل.
## لون نص التوفير
يحدد لون نص التوفير المعروض أسفل سعر المنتج.
## لون نص المجموع الفرعي
يحدد لون سطر المجموع الفرعي. يظهر هذا الحقل فقط عند تفعيل **Enable subtotal line** ضمن **General**.
## 🚧 **معاينة السلة** 🚧
قد لا يعكس محرر المعاينة التنسيق النهائي بدقة. قد يتضمن قالب متجرك CSS مخصصًا يؤثر على حجم النص أو لونه. تحقق دائمًا من التغييرات في واجهة متجرك المباشرة.
***
# إعدادات الأزرار
يوفر Upcart خيارات متقدمة لتنسيق الأزرار، بما في ذلك تخصيص خاص لزر الدفع. ويشمل ذلك طرقًا لتعديلات CSS ودمج أدوات العلامة التجارية في Shopify.
## نصف قطر الزوايا
يضبط استدارة زوايا الأزرار، من **0 بكسل إلى 40 بكسل**. تمنح القيمة `0` زوايا حادة مربعة؛ و`40` هي أقصى استدارة يصل إليها شريط التمرير. تنطبق القيمة على زر الدفع وزر العرض الإضافي وزر الخصم وزر الترقية معًا.
يتوقف شريط التمرير عند 40 بكسل. للحصول على زر بشكل حبة الدواء بالكامل، تحتاج إلى [CSS مخصص](/ar/upcart/custom_css) — راجع [تخصيص CSS المتقدم](#advanced-css-customization-for-checkout-buttons) أدناه.
## لون الزر
يحدد لون الخلفية لجميع الأزرار في السلة، بما في ذلك:
* زر الدفع
* زر "Add to Cart" للعرض الإضافي
* زر "Apply" للخصم
* زر ترقية الاشتراك. يمكنك تخصيص ألوان هذه الأزرار عبر Cart Editor. لمزيد من التخصيصات المتقدمة مثل تعديلات CSS، راجع قسم التخصيص المتقدم.
## لون نص الزر
يحدد لون النص المستخدم في جميع أزرار السلة.
## لون نص الزر عند التمرير
يتحكم في لون نص الزر عندما يمرّر العميل مؤشر الفأرة فوقه. على سبيل المثال، إذا تم ضبطه على الأخضر، سيتحول النص إلى الأخضر عند التمرير.
## إظهار زر متابعة التسوق
يضيف زر **Continue shopping** إلى السلة، ما يتيح للعملاء إغلاق الدرج والعودة إلى التصفح دون استخدام أيقونة الإغلاق.
# تخصيص CSS متقدم لأزرار الدفع
لإجراء تغييرات تصميم كبيرة، يمكنك استخدام كود CSS مخصص لتعديل زر الدفع:
1. في Cart Editor، افتح **Settings** واختر علامة التبويب **Custom CSS**.
2. استخدم محدد CSS المناسب، مثل `.checkout`. أمثلة على مقتطفات CSS: لإنشاء زر بشكل حبة الدواء:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border-radius: 9999px !important;}
```
لإضافة حد أسود:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.checkout { border: 2px solid black !important;}
```
استبدل `.checkout` بفئة CSS الفعلية لزرك. تشمل التنسيقات الإضافية تأثيرات التمرير أو الحشو (padding) أو ألوان النص أو الخطوط.
# دمج علامة Shopify التجارية لتخصيص الأزرار
إذا كنت تستخدم Shopify، يمكنك تحديث تصميم زر الدفع عبر لوحة إدارة Shopify:
1. سجّل الدخول إلى لوحة إدارة Shopify الخاصة بك.
2. انتقل إلى `Settings > Checkout > Customize`.
3. استخدم خيارات العلامة التجارية لتعديل الخط أو الاستدارة أو اللون للحصول على تصميم متناسق.
