> ## 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 في Upcart ‏(V1)

> توضح هذه المقالة محددات CSS المتاحة في الإصدار 1 من Upcart، مما يتيح لك تطبيق تنسيقات مخصصة على درج السلة القديم.

📝 **ملاحظة**

تستهدف محددات V1 وحدات درج السلة القديم. إذا كنت قد ترقيت إلى V2، فلن تتطابق محددات الوحدات في هذه الصفحة بعد الآن — راجع [مكتبة محددات CSS للإصدار V2](/ar/upcart/upcart_css_selector_library_v2) للمحددات الحالية.

هناك استثناءان يجدر معرفتهما: `.upcart-cart` و`.upcart-cart-body` موجودان على هيكل الدرج وليس على وحدة، لذا ما زالا ينطبقان على V2. إصلاحات التخطيط التي تستهدف الدرج ككل (تقييد عرضه، إيقاف الفيض الأفقي) تستمر في العمل بعد الترقية.

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

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

جميع محددات CSS المتاحة مجمّعة في هذه المقالة، مع روابط لموارد مفيدة لكتابة تنسيقاتك واختبارها.

<div id="note">
  ## **ملاحظة**
</div>

بينما نوفر هذه المكتبة لراحتك، فإن فريق دعم Upcart **لا يمكنه المساعدة في بناء الكود المخصص أو إصلاحه.** هذا جزء من [سياسة التخصيص](/ar/upcart/upcart_customization_policy) لدينا.

نوصي باستشارة خبير Shopify لحلول الكود المخصص.

[اطّلع على خبراء Shopify](https://www.shopify.com/ca/partners/directory)

<div id="how-to-use-upcart-css-selectors">
  # كيفية استخدام محددات CSS في Upcart
</div>

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

يمكنك استخدام هذه المحددات من أجل:

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

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

<div id="what-to-know-before-adding-css">
  # ما يجب معرفته قبل إضافة CSS
</div>

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

<div id="css-customization-checklist">
  ## قائمة التحقق لتخصيص CSS:
</div>

* **اختبر في بيئة آمنة:** استخدم معاينة أو قالبًا غير منشور عندما يكون ذلك ممكنًا قبل النشر.

* **ابدأ صغيرًا:** أجرِ تغييرًا واحدًا في كل مرة ليسهل تتبع ما نجح وما لم ينجح.

* **الصق التنسيقات في المكان الصحيح:** استخدم حقل **Upcart Editor > Settings > Custom CSS** لإضافة كودك.

* **استخدم أداة Inspect:** انقر بزر الفأرة الأيمن على العناصر في متصفحك واختر **Inspect** للعثور على المحددات واختبارها مباشرة.

* **تجنّب الافتراضات:** لا يظهر كل عنصر في جميع السلات — اختبر بسلات مختلفة (مع/بدون مكافآت، عروض بيع إضافي، إلخ).

<div id="css-selectors-library">
  # مكتبة محددات CSS
</div>

فيما يلي قائمة بجميع محددات CSS المتاحة في Upcart. وهي مجمّعة حسب **الوحدة** (مثل الترويسة، المنتجات، عروض البيع الإضافي، إلخ) لتسهيل العثور على ما تريد تخصيصه. استخدمها كمرجع عند كتابة تنسيقاتك الخاصة.

<div id="general-settings">
  ## الإعدادات العامة
</div>

<div id="design-module">
  ### وحدة التصميم
</div>

|                     |                                     |
| ------------------- | ----------------------------------- |
| **محدد CSS**        | **الوصف**                           |
| `.upcart-cart`      | الحاوية الرئيسية لدرج السلة.        |
| `.upcart-cart-body` | تحتوي على المحتوى الأساسي للسلة.    |
| `.upcart-backdrop`  | الطبقة الداكنة التي تظهر خلف السلة. |

<div id="header-module">
  ### وحدة الترويسة
</div>

|                                    |                                                    |
| ---------------------------------- | -------------------------------------------------- |
| **محدد CSS**                       | **الوصف**                                          |
| `.upcart-header`                   | حاوية ترويسة السلة، بما في ذلك الشعار وزر الإغلاق. |
| `.upcart-header-close-button`      | الزر المستخدم لإغلاق درج السلة.                    |
| `.upcart-header-close-button-icon` | الأيقونة المعروضة داخل زر الإغلاق.                 |
| `.upcart-header-logo`              | يعرض صورة الشعار في ترويسة السلة.                  |
| `.upcart-header-text`              | نص العنوان المعروض في ترويسة السلة.                |

<div id="body-settings">
  ## إعدادات الجسم
</div>

<div id="announcements-module">
  ### وحدة الإعلانات
</div>

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

<div id="rewards-module">
  ### وحدة المكافآت
</div>

|                                    |                                       |
| ---------------------------------- | ------------------------------------- |
| **محدد CSS**                       | **الوصف**                             |
| `.upcart-rewards`                  | الحاوية الرئيسية لقسم المكافآت.       |
| `.upcart-rewards-message`          | يعرض رسائل التقدم المتعلقة بالمكافآت. |
| `.upcart-rewards-bar-background`   | طبقة الخلفية لشريط تقدم المكافآت.     |
| `.upcart-rewards-bar-foreground`   | تعبئة المقدمة/التقدم لشريط المكافآت.  |
| `.upcart-rewards-tier`             | يمثل مستوى محددًا في نظام المكافآت.   |
| `.upcart-rewards-tier-circle`      | مؤشر الدائرة المرئي لمستوى مكافأة.    |
| `.upcart-rewards-tier-icon`        | الأيقونة داخل دائرة مستوى المكافأة.   |
| `.upcart-rewards-tier-description` | نص الوصف أسفل كل مستوى مكافأة.        |
| `.upcart-rewards-skeleton`         | الحاوية الهيكلية لقسم المكافآت.       |
| `.upcart-rewards-message-skeleton` | الهيكل النائب لرسالة تقدم المكافآت.   |
| `.upcart-rewards-bar-skeleton`     | الهيكل النائب لشريط تقدم المكافآت.    |

<div id="recommendations-module">
  ### وحدة التوصيات
</div>

|                                           |                                        |
| ----------------------------------------- | -------------------------------------- |
| **محدد CSS**                              | **الوصف**                              |
| `.upcart-recommendation-module`           | غلاف وحدة توصيات المنتجات بالكامل.     |
| `.upcart-recommendations-title`           | نص عنوان قسم التوصيات.                 |
| `.upcart-recommendations-shop-now-button` | زر لشراء منتج موصى به مباشرة من السلة. |

<div id="subscription-upgrades-module">
  ### وحدة ترقيات الاشتراك
</div>

|                                         |                                                     |
| --------------------------------------- | --------------------------------------------------- |
| **محدد CSS**                            | **الوصف**                                           |
| `.upcart-subscription-upgrade-section`  | قسم للترويج لترقيات الاشتراك في السلة.              |
| `.upcart-subscription-upgrade-button`   | الزر المستخدم لتفعيل ترقية اشتراك.                  |
| `.upcart-subscription-upgrade-dropdown` | قائمة منسدلة لاختيار خيارات ترقية الاشتراك المتاحة. |

<div id="upsells-module">
  ### وحدة عروض البيع الإضافي
</div>

|                                        |                                                   |
| -------------------------------------- | ------------------------------------------------- |
| **محدد CSS**                           | **الوصف**                                         |
| `.upcart-upsells`                      | الحاوية الرئيسية لقسم عروض البيع الإضافي.         |
| `.upcart-upsells-module`               | غلاف وحدة عروض البيع الإضافي.                     |
| `.upcart-upsells-title`                | عنوان قسم عروض البيع الإضافي.                     |
| `.upcart-upsells-button`               | زر لإضافة عناصر البيع الإضافي إلى السلة.          |
| `.upcart-upsell-item-card`             | تخطيط البطاقة لكل منتج بيع إضافي.                 |
| `.upcart-upsell-item-title`            | عنوان منتج البيع الإضافي.                         |
| `.upcart-upsell-item-image-wrapper`    | الغلاف المحيط بصورة منتج البيع الإضافي.           |
| `.upcart-upsell-item-image`            | صورة منتج البيع الإضافي.                          |
| `.upcart-upsell-item-price`            | سعر عنصر البيع الإضافي.                           |
| `.upcart-upsell-item-price-row`        | الصف الذي يحتوي على السعر وسعر المقارنة.          |
| `.upcart-upsell-item-compare-price`    | السعر الأصلي (المشطوب) لعرض البيع الإضافي.        |
| `.upcart-upsell-item-variant-selector` | القائمة المنسدلة للمتغيرات لمنتجات البيع الإضافي. |

<div id="product-settings">
  ### إعدادات المنتج
</div>

|                                      |                                          |
| ------------------------------------ | ---------------------------------------- |
| **محدد CSS**                         | **الوصف**                                |
| `.upcart-products-section`           | حاوية جميع المنتجات في السلة.            |
| `.upcart-product-item`               | غلاف عنصر منتج فردي.                     |
| `.upcart-product-title`              | اسم المنتج في السلة.                     |
| `.upcart-product-title-link`         | الرابط الذي يحيط بعنوان المنتج.          |
| `.upcart-item-prices-row`            | الصف الذي يحتوي على معلومات التسعير.     |
| `.upcart-item-price`                 | السعر النهائي المعروض للعميل.            |
| `.upcart-item-compare-price`         | السعر الأصلي (المشطوب).                  |
| `.upcart-product-savings`            | التوفير المحدد لعنصر في السلة.           |
| `.upcart-item-option`                | حاوية خيارات المنتج مثل المقاس أو اللون. |
| `.upcart-item-option-category`       | تسمية فئة خيار المنتج.                   |
| `.upcart-item-option-value`          | قيمة خيار المنتج المحدد.                 |
| `.upcart-item-properties`            | غلاف البيانات الوصفية الإضافية للمنتج.   |
| `.upcart-item-property`              | خاصية منتج فردية.                        |
| `.upcart-item-property-subscription` | يعرض تفاصيل الاشتراك للعنصر.             |
| `.upcart-product-quantity-input`     | حقل إدخال الكمية للمنتج.                 |
| `.upcart-product-quantity-minus`     | زر لتقليل الكمية.                        |
| `.upcart-product-quantity-plus`      | زر لزيادة الكمية.                        |
| `.upcart-product-image-wrapper`      | الغلاف المحيط بصورة المنتج.              |
| `.upcart-quantity-warning`           | حاوية أي رسالة حد للكمية.                |
| `.upcart-quantity-warning-text`      | نص تحذير الكمية المعروض للمستخدم.        |

<div id="footer-settings">
  ## إعدادات التذييل
</div>

<div id="add-ons-module">
  ### وحدة الإضافات
</div>

|                                      |                                   |
| ------------------------------------ | --------------------------------- |
| **محدد CSS**                         | **الوصف**                         |
| `.upcart-addons`                     | الحاوية الرئيسية لقسم الإضافات.   |
| `.upcart-addons-title`               | عنوان قسم الإضافات.               |
| `.upcart-addons-product-description` | وصف منتج الإضافة.                 |
| `.upcart-addons-price`               | سعر منتج الإضافة.                 |
| `.upcart-addons-compare-price`       | السعر الأصلي (المشطوب) للإضافة.   |
| `.upcart-addons-toggle`              | مفتاح التبديل لإضافة/إزالة إضافة. |
| `.upcart-addons-image-wrapper`       | غلاف صورة الإضافة.                |

<div id="discount-codes-module">
  ### وحدة رموز الخصم
</div>

<div id="savings-row">
  ### صف التوفير
</div>

|                                  |                                                       |
| -------------------------------- | ----------------------------------------------------- |
| **محدد CSS**                     | **الوصف**                                             |
| `.upcart-savings-row`            | غلاف قسم الخصم/التوفير بأكمله في السلة.               |
| `.styles_Footer__savingsCodes__` | حاوية التسمية ("Discounts") ورموز الخصم المرتبطة بها. |
| `.upcart-discount-code-badge`    | غلاف كل شارة رمز خصم معروضة في الواجهة.               |
| `.upcart-discount-code-icon`     | حاوية أيقونة الخصم (مثل رمز التذكرة SVG).             |
| `.upcart-discount-code-text`     | التمثيل النصي لرمز الخصم (مثل "AUTO 5").              |
| `.upcart-savings-amount`         | يعرض المبلغ الفعلي الموفَّر من الخصومات.              |

<div id="express-payments-module">
  ### وحدة الدفع السريع
</div>

<div id="note-2">
  ## ملاحظة
</div>

تعمل أزرار الدفع السريع في Upcart كحاويات مرئية، بينما يتحكم Shopify بالكامل في المحتوى والوظائف بداخلها. نتيجة لذلك، لا يمكننا تعديل سلوكها أو مظهرها. راجع دليل [**وحدة الدفع السريع**](/ar/upcart/express_payments_module) لمزيد من المعلومات.

|                                         |                                 |
| --------------------------------------- | ------------------------------- |
| **محدد CSS**                            | **الوصف**                       |
| `.upcart-express-pay-buttons-container` | حاوية جميع أزرار الدفع السريع.  |
| `.upcart-express-pay-buttons-row`       | تخطيط الصف لأزرار الدفع السريع. |
| `.upcart-express-pay-button`            | محدد عام لزر دفع سريع.          |
| `.upcart-express-pay-button-shop-pay`   | زر خاص بـ Shop Pay.             |
| `.upcart-express-pay-button-google-pay` | زر خاص بـ Google Pay.           |
| `.upcart-express-pay-button-paypal`     | زر خاص بـ PayPal.               |
| `.upcart-express-pay-button-apple-pay`  | زر خاص بـ Apple Pay.            |
| `.upcart-express-pay-button-amazon-pay` | زر خاص بـ Amazon Pay.           |
| `.upcart-express-pay-button-meta-pay`   | زر خاص بـ Meta Pay.             |

<div id="trust-badges-module">
  ### وحدة شارات الثقة
</div>

|                             |                                     |
| --------------------------- | ----------------------------------- |
| **محدد CSS**                | **الوصف**                           |
| `.upcart-trust-badge`       | حاوية شارات الثقة.                  |
| `.upcart-trust-badge-image` | عنصر الصورة المستخدم في شارة الثقة. |

<div id="additional-notes-module">
  ### وحدة الملاحظات الإضافية
</div>

|                                                   |                                              |
| ------------------------------------------------- | -------------------------------------------- |
| **محدد CSS**                                      | **الوصف**                                    |
| `.NotesModule_NotesModule__`                      | حاوية الملاحظات الإضافية.                    |
| `.NotesModule_NotesModule__titleContainer__`      | حاوية عنوان قسم الملاحظات                    |
| `.NotesModule_NotesModule__dropdownContainer__`   | عنوان القائمة المنسدلة لقسم الملاحظات        |
| `.NotesModule_NotesModule__textModule__ textarea` | منطقة الإدخال لإضافة ملاحظة مخصصة إلى السلة. |

<div id="upcart-settings-module">
  ## وحدة إعدادات Upcart
</div>

<div id="skeleton-selectors">
  ### محددات الهياكل النائبة (Skeleton)
</div>

|                                                  |                                       |
| ------------------------------------------------ | ------------------------------------- |
| **محدد CSS**                                     | **الوصف**                             |
| `.upcart-skeleton`                               | غلاف محمّل الهيكل النائب العام للسلة. |
| `.upcart-product-item-skeleton`                  | عنصر نائب أثناء تحميل منتج.           |
| `.upcart-product-image-skeleton`                 | عنصر نائب لصورة منتج.                 |
| `.upcart-product-title-skeleton`                 | عنصر نائب لنص عنوان المنتج.           |
| `.upcart-product-price-container-skeleton`       | عنصر نائب لمنطقة التسعير.             |
| `.upcart-product-quantity-skeleton`              | عنصر نائب لعناصر التحكم في الكمية.    |
| `.upcart-item-option-skeleton`                   | عنصر نائب لخيارات العنصر.             |
| `.upcart-upsells-module-skeleton`                | هيكل نائب لوحدة عروض البيع الإضافي.   |
| `.upcart-upsells-title-skeleton`                 | هيكل نائب لعنوان قسم البيع الإضافي.   |
| `.upcart-upsell-item-image-skeleton`             | هيكل نائب لصورة منتج البيع الإضافي.   |
| `.upcart-upsell-item-title-skeleton`             | هيكل نائب لعنوان منتج البيع الإضافي.  |
| `.upcart-upsell-item-price-skeleton`             | هيكل نائب لسعر منتج البيع الإضافي.    |
| `.upcart-upsells-button-skeleton`                | هيكل نائب لزر إجراء البيع الإضافي.    |
| `.upcart-trust-badge-skeleton`                   | هيكل نائب لحاوية شارة الثقة.          |
| `.upcart-trust-badge-image-skeleton`             | هيكل نائب لصورة شارة الثقة.           |
| `.upcart-announcement-skeleton`                  | عنصر نائب هيكلي للإعلانات.            |
| `.upcart-rewards-skeleton`                       | هيكل نائب لقسم المكافآت.              |
| `.upcart-rewards-message-skeleton`               | هيكل نائب لرسائل المكافآت.            |
| `.upcart-rewards-bar-skeleton`                   | هيكل نائب لشريط تقدم المكافآت.        |
| `.upcart-addons-skeleton`                        | هيكل نائب لقسم الإضافات.              |
| `.upcart-addons-image-wrapper-skeleton`          | هيكل نائب لصورة منتج الإضافة.         |
| `.upcart-addons-skeleton-text-container`         | هيكل نائب للمحتوى النصي في الإضافات.  |
| `.upcart-discount-code-module-skeleton`          | هيكل نائب لوحدة رمز الخصم.            |
| `.upcart-discount-code-input-skeleton`           | هيكل نائب لحقل إدخال رمز الخصم.       |
| `.upcart-discount-code-button-skeleton`          | هيكل نائب لزر تطبيق رمز الخصم.        |
| `.upcart-checkout-button-container-skeleton`     | هيكل نائب لغلاف زر إتمام الشراء.      |
| `.upcart-checkout-button-skeleton`               | هيكل نائب لزر إتمام الشراء.           |
| `.upcart-express-pay-buttons-container-skeleton` | هيكل نائب لحاوية الدفع السريع.        |
| `.upcart-express-pay-button-skeleton`            | هيكل نائب لزر دفع سريع فردي.          |

<div id="helpful-resources-to-get-started">
  ## **موارد مفيدة للبدء:**
</div>

* **[البدء مع CSS المخصص](/ar/upcart/custom_css):** تعرّف على كيفية إضافة CSS مخصص بأمان في Upcart.
* **[مقدمة إلى التخصيصات في Upcart](/ar/upcart/getting_started_with_upcart_customizations):** افهم كيف يعمل التخصيص ومن أين تبدأ.
* **[استخدم الذكاء الاصطناعي لكتابة كود مخصص لـ Upcart](/ar/upcart/ai_prompt_suggestions_for_adding_custom_code_to_your_upcart_settings):** احصل على مساعدة في كتابة CSS أو JavaScript باستخدام موجهات بسيطة.
* **[أفضل الممارسات لزيادة تحويلات السلة](/ar/upcart/best_practices_to_increase_upcart_conversions):** حسّن تصميم سلتك بنصائح مجربة.