Skip to main content

نظرة عامة

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

أين تجده

انتقل إلى:
Upcart > Cart Editor > Settings > Custom CSS
قسم Settings عبارة عن صف من علامات التبويب؛ و Custom CSS إحداها، إلى جانب Custom HTML. إذا لم تكن مرئية، فستجدها خلف More settings.

كيف يعمل

يمكنك إضافة CSS من أجل:
  • تنسيق عناصر السلة الافتراضية
  • تعديل مظهر HTML المخصص
  • ضبط المسافات والمحاذاة وأسلوب الخطوط والمزيد
أثناء الكتابة، ستظهر نافذة إكمال تلقائي منبثقة تقترح محددات Upcart صالحة للمساعدة في تسريع التحرير. سيؤدي اختيار اقتراح إلى إكمال القاعدة تلقائيًا ومساعدتك في هيكلة الكود الخاص بك. إذا لم تظهر التغييرات كما هو متوقع، فراجع اقتراحات استكشاف الأخطاء الشائعة، مثل تحديث ذاكرة التخزين المؤقت في كل من المتصفح ومحرر Upcart، والتحقق من مواضع CSS، والتأكد من الخصوصية (specificity) الصحيحة في قواعد CSS الخاصة بك.

استخدام المحددات

يوفر Upcart مجموعة واسعة من المحددات المخصصة. انقر على “Show list” لعرض جميع الخيارات المتاحة. تجنب استخدام المحددات العامة مثل body أو div أو h3 ما لم تكن مقيّدة بـ .upcart-cart لمنع التغييرات غير المقصودة في واجهة متجرك. في الحالات التي لا تُطبَّق فيها الأنماط بشكل صحيح، فكّر في زيادة خصوصية CSS أو إضافة !important إلى قواعد CSS الخاصة بك. يضمن ذلك تجاوزها لأي أنماط متعارضة. مثال:
مثال (محدد آمن):

مثال: تنسيق رسالة الشكر

لنفترض أنك أضفت هذا الـ HTML المخصص أسفل زر الدفع:
بدون CSS، ستبدو الرسالة عادية. لتنسيقها:

المشاكل الشائعة وحلولها

عدم ظهور CSS على الأجهزة المحمولة

إذا لم يكن النص أو الأنماط المخصصة مرئية على الجوال:
  • حدّث الصفحة في كل من محرر Upcart ومتصفح جوالك لمسح النسخ المخزنة مؤقتًا.
  • تأكد من أن أحدث إصدار منشور من السلة نشط.
  • تأكد من حفظ CSS في علامة التبويب Custom CSS ضمن Upcart > Cart Editor > Settings.

اختلافات بين المحرر والمتجر المباشر

الأنماط التي تظهر بشكل صحيح في المحرر ولكن ليس على الموقع المباشر قد تحتاج إلى زيادة خصوصية المحدد أو إضافة !important إلى القواعد الرئيسية.

استخدام محدد CSS غير صحيح

تحقق من استهداف الفئة (class) أو المعرّف (ID) الصحيح. ضمّن دائمًا بادئات مثل .upcart- للعناصر الخاصة بـ Upcart لتجنب النتائج غير المقصودة. إذا لم يُطبَّق النمط كما هو متوقع، فتأكد من أن المحدد .thank-you-message يستهدف بدقة عنصر HTML المقصود وتحقق من وضع كود CSS في علامة التبويب الصحيحة (Upcart > Cart Editor > Settings > Custom CSS).
الدعم الخاص بالتخصيصات: لا يمكن لدعم Upcart المساعدة في تنفيذ أو تصحيح أخطاء CSS المخصص. للمساعدة في التنسيقات المتقدمة، نوصي بالعمل مع خبير Shopify. لاستكشاف أخطاء CSS المخصص وإصلاحها، راجع قسم المشاكل الشائعة للحصول على إرشادات حول حل مشكلات مثل الأنماط المفقودة على الأجهزة المحمولة، والاختلافات بين معاينات المحرر وواجهات المتجر المباشرة، وخطأ وضع المحددات.