⚠️ إشعار مهم تنطبق هذه المحددات فقط على الإصدار 2 ‏(V2) من وحدات سلة Upcart. إذا كنت تستخدم الإصدار 1 ‏(V1)، فلن تعمل هذه المحددات. لسلات V1، يرجى الرجوع إلى وثائق محددات CSS للإصدار 1، التي تغطي بنية الوحدات والمحددات القديمة. للتحقق من الإصدار الذي تستخدمه، افتح Cart Editor وانظر إلى أعلى القائمة اليسرى. تظهر قائمة Cart version المنسدلة هناك بمجرد أن تكون كل وحدة في السلة على V2؛ وإذا لم ترها، فما زالت سلتك تحتوي على وحدات V1. لمزيد من المعلومات حول الانتقال من V1 إلى V2، راجع دليل الانتقال إلى V2.0.

نظرة عامة

إذا كنت تريد تغيير مظهر سلتك، مثل إخفاء سعر أو تعديل حجم النص أو إعادة تموضع زر، فهذا هو المكان الذي تبدأ منه. توفر مكتبة محددات CSS هذه الأدوات التي تحتاجها لإجراء تلك التغييرات بكودك المخصص. جميع محددات CSS المتاحة مجمّعة في هذه المقالة، مع روابط لموارد مفيدة لكتابة تنسيقاتك واختبارها.

ملاحظة

بينما نوفر هذه المكتبة لراحتك، فإن فريق دعم Upcart لا يمكنه المساعدة في بناء الكود المخصص أو إصلاحه. هذا جزء من سياسة التخصيص لدينا. نوصي باستشارة خبير Shopify لحلول الكود المخصص. اطّلع على خبراء Shopify

كيفية استخدام محددات CSS في Upcart

هذه المقالة هي مكتبة محددات CSS يمكنك استخدامها لتنسيق درج سلة Upcart وتخصيصه. يستهدف كل محدد جزءًا معينًا من السلة — مثل الترويسة وصفوف المنتجات وعروض البيع الإضافي (upsells) ووحدة المكافآت وغيرها. يمكنك استخدام هذه المحددات من أجل:

إخفاء العناصر أو إعادة تصميمها
تغيير التباعد أو الخطوط أو الألوان
تعديل التخطيط بما يتناسب مع هوية متجرك

لتطبيق CSS الخاص بك، افتح Cart Editor، وانتقل إلى Settings، واختر علامة التبويب Custom CSS، والصق تنسيقاتك في المحرر.

ما يجب معرفته قبل إضافة CSS

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

قائمة التحقق لتخصيص CSS:

اختبر في بيئة آمنة: استخدم معاينة أو قالبًا غير منشور عندما يكون ذلك ممكنًا قبل النشر.
ابدأ صغيرًا: أجرِ تغييرًا واحدًا في كل مرة ليسهل تتبع ما نجح وما لم ينجح.
الصق التنسيقات في المكان الصحيح: استخدم حقل Upcart Editor > Settings > Custom CSS لإضافة كودك.
استخدم أداة Inspect: انقر بزر الفأرة الأيمن على العناصر في متصفحك واختر Inspect للعثور على المحددات واختبارها مباشرة.
تجنّب الافتراضات: لا يظهر كل عنصر في جميع السلات — اختبر بسلات مختلفة (مع/بدون مكافآت، عروض بيع إضافي، إلخ).

تعمل المحددات التالية مع الإصدار 2 من وحدات سلة Upcart. يقدّم V2 نظام تسمية منظمًا ببادئتي فئات عامة (public) وداخلية (internal).

إرشادات مهمة لمحددات V2

⚠️ استخدم المحددات العامة فقط للتخصيص

المحددات العامة (التي تبدأ بـ upcart-public-) جزء من واجهة برمجة التطبيقات المستقرة وآمنة للاستخدام في التنسيق المخصص
المحددات الداخلية (التي تبدأ بـ upcart-internal-) محجوزة للاستخدام الداخلي وقد تتغير دون إشعار

✅ افعل: استخدم أسماء الفئات العامة للتنسيق

/* ✅ Correct usage */   
.upcart-public-header {     
    font-size: 18px;     
    font-weight: bold;   
}

❌ لا تفعل: لا تتجاوز أسماء الفئات الداخلية ولا تستخدم محددات عميقة

/* ❌ Avoid this */   
.upcart-internal-header {     
    font-size: 18px;     
    font-weight: bold;   
}    
  
/* ❌ Avoid this */   
.upcart-public-upsell div a {     
   font-size: 18px;     
   font-weight: bold;   
}

محددات CSS

المكونات العامة


محدد CSS	الوصف
`.upcart-public-skeleton`	غلاف محمّل الهيكل النائب العام للسلة.
`.upcart-public-component__button`	مكوّن الزر العام المستخدم عبر الوحدات.
`.upcart-public-component-loader`	مكوّن مؤشر التحميل الدوّار.
`.upcart-public-component-tag`	غلاف مكوّن الوسم.
`.upcart-public-component-tag__icon`	الأيقونة داخل الوسم.
`.upcart-public-component-tag__text`	المحتوى النصي للوسم.
`.upcart-public-component-tag__remove-button`	زر الإزالة (“x”) داخل وسم قابل للإزالة.
`.upcart-public-component-collapse__dropdown-container`	حاوية الأقسام المنسدلة القابلة للطي.
`.upcart-public-component-collapse__expand-icon`	الأيقونة التي تشير إلى حالة التوسيع/الطي.
`.upcart-public-component-carousel__container`	الغلاف الخارجي لشريط العرض الدوّار.
`.upcart-public-component-carousel__window`	نافذة القص التي تتحرك الشرائح داخلها.
`.upcart-public-component-carousel__track`	المسار المتحرك الحامل للشرائح.
`.upcart-public-component-carousel__slide`	شريحة واحدة في العرض الدوّار.
`.upcart-public-component-carousel__button`	زر السهم السابق / التالي.
`.upcart-public-component-progress-bar`	مكوّن شريط تقدم عادي (غير مقسّم).
`.upcart-public-component-progress-bar__track`	مسار شريط التقدم العادي.
`.upcart-public-component-progress-bar__fill`	الجزء المملوء من شريط التقدم العادي.
`.upcart-public-component-progress-bar__milestone`	علامة مرحلة على شريط التقدم العادي.
`.upcart-public-component-progress-bar__milestone-icon`	الأيقونة عند مرحلة على شريط التقدم العادي.
`.upcart-public-component-progress-bar__milestone-label`	التسمية عند مرحلة على شريط التقدم العادي.

وحدة الترويسة


محدد CSS	الوصف
`.upcart-public-header`	الحاوية الرئيسية لترويسة السلة.
`.upcart-public-header__logo`	صورة الشعار في ترويسة السلة.
`.upcart-public-header__close-button`	الزر المستخدم لإغلاق درج السلة.
`.upcart-public-header__close-button-icon`	الأيقونة المعروضة داخل زر الإغلاق.

وحدة الإعلانات


محدد CSS	الوصف
`.upcart-public-announcement`	قسم اللافتة أو الإعلان داخل السلة.
`.upcart-public-announcement-skeleton`	محمّل الهيكل النائب لشريط الإعلانات.

وحدتا التوصيات والبيع الإضافي


محدد CSS	الوصف
`.upcart-public-upsell`	الغلاف الرئيسي لوحدة البيع الإضافي.
`.upcart-public-upsell__header`	ترويسة قسم البيع الإضافي.
`.upcart-public-upsell__title`	نص عنوان قسم البيع الإضافي.
`.upcart-public-upsell__shop-now-button`	زر Shop Now على عناصر البيع الإضافي.
`.upcart-public-upsell__vertical-layout-wrapper`	غلاف التخطيط الرأسي للبيع الإضافي.
`.upcart-public-component-upsell-tile`	تخطيط البطاقة لكل منتج بيع إضافي/توصية.
`.upcart-public-component-upsell-tile__image-container`	حاوية صورة منتج البيع الإضافي.
`.upcart-public-component-upsell-tile__image`	صورة منتج البيع الإضافي.
`.upcart-public-component-upsell-tile__info`	قسم المعلومات في بطاقة البيع الإضافي.
`.upcart-public-component-upsell-tile__title-link`	غلاف الرابط لعنوان المنتج.
`.upcart-public-component-upsell-tile__title`	عنوان منتج البيع الإضافي.
`.upcart-public-component-upsell-tile__rating-row`	الصف الذي يحتوي على تقييمات المنتج.
`.upcart-public-component-upsell-tile__stars`	عرض تقييم النجوم.
`.upcart-public-component-upsell-tile__star--partial`	نجمة جزئية للتقييمات الكسرية.
`.upcart-public-component-upsell-tile__reviews`	عرض عدد المراجعات.
`.upcart-public-component-upsell-tile__price-row`	الصف الذي يحتوي على معلومات السعر.
`.upcart-public-component-upsell-tile__price-compare-at`	السعر الأصلي (المشطوب) لعرض البيع الإضافي.
`.upcart-public-component-upsell-tile__price`	السعر الحالي لعنصر البيع الإضافي.
`.upcart-public-component-upsell-tile__variant-row`	الصف الذي يحتوي على اختيار المتغير.
`.upcart-public-upsell__skeleton`	عنصر نائب هيكلي لوحدة البيع الإضافي.
`.upcart-public-upsell__skeleton-title`	هيكل نائب لعنوان قسم البيع الإضافي.
`.upcart-public-upsell__skeleton-image`	هيكل نائب لصورة منتج البيع الإضافي.
`.upcart-public-upsell__skeleton-product-title`	هيكل نائب لعنوان منتج البيع الإضافي.
`.upcart-public-upsell__skeleton-product-price`	هيكل نائب لسعر منتج البيع الإضافي.

وحدة الملاحظات


محدد CSS	الوصف
`.upcart-public-notes`	الحاوية الرئيسية لقسم الملاحظات.
`.upcart-public-notes__text-container`	حاوية منطقة نص الملاحظات.
`.upcart-public-notes__textarea`	منطقة إدخال النص لإضافة ملاحظة مخصصة إلى السلة.

وحدة رمز الخصم


محدد CSS	الوصف
`.upcart-public-discount-code`	الحاوية الرئيسية لقسم رمز الخصم.
`.upcart-public-discount-code__form`	غلاف النموذج لإدخال رمز الخصم.
`.upcart-public-discount-code__input-wrapper`	غلاف حقل إدخال رمز الخصم.
`.upcart-public-discount-code__input`	حقل الإدخال لكتابة رموز الخصم.
`.upcart-public-discount-code__suffix`	عنصر اللاحقة لحقل الإدخال.
`.upcart-public-discount-code__error`	عرض رسالة الخطأ للرموز غير الصالحة.
`.upcart-public-discount-code__button`	زر تطبيق رمز الخصم.
`.upcart-public-discount-code__skeleton`	عنصر نائب هيكلي لوحدة رمز الخصم.
`.upcart-public-discount-code__skeleton-input`	هيكل نائب لحقل إدخال رمز الخصم.
`.upcart-public-discount-code__skeleton-button`	هيكل نائب لزر تطبيق رمز الخصم.

وحدة شارات الثقة


محدد CSS	الوصف
`.upcart-public-trust-badges`	حاوية شارات الثقة.
`.upcart-public-trust-badges__image`	عنصر الصورة المستخدم في شارة الثقة.

وحدة المكافآت المتدرجة


محدد CSS	الوصف
`.upcart-public-rewards`	الحاوية الرئيسية لقسم المكافآت.
`.upcart-public-rewards__message`	يعرض رسائل التقدم المتعلقة بالمكافآت.
`.upcart-public-rewards__bar`	حاوية شريط تقدم المكافآت.
`.upcart-public-component-segmented-progress-bar`	مكوّن شريط التقدم المقسّم.
`.upcart-public-component-segmented-progress-bar__segments-container`	حاوية جميع أقسام شريط التقدم.
`.upcart-public-component-segmented-progress-bar__segment`	قسم فردي من شريط التقدم.
`.upcart-public-component-segmented-progress-bar__segment-fill`	الجزء المملوء من قسم شريط التقدم.
`.upcart-public-component-segmented-progress-bar__milestone`	علامة مرحلة على شريط التقدم.
`.upcart-public-component-segmented-progress-bar__milestone--bottom`	مرحلة موضوعة في الأسفل.
`.upcart-public-component-segmented-progress-bar__milestone--top`	مرحلة موضوعة في الأعلى.
`.upcart-public-component-segmented-progress-bar__milestone--middle`	مرحلة موضوعة في المنتصف.
`.upcart-public-component-segmented-progress-bar__milestone-icon`	الأيقونة المعروضة عند المرحلة.
`.upcart-public-component-segmented-progress-bar__milestone-label`	نص التسمية للمرحلة.
`.upcart-public-component-segmented-progress-bar__milestone-label--align-right`	تسمية مرحلة بمحاذاة يمينية.
`.upcart-public-component-segmented-progress-bar__milestone-label--align-center`	تسمية مرحلة بمحاذاة وسطية.
`.upcart-public-rewards__skeleton`	الحاوية الهيكلية لقسم المكافآت.
`.upcart-public-rewards__skeleton-message`	هيكل نائب لرسالة تقدم المكافآت.
`.upcart-public-rewards__skeleton-bar`	هيكل نائب لشريط تقدم المكافآت.

وحدة عناصر السلة


محدد CSS	الوصف
`.upcart-public-cart-items`	الغلاف الرئيسي لقائمة عناصر السلة.
`.upcart-public-cart-item`	غلاف عنصر سلة فردي.
`.upcart-public-cart-items-skeleton__content`	محمّل الهيكل النائب لعناصر السلة.
`.upcart-public-component-product-tile`	غلاف عنصر منتج فردي في السلة.
`.upcart-public-component-product-tile__content`	منطقة المحتوى في بطاقة المنتج.
`.upcart-public-component-product-tile__image-wrapper`	الغلاف المحيط بصورة المنتج.
`.upcart-public-component-product-tile__image`	صورة المنتج في السلة.
`.upcart-public-component-product-tile__info`	قسم المعلومات في بطاقة المنتج.
`.upcart-public-component-product-tile__header`	قسم الترويسة في بطاقة المنتج.
`.upcart-public-component-product-tile__product-title`	اسم المنتج في السلة.
`.upcart-public-component-product-tile__title-link`	الرابط الذي يحيط بعنوان المنتج.
`.upcart-public-component-product-tile__remove-button`	زر إزالة المنتج من السلة.
`.upcart-public-component-product-tile__variant`	عرض معلومات المتغير.
`.upcart-public-component-product-tile__properties`	غلاف البيانات الوصفية الإضافية للمنتج.
`.upcart-public-component-product-tile__bundle`	قسم معلومات الحزمة.
`.upcart-public-component-product-tile__product-pricing`	قسم التسعير في بطاقة المنتج.
`.upcart-public-component-product-tile__price-compare-at`	السعر الأصلي (المشطوب).
`.upcart-public-component-product-tile__price`	السعر النهائي المعروض للعميل.
`.upcart-public-component-product-tile__price-group`	الغلاف المحيط بالسعر وسعر المقارنة.
`.upcart-public-component-product-tile__savings`	التوفير المحدد لعنصر في السلة.
`.upcart-public-component-product-tile__controls`	قسم عناصر التحكم (الكمية، إلخ).
`.upcart-public-component-product-tile__quantity-selector`	غلاف محدد الكمية.
`.upcart-public-component-product-tile__quantity-minus`	زر لتقليل الكمية.
`.upcart-public-component-product-tile__quantity-plus`	زر لزيادة الكمية.
`.upcart-public-component-product-tile__discount-codes`	رموز الخصم المطبقة على العنصر.
`.upcart-public-component-product-tile__subscription-upgrade`	قسم ترقية الاشتراك.
`.upcart-public-component-product-tile__subscription-upgrade-btn`	الزر الذي يطبّق ترقية الاشتراك.
`.upcart-public-component-product-tile__select-wrapper`	غلاف القائمة المنسدلة للاختيار.
`.upcart-public-component-product-tile__select`	عنصر القائمة المنسدلة للاختيار.
`.upcart-public-product-properties__subscription`	يعرض تفاصيل الاشتراك للعنصر.
`.upcart-public-product-properties__item`	خاصية منتج فردية.
`.upcart-public-product-properties__link`	رابط ضمن خصائص المنتج.
`.upcart-public-cart-items__key-value-pair`	عرض زوج مفتاح-قيمة لخصائص العنصر.
`.upcart-public-bundle-properties`	حاوية خصائص الحزمة.
`.upcart-public-bundle-properties__variant-title`	عنوان المتغير لعناصر الحزمة.
`.upcart-public-bundle-properties__header`	ترويسة قسم خصائص الحزمة.
`.upcart-public-bundle-properties__item-components`	حاوية مكونات عنصر الحزمة.
`.upcart-public-bundle-properties__item-component-row`	صف لكل مكوّن من مكونات عنصر الحزمة.
`.upcart-public-bundle-properties__image-wrapper`	غلاف صورة عنصر الحزمة.
`.upcart-public-bundle-properties__content`	منطقة المحتوى لعنصر الحزمة.
`.upcart-public-bundle-properties__product-title`	عنوان المنتج لعنصر الحزمة.

وحدة الإضافات


محدد CSS	الوصف
`.upcart-public-addons`	الحاوية الرئيسية لقسم الإضافات.
`.upcart-public-addons__image-wrapper`	غلاف صورة الإضافة.
`.upcart-public-addons__content-wrapper`	غلاف المحتوى لمعلومات الإضافة.
`.upcart-public-addons__content-title-wrapper`	غلاف عنوان الإضافة.
`.upcart-public-addons__content-title`	عنوان منتج الإضافة.
`.upcart-public-addons__content-price`	قسم السعر للإضافة.
`.upcart-public-addons__compare-at-price`	السعر الأصلي (المشطوب) للإضافة.
`.upcart-public-addons__price`	السعر الحالي لمنتج الإضافة.
`.upcart-public-addons__content-description`	وصف منتج الإضافة.
`.upcart-public-addons__toggle-wrapper`	غلاف مفتاح تبديل الإضافة.
`.upcart-public-addons__toggle`	مفتاح التبديل لإضافة/إزالة إضافة.
`.upcart-public-addons__toggle-switch`	عنصر المفتاح في مفتاح التبديل.
`.upcart-public-addons__toggle-slider`	عنصر المنزلق في مفتاح التبديل.
`.upcart-public-addons__skeleton`	عنصر نائب هيكلي لقسم الإضافات.
`.upcart-public-addons__skeleton-image`	هيكل نائب لصورة منتج الإضافة.
`.upcart-public-addons__skeleton-text`	هيكل نائب للمحتوى النصي في الإضافات.

وحدة الدفع السريع


محدد CSS	الوصف
`.upcart-public-express-payments__container`	حاوية أزرار الدفع السريع.

وحدة ملخص السلة


محدد CSS	الوصف
`.upcart-public-cart-summary`	الحاوية الرئيسية لملخص السلة.
`.upcart-public-cart-summary__discount-codes`	حاوية رموز الخصم في الملخص.
`.upcart-public-cart-summary__discount-label`	تسمية قسم الخصم.
`.upcart-public-cart-summary__slide-codes`	الحاوية المنزلقة لرموز الخصم.
`.upcart-public-cart-summary__total-discount`	عرض إجمالي مبلغ الخصم.

موارد مفيدة للبدء:

البدء مع CSS المخصص: تعرّف على كيفية إضافة CSS مخصص بأمان في Upcart.
مقدمة إلى التخصيصات في Upcart: افهم كيف يعمل التخصيص ومن أين تبدأ.
استخدم الذكاء الاصطناعي لكتابة كود مخصص لـ Upcart: احصل على مساعدة في كتابة CSS أو JavaScript باستخدام موجهات بسيطة.
أفضل الممارسات لزيادة تحويلات السلة: حسّن تصميم سلتك بنصائح مجربة.

مرجع ميزات سلة التسوق

مرجع CSS

وصفات التنسيق

وصفات الوظائف

القوالب المخصصة

واجهة برمجة التطبيقات العامة لـ Upcart

مكتبة محددات CSS في Upcart ‏(V2)

نظرة عامة

ملاحظة

كيفية استخدام محددات CSS في Upcart

ما يجب معرفته قبل إضافة CSS

قائمة التحقق لتخصيص CSS:

إرشادات مهمة لمحددات V2

محددات CSS

المكونات العامة

وحدة الترويسة

وحدة الإعلانات

وحدتا التوصيات والبيع الإضافي

وحدة الملاحظات

وحدة رمز الخصم

وحدة شارات الثقة

وحدة المكافآت المتدرجة

وحدة عناصر السلة

وحدة الإضافات

وحدة الدفع السريع

وحدة ملخص السلة

موارد مفيدة للبدء:

​نظرة عامة

​ملاحظة

​

​كيفية استخدام محددات CSS في Upcart

​ما يجب معرفته قبل إضافة CSS

​قائمة التحقق لتخصيص CSS:

​إرشادات مهمة لمحددات V2

​

​محددات CSS

​المكونات العامة

​

​وحدة الترويسة

​وحدة الإعلانات

​وحدتا التوصيات والبيع الإضافي

​وحدة الملاحظات

​وحدة رمز الخصم

​وحدة شارات الثقة

​وحدة المكافآت المتدرجة

​وحدة عناصر السلة

​وحدة الإضافات

​وحدة الدفع السريع

​وحدة ملخص السلة

​موارد مفيدة للبدء:

​

​

نظرة عامة

ملاحظة

كيفية استخدام محددات CSS في Upcart

ما يجب معرفته قبل إضافة CSS

قائمة التحقق لتخصيص CSS:

إرشادات مهمة لمحددات V2

محددات CSS

المكونات العامة

وحدة الترويسة

وحدة الإعلانات

وحدتا التوصيات والبيع الإضافي

وحدة الملاحظات

وحدة رمز الخصم

وحدة شارات الثقة

وحدة المكافآت المتدرجة

وحدة عناصر السلة

وحدة الإضافات

وحدة الدفع السريع

وحدة ملخص السلة

موارد مفيدة للبدء: